Generative Assets · industry demonstration 413

A support coordination page that refuses to name a price.

Wayfound Support Coordination is a fictional two-person practice in Midland, covering Perth’s east and north-east. Its audience is a participant — more often a parent or a partner — holding a plan they have just been handed, tired and wary of being sold to. The page has one job: get a first meeting booked, having already answered “what do you actually do” and “what does this cost me” honestly.

The second of those questions is why this build is unusual. Support coordination is paid out of a budget already inside the participant’s plan, at a price limit set by a real scheme we cannot verify from here. So the page publishes no rate at all — the proof element counts hours, and every hour it uses is a number the reader copies off their own plan.

The proof element

The plan-hours planner: hours in, fortnights out.

Two numbers the reader can find in about ten seconds — Support Coordination hours funded, and months left until the plan review — plus an optional third for hours already used. The output is a sentence first and figures second, because the person reading it is not in the mood for a dashboard.

Worked examples from the planner
Funded	Used	Months	Hours a fortnight	Reads as
30	0	9	1.53	about 1.5 hours a fortnight — the rest state
60	0	12	2.30	about 2.5 hours a fortnight
20	0	6	1.53	about 1.5 hours a fortnight
40	0	3	6.14	about 6 hours a fortnight — a plan-start burst
30	11	6	1.46	19 hours left, about 1.5 a fortnight

The arithmetic is one line: a month is 4.345 weeks, a fortnight is two of them, so hours a fortnight is hours ÷ ((months × 4.345) ÷ 2). Every figure in that table was reimplemented in a separate oracle in the verification harness and asserted against the running page, and the same five rows are pinned in the wave’s own check-w51.mjs. The words line rounds to the nearest half hour (round(h × 2) ÷ 2) because “about 1.5 hours” is what a person can hold in their head; the exact 1.53 sits below it for anyone who wants it.

The drawn subject is a fortnight strip: one bar per fortnight left in the plan, all the same height, because a funded allocation genuinely is flat until someone spends it. The vertical axis tops out at max(2, ceil(hours per fortnight + 0.5)) — a deterministic rule, so the frame always fits the state and there is always visible headroom above the bars. The bar count is round(months × 4.345 ÷ 2), which is 20 at the rest state, and the harness asserts the drawn bar count equals that number at every driven scenario.

The second read is the shaded band over the first two bars, labelled FIRST MONTH. It is an annotation, not data: the bars underneath it are exactly the same height as every other bar. It exists because the honest thing to say about a new plan is that the first month takes 4–6 hours — more than an even spread — and a flat strip that never admitted that would be a prettier lie.

The hardest constraint on this page

Why the planner counts hours and never dollars.

Support coordination is funded from a real Australian scheme with a published, periodically revised set of price limits. A demonstration page cannot verify those limits, and this collection’s standing rule is blunt about what follows: a figure about a real standard, scheme, regulator or price guide that cannot be verified does not get published, and does not get softened either. You decline, and you say that you declined.

So the fee is stated as a mechanism, with no number in it: our time is billed to the Support Coordination budget already in your plan, at the NDIS price limit for the item — you have no out-of-pocket cost. Every word of that is true regardless of what the limit is this year, which is exactly why it is the sentence worth writing. The page carries it three times: under the services grid where a price would normally sit, inside the planner card, and in the pricing FAQ.

The planner then does the only honest quantitative thing left, which turns out to be the more useful thing anyway. It takes the hours the reader copies off their own plan and tells them what that means week to week. A parent holding a new plan does not actually want a rate card; they want to know whether the coordination in this plan is enough to get anything started. Hours answer that. A rate would not.

What this page declined to publish

Each of these was considered during the build, and each was left out because it could not be verified against the current NDIS Pricing Arrangements and Price Limits from inside this build:

