Generative Assets · site 448 · wave 58

How Baseline Diabetes Education was built

A lead-generation page for a trade that almost never publishes its fees, in a subject where publishing the wrong number is worse than publishing nothing at all.

The concept

Baseline Diabetes Education is a fictional single-practitioner clinic in Mount Lawley, seeing people who have just been diagnosed, who are starting insulin, who have been handed a pump or a CGM, who are planning a pregnancy, or who are due for their annual review. The audience is not shopping around on craft — they are frightened, or tired, or both, and they are reading a forum because nobody has told them what an appointment actually involves.

The page has one job: say exactly what the appointment is, how long it takes, what it costs and what they walk out holding, so that booking becomes the easy option. Everything else on the page exists to make that one answer trustworthy.

The proof element: the appointment planner

One control — your situation — and the whole appointment resolves: the minutes, the published fee, a drawn time bar split into three labelled segments, what to bring and what you leave with. There is no form in front of it and no “we’ll be in touch with a price” behind it.

The drawing is measured against a fixed 0–75 minute axis, and that axis is the price list: the five published tiers are drawn as ticks with their fee under each one. So the bar simultaneously answers “how long”, “how much” and “how does that compare with the other appointments”. A 30-minute review is visibly 40 % of a pump start, not just a different number.

The five situations, their consult length, published fee and segment split
Situation	Length	Fee	Segments (minutes)
Newly diagnosed type 2	60 min	$190	15 + 25 + 20
Starting insulin	60 min	$190	20 + 25 + 15
Starting a pump or CGM	75 min	$230	30 + 30 + 15
Planning a pregnancy	60 min	$190	25 + 20 + 15
Annual review	30 min	$95	10 + 12 + 8
Telehealth review (the switch)	20 min	$60	6 + 8 + 6

Published tiers: 20 min $60 · 30 min $95 · 45 min $140 · 60 min $190 · 75 min $230. Every fee on the page is a tier; nothing is a rate multiplied by minutes, because a per-minute rate invites a bill that does not match the quote. The segment splits for the five situations are pinned by the wave’s arithmetic script and asserted to sum to the consult length on every render. The 20-minute telehealth split (6 + 8 + 6) is ours — the script pins the 20 minutes and the $60 but not the internal split, so we derived it and assert it the same way.

Where the page argues against its own sale

The cheaper option is drawn, at the same scale, in every state. Beside the chosen appointment sits a dashed bar for the option you did not pick. On the annual review it is the $60 telehealth consult, stroked in jade with a live switch and the $35 saving named. Press the switch and the dashed bar flips: the drawing then shows the $95 clinic review you just turned down, so the dearer option is never hidden either.
A 20-minute review is not a substitute for a first appointment, and the page says so. On the four other situations the switch is disabled with its reason on the button, rather than left live to compute a dishonest answer.
Newly diagnosed sends you to your GP before it sends you to us, because the GP referral is the mechanism that opens a funded pathway — and it ends in something you can do today (“ring and say hold one”) rather than in a dead end.
A whole band before the enquiry form is spent telling you what is free — the NDSS, the ADEA directory of other credentialled educators, and the GP visit. Two of the three may mean you do not need this business at all.

All of that sits beside the number, inside the result card. None of it is in the FAQ, and the harness asserts that placement so a later tidy-up cannot demote it to small print.

Palette

Calm and deliberately non-clinical: not hospital blue, not the rose the collection has used for other health demos. The plum-indigo carries time (the consult segments, the chips, the fee) and the jade is reserved for what you leave with — it appears on the third segment of every bar, on the “you leave with” list, and on the steer panel. Every ratio below is pasted from the wave’s contrast log, not computed by hand.

Ground#F8F7F4 warm paper, not cream
Surface#FFFFFF cards and fields
Ink#1F2124 15.06:1 on ground
Muted#51555A 7.01:1 on ground
Plum-indigo#54357E 8.96:1 on ground; CTA fill
Jade#0E6B57 6.01:1 on ground
Band#232130 carries #F5F3F8 at 14.31:1
Reversed ink#F5F3F8 8.71:1 on plum

