Build guide · Generative Assets
Redgum Retreat is a fictional Wanneroo boarding kennels & cattery, built as a pet-boarding industry demonstration. The page has one job: a stay booking with the pets, nights and add-ons already priced — the Stay Planner does the pricing, the form does the asking, and nothing on the page argues with anything else.
The audience is a family booking the dog in before a Bali flight, a FIFO worker covering a fortnight every swing, and a cat owner who wants a condo with a window, not a housesitter's promise. The art direction is the shaded run at midday: shade-cloth cream, bark ink, meadow-green CTAs and straw linework — the page should feel like a tail thumping on cool concrete. Every visual is drawn SVG; there isn't a photo on the page, which is the collection's signature move.
Spec contrast figures are hypotheses (W32/W33); these are the WCAG ratios measured from the shipped tokens in Pass 1:
The W33 two-token pair the spec pre-minted for the meadow green was kept exactly as pinned: the raw accent measured 4.94:1 with white — technically passing — but buttons ship on the deeper #33663F fill anyway (6.75:1), and every green-coloured sentence uses #2C5B38 (7.03:1). Straw stays a line-only token; wherever straw needed to become words (the stamp, tick numerals, the OFFICE sign) it swapped to straw-ink.
Baloo 2 (600/700) for display — round terminals, no sharp corners, a typeface that wags. It carries the stay line ("SEVEN NIGHTS UNDER THE SHADE SAIL"), the prices and every heading. Asap does the body work: a grounded, slightly narrow workhorse that stays legible at 16.5px on a phone in one hand, which is where most boarding bookings happen. The typographic bravery moment is the stay line itself — it re-sets in words, not digits, every time the stepper moves.
The signature is one drawn SVG scene — shade sail, kennel run with a water bowl, a redgum behind the straw fence, a cat condo tower, an office sill — with a 14-slot calendar rail beneath and the price badge painted on the kennel's name plate. Pet chips swap the drawn resident (choosing the cat dims the run to 0.58 opacity and halos the condo tower); the second-pet toggle draws a same-type companion; add-on toggles draw their props (a coiled lead on the gate hook, a towel and brush by the gate, a pill jar on the office sill); the peak toggle sun-flares the sky and stamps SCHOOL HOLIDAYS above the rail.
Implementation notes, in the order they mattered:
pathLength="1" and a rAF loop whose delta is clamped at zero and capped at 50 ms (W29); each tick stays visibility:hidden until its drawn length is > 0 so round caps never leave a rest-state dot (W15).<g transform> attributes; the tail-wag, ear-flick and tail-curl animations live on separate nested groups animated purely in CSS — no element is CSS-animated on a property it also sets as a presentation attribute.window.__petboarding publishes the full control vector, computed lines and a settled flag; QA gates on state, never on seconds.Total = billed nights × (sum of nightly lines) + flat lines, whole dollars throughout. One clamp semantic (W23): with peak on, billed nights = max(nights, 3) and every per-night line — boarding, sharing, loading, walks, medication — bills at the billed-nights figure; the rail draws the stayed nights as green ticks and the billed minimum as straw ticks. At exactly 3 peak nights the boundary is silent (no note); at 1–2 the ledger notes "billed at the 3-night school-holiday minimum". Walks and grooms are disabled for cats with their reasons printed on the control ("cats decline, historically" / "short-stay cats groom themselves — long-stay brush-outs are quoted at the desk") rather than silently no-oping (W18). Medication is one $4/night line per booking — the card says pet count doesn't change it. Long stays (15+) are a designed price-less line: quoted, never numbered.
| Anchor | Small dog | Large dog | Cat (condo) |
|---|---|---|---|
| Boarding, per night | $52 | $58 | $38 |
| Second pet (same home), per night | $39 | $44 | $29 |
| Peak loading, per pet per night | +$8 | +$8 | +$8 |
| Solo bush walks, per dog per night | +$9 | +$9 | disabled, with reason |
| Exit groom, flat per dog | $45 | $60 | disabled, with reason |
| Medication, per night per booking | +$4 | +$4 | +$4 |
All eleven spec worked examples — including both peak-clamp cells ($138 with note at 2 nights, $138 silent at 3), the walks × second-dog intersection ($763 with the walks line at $126), the peak × second-pet intersection ($590 with the loading line at $80) and the groom ×2 re-price ($834 with the groom line at $120) — were verified against an independently reimplemented oracle in the QA harness; zero corrections to the spec's figures were needed. The measured rest state is $406 (large dog, 7 nights, off-peak).
The demo page itself carries only WebPage/BreadcrumbList schema naming it a demonstration — fictional structured data in a real index is dishonest markup. For a real kennel we'd ship the block below. Note: schema.org has no boarding-kennel subtype — there's no PetBoarding or kennel type in the vocabulary — so the honest ship is top-level LocalBusiness with a precise description and amenityFeature, not a borrowed subtype that means something else.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "Redgum Retreat Boarding Kennels & Cattery",
"description": "Boarding kennels and cattery on acreage in Wanneroo:
shaded individual dog runs, three-level cat condos, solo bush
walks and exit grooms. C5/F3 vaccination required.",
"telephone": "+61-8-XXXX-XXXX",
"address": {
"@type": "PostalAddress",
"addressLocality": "Wanneroo",
"addressRegion": "WA",
"postalCode": "6065",
"addressCountry": "AU"
},
"geo": { "@type": "GeoCoordinates", "latitude": -31.75, "longitude": 115.80 },
"openingHoursSpecification": [{
"@type": "OpeningHoursSpecification",
"dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],
"opens": "08:00", "closes": "11:00"
},{
"@type": "OpeningHoursSpecification",
"dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],
"opens": "15:00", "closes": "17:30"
}],
"amenityFeature": [
{ "@type": "LocationFeatureSpecification", "name": "Shaded outdoor dog runs", "value": true },
{ "@type": "LocationFeatureSpecification", "name": "Separate cattery wing", "value": true },
{ "@type": "LocationFeatureSpecification", "name": "Vet on call 24/7", "value": true }
],
"priceRange": "$$",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.9",
"reviewCount": "180"
}
}
</script>Plus: a Google Business Profile with the runs photographed at midday (shade is the buying objection), review prompts timed to pickup day, and suburb-level service pages only if the real booking data supports them.
Pass 1 — Craft. Measured every spec contrast hypothesis with WCAG arithmetic: all seven token pairs cleared 4.5:1 in their text roles (figures in the palette section above); the pre-minted meadow-green pair shipped as pinned, and everywhere straw wanted to become words (tick numerals, the rail stamp, the OFFICE and CONDO TOWER signs) it swapped to straw-ink. Removed a dead entrance-sequence array and a redundant dasharray write from the first draft. The first fold check at 1200×750 measured the price badge at 755px — five pixels under the fold — so the hero's vertical rhythm tightened (18/14/10px margins) and then restructured into a two-column band at ≥960px, landing the badge at 721px with the whole scene top in frame.
Pass 2 — Depth. Added the second-read details: a magpie that lands on the fence every eleven seconds (reduced-motion never sees it), and straw ticks that draw the billed-but-not-stayed nights of a clamped peak booking — the clamp explains itself on the rail, not just in the ledger note. Gave the stay line its cat variant ("UP THE CONDO TOWER") so the display moment tracks the scene focus. Screenshot review of the drawn scene found the shade sail's guy-ropes drooping into mid-air — replaced with two planted poles, positioned so neither crosses the gate, the posts, the bowl or the kennel roof — and gave both dogs their second ear so the prick ear stopped reading as a horn.
Pass 3 — Hardening. Drove all eleven worked examples plus the rapid-fire nine-click sequence against the independent oracle — 107 asserts green, zero console errors. The cat-focus screenshot caught the pass's real find: the price badge lived inside the dimmed run group, so choosing the cat washed the price to 58% opacity — the plate now draws outside the focus group and never dims. Native-resolution 375px review, masthead first: the wordmark's right edge clears the call chip by 63px and the badge ships its tight variant (subtitle collapses to "7 nights", price bumps to 32px). Label-collision sweep over the rail at 2× device scale with peak on: stamp, straw ticks and numerals all clear. Reduced-motion renders the settled scene, seven ticks visible, no animation. Chanel rule: removed the tuft cluster crowding the office.