Any hourly price limit for support coordination, specialist support coordination or any related item — including a range, an “up to”, or a “typically around”.
Any regional, remote or very remote loading on that limit, and any claim about whether Perth’s outer east attracts one.
Any line-item number or support-category code — the page contains no nn_nnn_nnnn_n_n string anywhere, and the harness asserts that.
Any dollar total derived from hours × a rate. The planner deliberately has no multiplication step; the page renders no dollar sign at all, on either page, and both harnesses assert it.
Any plan-management rule — who may claim what, whether a participant can hold coordination and plan management at once, what a plan manager is permitted to pay. The FAQ describes what each role does, which is observable, and stops there.
Any registration or provider-registration requirement, including whether a coordinator must be registered to work with a given plan type. The self-managed FAQ says only that how a plan is managed changes who receives our invoice.
Any scheme threshold — plan durations, review timing rules, eligibility tests, funding-category boundaries.
Any claim about what happens if the funding is not in the plan beyond Wayfound’s own conduct: we will say so at the first meeting, and we won’t bill you for finding out.

The two real numbers the page does publish are 000 and Lifeline’s 13 11 14, in the “if it is urgent” card beside the form. Those are correct public-safety lines, and printing a fictional number in their place would have been the dishonest choice. The colophon names them as real, alongside the suburbs, and names everything else on the page as demonstration copy.

Palette

Warm and human, deliberately not clinical blue.

Disability-services sites default to a medical palette — cool blue, white, a teal accent — and they read like a waiting room. This one is warm paper and plum: a colour with some dignity in it, used as a fill and a figure rather than a wash. Green appears exactly once, on the availability line, so that when it appears it means something. Every ratio below is measured, quoted from the same row of the wave’s contrast sweep as the hex beside it.

#FBF7F3

PaperThe page ground. Warm, not white, not cream-and-terracotta.

#F0E8E0

PanelAlternating sections and the planner card. Ink measures 13.98:1 on it.

#221A22

Ink15.9:1 on paper, 13.98:1 on panel, 14.29:1 on the map wash. Forbidden on band, plum and green (1.08 / 2.04 / 2.43).

#5A4A56

Muted7.73:1 on paper, 6.8:1 on panel, 6.94:1 on the map wash. Body copy at 18px, never smaller than 13px in running text.

#6A3D74

PlumCTA fills, the fortnight bars, marks. 7.78:1 as ink on paper, 6.84:1 on panel; paper reversed on it is 7.78:1.

#2C6350

Green6.55:1 on paper. The availability line and nothing else on the page.

#2B1F2D

BandThe Sapience band. Paper reversed on it measures 14.74:1.

#847182

FieldInput borders, steppers, the river and the scarp. 4.22:1 on paper — a mark token, never body text.

#D5C6BA

Hairline1.56:1 on paper, 1.37:1 on panel. Rules and card edges only.