Colours minted during the build, and their measured ratios

Four colours were needed that the wave log did not declare. Each was measured with WCAG arithmetic before use, and each is restricted to the role stated here.

Minted	Role	Measured
`#E2DFDA`	Hairline rules and card borders only. Never text, never a meaningful mark.	1.24:1 on ground — decorative
`#8E8A84`	Form field and chip borders — a UI component boundary, so judged at 3:1.	3.43:1 on surface, 3.20:1 on ground
`#F1F6F4`	The steer panel and confirmation ground. Carries ink at 14.78:1, muted 6.88:1, jade 5.90:1.	all pairs ≥ 5.9:1
`#E6ECEF`	The Swan River fill on the service-area map. Its label is muted, not a line token.	6.30:1 for the label

Type

Epilogue 600/700 for headings — a geometric grotesque with enough warmth to avoid reading as a hospital form, and a very legible 6 and 9, which matters on a page whose headlines are mostly numbers. Public Sans 400/500 for body, set at a 17px base rather than 16: the reader may be older, tired, recently diagnosed, or holding a phone in a waiting room. Tabular lining figures everywhere a minute count or a fee appears, so the fee ladder’s columns line up and the answer does not jitter when the situation changes.

The typographic moment is the answer line: 60 minutes and $190 set at the same weight and size, side by side, with the fee in plum. The length and the price are given equal billing because on this page they are the same fact.

Techniques

Inline SVG, laid out in real CSS pixels. The time bar is not a fixed viewBox scaled to fit — the width is measured from the container and the geometry is recomputed, so labels never end up at 5px on a phone. Font sizes step down below 330px of drawing width.
SVG attribute toggling, never the hidden IDL property. When a segment is too narrow to hold its minute count or its numbered disc, those nodes get setAttribute('hidden','') — el.hidden on an SVG element sets a plain expando and does nothing. The CSS carries [hidden]{display:none !important} so the attribute actually hides.
Wall-clock entrance, gated on a cold-load flag. Segments grow from zero over 620 ms on first paint and 230 ms on subsequent changes, driven by performance.now() deltas rather than a per-frame accumulator, so a slow headless renderer finishes in the same wall time. A resize redraws at the new width and never re-enters the entrance — a clipped screenshot fires resize, and a page that re-animates on resize photographs empty.
Token invalidation before the state swap. Every chip and the telehealth switch cancel the in-flight animation frame in the handler, before the model changes, so rapid-fire clicks cannot leave a callback closed over the previous situation’s segments.
A plain-text mirror of the drawing sits beside it for screen readers, carrying the same minutes, the same fee, the same rejected option and the whole fee ladder. The answer block is an aria-live="polite" region.
No libraries, no raster images, no build step. Two self-contained files. The only external requests are the two Google Fonts stylesheets.

Conversion decisions

Why the CTA sits where it does

Three primary calls to action are reachable without scrolling on a phone: the masthead phone number, the hero “Ask for a time” button, and the sticky bar at the foot of the screen that owns a real tel: link and an anchor into the form. The masthead button is hidden below 720px because the sticky bar already carries it — two identical buttons in one thumb-reach is clutter, not conversion. Each of the h1, the hero CTA and the first trust line is asserted to finish above the sticky bar at 375×667, because the fold is the viewport minus the bar.

Why the proof card is beside the headline on desktop

The mobile reading order is the conventional one — masthead, hero, services, proof, why-us, reviews, map, FAQ, form, footer. At 1024px and up the proof card moves into the hero’s second column, because a gallery of thumbnails is how these pages get judged and a thumbnail showing a headline with no answer sells nothing. The answer, the drawn bar and the whole fee ladder all land inside the first 750 pixels at 1200 wide.

Why these form fields

Name, phone, suburb, situation, and clinic-or-telehealth. That is all a single-practitioner clinic needs to ring you back — no email required, no date picker, no “how did you hear about us”. The situation field is pre-filled from whatever the planner is showing, so somebody who has already answered the question on screen does not answer it twice. The phone field’s pattern is written with the parentheses and hyphen escaped, because Chrome compiles pattern under the regex v flag and a v-invalid class is silently discarded — the field then accepts anything, with no error in the console. The harness types rubbish into it and asserts it is rejected.

Why the confirmation says nothing was sent

There is no backend and the page never pretends otherwise. The confirmation is local, appears only after a valid submit, states plainly that nothing left the browser, and then describes what the real build would do. Faking a network round-trip on a demo is the one thing that would undermine everything else the page claims.

Why the trust signals are shaped this way

No stars, no counts, no “15 years’ experience”. The trust argument is: the fee is on the page, the credential is described in the credentialling body’s own words with a link so you can check it, the scope is stated negatively (“we are not your doctor”), and the page tells you three free things to try first. On a health page, what you refuse to claim is the claim.

The three passes

Pass 1 — Craft

Drove all five situations plus the telehealth switch and both form states, then looked at the rendered pixels, which is where the real defects were.

A console error on every page, at every width: the service-area map carried height="auto" as an SVG attribute. SVG length attributes do not accept auto, so Chrome logged <svg> attribute height: Expected length on load. Moved to CSS; the zero-console assert is what surfaced it.
The drawn bar fell out of the 1200×750 thumbnail frame (measured 561–773px). The thumbnail is the sales asset, so the card was retuned rather than the check: a redundant sub-heading removed, the drawing’s internal height cut from 212 to 194px, and the column padding tightened. Now 479–673px, with 77px of margin.
The hero failed the fold at 375. The CTA finished at 630px and the trust line at 807px against a bar top of 601px — the headline was 86 characters at 34px. Headline and subline were rewritten shorter, the h1 clamp minimum dropped to 1.72rem, and the safety block moved below the trust line. Now 416px and 565px.
The in-segment minute labels were centred on the numbered disc, which pushed “15 min” past the left edge of the first segment so it read as clipped. Re-anchored to the segment start with an 8px inset.
The telehealth caption collided with the “PUBLISHED FEES” label — 8px apart. Moved the caption onto the same line as the dashed bar it labels, which also saved a whole row of height and fed straight into the thumbnail fix above.
The axis printed “0” stacked over “min”, which read as two labels. Collapsed to a single “0 min”.

Pass 2 — Depth

The rejected option now flips. The dashed bar started life as a fixed “telehealth review, 20 min, $60” ghost. It is now “the option you did not pick”: choose the $60 telehealth review and the dashed bar becomes the $95 clinic review, drawn at 30 minutes on the same axis. The page cannot hide either direction of the trade.
The stroke carries meaning. Jade and semibold when the alternative is a genuine substitute (the annual review); muted and regular when it is not, which is the visual half of the sentence “a 20-minute review is not a substitute for this appointment”.
Second read: the axis is the price list. Most visitors read the bar as “how long is my appointment”; on a second visit the ticks resolve into the whole published ladder, including the 45-minute step that no situation on the page defaults to — which is why the services section now explains when that step gets booked.
The plain-text mirror and the state probe were extended to carry the rejected option, so the flip is assertable rather than merely visible.
Micro-interaction: after switching to telehealth, focus moves to the switch button, so the keyboard path can toggle back without hunting.

Pass 3 — Hardening

A real Perth street name was in the body copy. The service-area intro named a nearby arterial street inside a “a short run off” clause. The honesty rule is suburb level only, and the harness’s street check required a house number, so it sailed past. The copy was fixed and the check was tightened to catch a bare street name, then negative-tested by planting the phrase back.
The “before you pay us anything” band claimed too much. It opened “three things are free” — but a GP visit is not free and NDSS registration was never verified as free. Rewritten to “three things to check first”, which is true of all three.
The band was also a single narrow column against a 1440px page. Laid out as a two-column grid at 900px and up.
Map composition: two suburb labels were positioned with leader stubs that did not reach them; both simplified to plain end-anchored labels. The road hairlines were redrawn as three routes through the clinic rather than a closed polygon, and the telehealth pill moved clear of the coastline.
Verified the reduced-motion path settles on a finished frame with no animation frame ever scheduled, the probe live, and zero console errors.
Verified the pattern attribute compiles under the v flag in Node and that checkValidity() does not throw in Chrome, then drove junk (“ring me maybe”) into the phone field and asserted rejection.
Ran the rapid-fire drive — six control clicks in a single evaluate with no settle between — and asserted a coherent final state and no errors.
Scanned both files for curly-quoted attributes: zero. Confirmed one <h1> per page, no horizontal overflow at 375, and no element past the viewport box at 375 on either page.
Ornament removed (the Chanel rule): the numbered discs on the bar originally repeated in the legend and in a third row of leader ticks below the bar. The ticks went; the discs and the legend numbers carry the mapping between them.