Two grounds are derived rather than pinned, so both were measured before anything was drawn on them. The service-area map region is a 7% plum wash over paper (#F1EAEA): suburb labels in ink measure 14.29:1 on it, the “the hills” and river labels in muted measure 6.94:1, and the river and scarp strokes in field measure 3.79:1 — above the 3:1 a mark needs. The planner’s first-month band is a 16% plum wash (#E4D9DF); it carries no text, and the plum FIRST MONTH label sits above it on paper at 7.78:1. One token was minted for this build: the form’s error red #8A2233, 8.36:1 on paper and 7.35:1 on panel, because the palette had nothing that could carry a validation message.

Type

Bricolage Grotesque and Source Sans 3, set at 18px.

Bricolage Grotesque carries the headings. It has warmth in the shapes without tipping into the friendly-rounded register that reads as talking down to people — which matters enormously for this audience, who get patronised professionally. Source Sans 3 does the body work: unremarkable in the best way, generous x-height, unambiguous numerals for the planner.

Body copy is 18px at 375px, not the collection’s usual 17, and stays 18 all the way up. Line length is capped at 62 characters. Neither is decoration: a fair share of this audience is reading tired, one-handed, at 11pm, and some of them are reading with low vision. The smallest running text is 13px, on the strip’s explanatory note, in muted at 7.73:1 rather than a grey; the smallest type anywhere is the 10px FIRST MONTH annotation drawn on the chart, in plum at 7.78:1. Both SVG drawings are laid out in real CSS pixels rather than a fixed viewBox, so those sizes hold at 375 instead of shrinking to five.

One typographic move: the result sentence is set in the display face at 19px with the rounded figure in plum inside it, so the answer reads as a sentence a person said rather than a number a machine produced. The exact figure sits under it in the display face, tabular — 21px on a phone, 24px above 520px — so anyone who wants the arithmetic can have it without it being the first thing they meet. That ordering — words first, figures second — is the whole tone of the page in miniature.

Conversion

What is where, and why.

The planner sits beside the headline

The concept’s layout order puts the proof element after the services grid. At 1200×750 — the thumbnail viewport, and roughly a laptop fold — a hero plus a services grid plus a section heading spends the entire 750px before the drawing appears. Rather than shrink the hero, the planner became the hero’s right column, so the strip’s bounding box lands at y 413–485 and the result sentence at 653. The services grid follows immediately and everything after it is in spec order. This is a deliberate, reported deviation, not a slip.

The phone leads, the form follows — just

Unusually for a professional service, both CTAs are equal weight in the hero: a filled “Book a first meeting” anchor and an outlined tel: button. People in this situation split cleanly — some will not ring a stranger about their child, some will not fill in another form ever again — and forcing either group down the other path loses them. The masthead carries the number at every width; the mobile sticky bar carries a real tel: link and an in-page anchor to the form.

Seven fields, two of them optional

Name, phone, suburb and “this is for” are required; email, plan stage and the message are not. Suburb is required because it is the only field that tells the coordinator whether this is a drive or a video call. “This is for” is required because a parent, a partner and a hospital discharge team need three different first calls. Nothing asks for a diagnosis, a plan number or a date of birth — a first enquiry has no business collecting any of that.

The trust strip is three facts, not five logos

Two coordinators working since 2019; we come to you, named suburbs; funded from your plan, not your pocket. Each answers a specific fear — will I get a person, will I have to travel, will I get a bill. The availability line above it is the only green on the page, so “taking new participants this month” reads as a live fact rather than a decoration.

Why this converts

For the operator deciding whether to hire us, rather than for a designer.

The call and the form are both above the fold at 375px — headline, two CTAs and the availability line all land inside 605px on a phone, so the two kinds of person who arrive here never have to scroll to act.
The form asks for the four things a coordinator actually needs to ring you back and marks the rest optional, which is the single cheapest lever on completion rate for an audience that is tired and suspicious of forms.
The proof element answers the question the visitor came with — is what is in my plan enough — using numbers they supply, so it builds trust instead of harvesting a lead, and it puts a drawn, specific thing in the thumbnail that no stock photo could carry.
The trust strip and the fee sentence pre-empt the two objections that kill this enquiry: will I get a real person, and what will this cost me. Both are answered before the visitor reaches the form, in plain words, without a price we would have had to invent.
Refusing to publish an unverifiable rate is itself the sales argument — a page that says clearly what it does not know is the page a wary parent believes, and it is exactly how we would build the real one.

Accessibility

Real, not decorative.

This is the one demonstration in the collection where the accessibility work is the subject matter, so none of it was left to a linter.

Targets and type

Every interactive element is at least 44px in both directions and most are 50–52px: the masthead phone chip, both hero CTAs, both sticky-bar links, all six planner steppers, every form control and every FAQ summary. Body copy is 18px everywhere.

The drawing has words

The fortnight strip is role="img" with a live text description that names the same two figures it draws, and the result panel is a polite live region, so pressing a stepper announces the new sentence. The map has the same treatment, and the suburb chips under it carry the full list of places in text at every width.

Keyboard and focus

A skip link, one <h1>, headings in order, a 3px plum :focus-visible ring on every control, and native <details> for the FAQ so it works before any script runs. Validation errors set aria-invalid and aria-describedby, and the first invalid field takes focus on a failed submit.

Nothing on the page animates except one entrance: the fortnight bars rise once, on cold load, over 360ms with a 16ms stagger, driven from performance.now() against a start stamp rather than a per-frame delta — a frame-counted animation renders about 2.5 seconds of motion inside a 7-second headless capture and would have photographed an empty chart. It pauses on document.hidden, never replays on a redraw or a resize, and prefers-reduced-motion skips it entirely and draws the settled frame.

Iteration log

Three passes, each one driving the page.

Pass 1 — Craft

Seven real defects, six of them invisible to every state assert and found only by looking at native-resolution screenshots at 375, 560 and 1200.

The 375px masthead overflowed under the phone chip. The wordmark’s subtitle is nowrap, so the flex item measured clean — right edge 187px against the chip’s left edge at 199px — while the text itself ran straight through the chip. Split into a long and a short form, swapped at 520px.
The service-area map was the worst thing on the page. Geographic coordinates mapped straight onto viewport pixels, so at 375 Bullsbrook was clipped off the top, Mundaring off the right, and Mundaring’s label sat on top of Midland’s. Rebuilt: an inset layout box with label gutters, a per-label side-flip when a name would run past the frame, three label tiers (five named under 420px, nine under 640, all sixteen above) with every place dotted at every width, a capped inner width so the region stops stretching into a flat ellipse, and a clip path so the river and the escarpment stop at the region boundary instead of running out into the margin.
The first-month shading ran the full plot height and read as a missing bar. Rebuilt to hug the bars, with a plum top rule and a label wherever there is room for one.
The strip caption collided with itself at 375. “Hours laid across the plan” wrapped and swallowed the fortnight count. Shortened, and the left label is dropped below 431px.
The three result figures wrapped 2 + 1 in a flex row. Made a three-column grid with a smaller type step below 520px, and “fortnights in the plan” became “fortnights left” so it stops wrapping in a 103px column.
Services cards had ragged hour anchors — the anchor sat under copy of varying length. Each card is a flex column with the anchor pushed to the foot.
Form label rows misaligned wherever an “optional” hint wrapped to its own line. Hints are inline inside the form card, block in the planner where they are full sentences.
Two composition fixes: the footer divider now spans the column rather than the paragraph’s 78ch, and the hero’s left column gained the trust strip because it finished 200px above the planner card at 1200.

Pass 2 — Depth

Everything added here is an accessibility decision that also happens to be a conversion one, which is the right kind of depth for this audience.

Steppers on all three planner fields — ±5 hours, ±1 month, ±1 used hour — at 50×52px with real aria-labels, each disabling at its own clamp. Native number spinners are about 13px tall and unusable one-handed. Driven in the harness: +5 moves funded hours 30 → 35 and the figures recompute against the independent oracle; three presses of −1 take months 9 → 6 and the drawn bar count follows to 13; twelve more clamp at one month with the button correctly disabled.
The result is a polite live region, so a stepper press announces the new sentence rather than silently redrawing a chart.
Text mirrors for both drawings, moved off the hidden attribute onto a clip-rect class, because some assistive technology skips hidden content entirely. The strip’s mirror names the same two figures the drawing shows and the harness asserts they agree.
The planner keeps one field per row at every width. In a two-column card the inputs collapse to about 70px between two steppers; one per row keeps them readable and the targets large.
The FIRST MONTH annotation became the second read — the one thing on the drawing that says the flat strip is not the whole truth.
One measured correction: the ghost button on the dark band had a #6d5c6f border measuring 2.55:1 against it, under the 3:1 a UI boundary needs. Re-minted #7E6B80, 3.22:1.

Pass 3 — Hardening

112 assertions in a headless harness with an independently reimplemented oracle, plus a screenshot read at every breakpoint.

The form driven three ways. Empty submit: no confirmation panel, four visible error messages and four aria-invalid fields. Bad values (a three-digit phone, rae@ as an email): still blocked, phone and email errors shown, the valid name field clean. Filled correctly: the panel appears, the form hides, the copy greets by first name and says plainly that nothing was sent. Then the reset link, which clears the fields and brings the form back.
Rapid-fire drive — six control changes dispatched in a single evaluate with no settle between them, twice over — to catch a stale closure holding an old bar array. Zero console errors, coherent final state.
Thumbnail contract. At 7 seconds at 1200×750 the probe reads settled, and re-reading every numeric field 8 seconds later returns an identical object. The strip’s drawn bars measure y 413–485 and the result sentence ends at 653 — the drawn subject, not its container and not a badge, inside the top 750px.
Honesty asserts that run on every pass: no dollar sign in the rendered text of either page; no rate claim; no line-item code shape; every (08) 9xxx xxxx string on the 9000 exchange; live JSON-LD types restricted to WebPage, WebSite and CreativeWork; the colophon present on both pages; a curly-quote-in-attribute scan over both files.
Reduced motion renders the settled frame with every bar at full height, probe settled, zero console errors.
375px floor: scrollWidth exactly 375, zero overflow offenders outside scrolling ancestors, the sticky bar owning a real tel: link and a live in-page anchor with 50px targets, and both SVGs rendering their labels at their authored 11 and 12.5px because both are laid out in real CSS pixels rather than a fixed viewBox.
One ornament removed (the Chanel rule): the strip caption’s “Hours per fortnight” label. The chart’s own gutter already prints “3 h” and “1 h” against its gridlines, and the figure below it is captioned “hours a fortnight”. Three statements of one fact is two too many.

Local SEO

What we’d ship for the real practice — and why none of it is live here.

Wayfound is fictional, so this page emits no business-shaped structured data at all. Its live JSON-LD is restricted to WebPage, WebSite and CreativeWork, and the WebPage node names the page a demonstration. Putting a fictional provider into a real index is dishonest markup, and an aggregate rating is the worst offender because it is the one search engines actually render.

For a real practice this is the block that would go live, with their verified details, their Google Business Profile URL, and reviews pulled from wherever they genuinely live. Two notes on the type choice. LocalBusiness is right and MedicalBusiness is not — support coordination is not clinical care, and claiming a medical subtype invites health-content scrutiny a coordinator neither wants nor deserves. And there is no priceRange property in the block, deliberately: for this service there is nothing honest to put in it.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "@id": "https://example-coordination.com.au/#practice",
  "name": "Example Support Coordination",
  "description": "NDIS support coordination across Perth's eastern and
                  north-eastern suburbs.",
  "url": "https://example-coordination.com.au/",
  "telephone": "+61 8 XXXX XXXX",
  "image": "https://example-coordination.com.au/img/team.jpg",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Suite X, XX Example Street",
    "addressLocality": "Midland",
    "addressRegion": "WA",
    "postalCode": "6056",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.888, "longitude": 116.010 },
  "areaServed": [
    { "@type": "City", "name": "Midland" },
    { "@type": "City", "name": "Ellenbrook" },
    { "@type": "City", "name": "Guildford" },
    { "@type": "City", "name": "Mundaring" },
    { "@type": "City", "name": "Bassendean" }
  ],
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday"],
      "opens": "08:30", "closes": "16:30" },
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": "Friday", "opens": "08:30", "closes": "14:00" }
  ],
  "sameAs": [
    "https://www.google.com/maps/place/?q=place_id:XXXXXXXX",
    "https://www.facebook.com/examplecoordination"
  ],
  "review": [
    { "@type": "Review",
      "author": { "@type": "Person", "name": "A real reviewer, with consent" },
      "reviewRating": { "@type": "Rating", "ratingValue": "5" },
      "reviewBody": "Their words, not ours." }
  ],
  "aggregateRating": {
    "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "31"
  }
}
</script>