Final harness state: 191 asserts green across three widths and both pages, including an independently reimplemented oracle for every situation’s minutes, fee, segment split and drawn bar geometry. Five defects were then planted one at a time — a second <h1>, a LocalBusiness JSON-LD block, a curly-quoted attribute, a real street name, and a console.error on load — and all five fired, with the file restored and its SHA-256 re-checked after each one.

The curly-quote plant is the one worth naming, because it exposed a dead check. The scan was reading document.documentElement.outerHTML, and the HTML parser re-serialises every attribute with straight quotes — so a source-level class=“x” was invisible to it and the check could never have fired on anything. Rewritten to scan the raw file on disk, which is what the rule always meant, and then re-planted against the rewritten version.

Why this converts

A person who has just been diagnosed does not ring three clinics to compare — they ring the one that already answered the question they were too embarrassed to ask, which is “what actually happens, and what will it cost me”, and this page answers it in one tap before any form appears. The published fee ladder is the single highest-leverage element on the page, because every competitor in Perth says “fees on enquiry” and the page says so out loud — naming the practice you are breaking is what turns a price into a character reference. The proof element converts harder than a price list would because it draws the option the visitor did not choose at the same scale and the same weight, including the $35 the business gives away by pointing an annual review at telehealth, and a quote that visibly costs the seller money reads as a model rather than a pitch. The refusals — see your GP first, here are three free things to try, you can find another educator at the association’s own directory — are placed beside the number rather than in the FAQ, so they read as how this business works rather than as small print, and every one of them still ends in something the reader can do today. And the form asks for five things instead of twelve, because the only unanswered question left by the time someone reaches it is when.

Local SEO we would implement for the real business

This demonstration deliberately ships no LocalBusiness, Review or AggregateRating structured data. The business is fictional, its reviews are demo copy and its registration numbers are visibly patterned zeros — putting any of that into a real search index would be dishonest markup. The live page emits only a WebPage object that names itself a demonstration.

For a real client, this is the block we would ship, with a verified ABN, a real address, a real practitioner registration and a reviews feed that is actually theirs:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "MedicalBusiness",
  "@id": "https://example.com.au/#clinic",
  "name": "Baseline Diabetes Education",
  "medicalSpecialty": "Endocrine",
  "description": "Credentialled diabetes educator, clinic and telehealth across WA.",
  "url": "https://example.com.au/",
  "telephone": "+61 8 XXXX XXXX",
  "image": "https://example.com.au/img/clinic.jpg",
  "priceRange": "$$",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "<their suite and street>",
    "addressLocality": "Mount Lawley",
    "addressRegion": "WA",
    "postalCode": "6050",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.93, "longitude": 115.87 },
  "areaServed": [
    { "@type": "City", "name": "Perth" },
    { "@type": "State", "name": "Western Australia" }
  ],
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday"],
      "opens": "08:00", "closes": "17:00" },
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": "Friday", "opens": "08:00", "closes": "13:00" }
  ],
  "availableService": [
    { "@type": "MedicalTherapy", "name": "First diabetes education consult (60 min)" },
    { "@type": "MedicalTherapy", "name": "Insulin start (60 min)" },
    { "@type": "MedicalTherapy", "name": "Insulin pump or CGM start (75 min)" },
    { "@type": "MedicalTherapy", "name": "Telehealth review (20 min)" }
  ],
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.9", "reviewCount": "63"
  },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "A real, consenting patient" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "Their own words, from their own reviews feed."
  }]
}
</script>

Alongside it: a verified Google Business Profile with the same NAP as the footer, the fee ladder marked up as an Offer set, an FAQPage block over the questions already on the page (they are written as real questions for exactly this reason), suburb landing pages only where there is genuine local intent rather than one per suburb in the metro area, and a booking-conversion event wired to the form so the ranking work can be judged on bookings rather than sessions.

What this page declined to publish

Every figure below was considered and left off, because we could not verify it at its source

Any Medicare item number, schedule fee or rebate amount. The referral pathway is described as a mechanism — the GP referral is what opens it — and the page states plainly, twice, that the rules are set by Medicare, that they change, and that no figure is printed here.
Any bulk-billing claim. Not stated, not implied.
Any NDSS product price or entitlement. The scheme is described in its own published words and the page says outright that it prints no product prices because the scheme sets them.
Any private health fund rebate or extras-cover claim.
Any clinical instruction of any kind — no doses, no blood glucose targets, no hypo protocol, no device settings, no dietary prescriptions. The segment labels name what an appointment covers; they never say what to do. That is a design constraint, not a limitation: it is also the honest scope of a web page.
Any outcome or complication statistic. No fear copy, no before-and-after.
A real street address. Suburb level only, stated on the page.

What was verified, and where

healthdirect.gov.au — the helpline number 1800 022 222 and that its registered nurses are available 24 hours a day, 7 days a week; and that a critical or life-threatening situation means calling triple zero (000). Both appear on the page, attributed.
ndss.com.au — that the NDSS “is an Australian Government initiative administered by Diabetes Australia for people living with diabetes”, that registration gives access to subsidised products and free information, programs and events, that extra criteria may apply to some products, and the NDSS Helpline 1800 637 700. Quoted, not paraphrased into a claim.
adea.com.au — that only educators certified by the Australian Diabetes Educators Association are Credentialled Diabetes Educators, that “CDE” is an ADEA registered trademark, and the credentialling requirements (a qualified health professional, a Graduate Certificate in diabetes education and management, at least 1,000 hours of practice, a six-month mentoring program, yearly training). The recognition sentence about Medicare, DVA and private insurers is quoted verbatim and explicitly flagged on the page as recognition, not a rebate amount.

The only business phone number on the page uses the collection’s reserved (08) 9000 0xxx pattern. The real public numbers — healthdirect, NDSS, 000 — are real precisely because a wrong number on a page that tells an unwell reader where to go would be the dishonest choice.

What would change for a real client

Practice management and bookings. A sole allied-health practitioner in Perth is almost certainly on Cliniko, Halaxy, Power Diary, Coreplus or Nookal. The “Ask for a time” button becomes a real booking widget against live availability, and the situation the planner is showing pre-selects the appointment type — so a 75-minute pump start books a 75-minute slot, not a 30-minute one.
Claiming and payments. Medicare Online claiming through the practice software, HICAPS or Tyro for private health at the desk, and Stripe or the practice system’s own link for telehealth prepayment. The fee ladder on the page becomes the same price list the software bills from — one source of truth, so the page can never drift from the invoice.
Telehealth. Coviu is the common Australian allied-health choice; the $60 review becomes a real link in the confirmation email.
Correspondence to the GP. Secure messaging through HealthLink, Argus or Medical Objects, so the “letter within two working days” promise on the page is automated rather than aspirational.
Device data. Read in the room from the manufacturers’ own platforms; the page would say which ones the practitioner can open, because “can you read my sensor” is a real booking objection.
Their reviews, their photos. A live reviews feed replaces the demo quotes, the structured data above goes live with it, and the procedural map becomes a real embedded one — though on this evidence the drawn map is fine and loads instantly.
Verification pass. Before launch, every scheme figure the client wants on the page — rebates, item numbers, NDSS product costs — gets checked at its source with the client, and anything that cannot be verified stays off, exactly as it is here.