Alongside it: a Google Business Profile in the Disability services organization category with the service area drawn to the same suburbs as the map on this page; suburb-level landing pages only where the practice can write something genuinely different about each one, never a template with the place name swapped; and an FAQPage block over the five questions already on the page, which are the five actually asked at a first meeting and therefore the five worth ranking for.

For the real client

What would change on day one.

Their systems, not ours

The enquiry form would post into whatever the practice already runs its work in — SupportAbility, Brevity, Lumary, ShiftCare or Careview are the ones we see most in WA — creating a lead with the suburb and the “this is for” answer already set, so the first call starts from something rather than nothing. Notes and time records stay where they already live; we do not ask a practice to move its file.

Their people and their words

Photographs of the actual coordinators — on a page like this a face does more work than any illustration — and reviews pulled from the practice’s Google profile rather than written for them. The demonstration reviews here are clearly labelled as demo copy for exactly that reason.

Booking, and the fee sentence

A real first-meeting booking flow against the coordinators’ own calendars, with home visits and video as separate lengths. And the fee sentence would be reviewed against the current published price arrangements by someone at the practice who can verify it — which is precisely the step this build could not take, and said so.

The accessibility floor, raised

An Easy Read version of the “what we do” section as a separate page, a stated route to an interpreter or an Auslan-interpreted first meeting, and a plain-text summary of the plan-hours planner emailable to the participant. All three are ordinary requests in this sector and almost no provider site offers them.