Generative Assets / Fairholme Settlements / Build guide
Fairholme Settlements is a fictional Victoria Park settlement agency — a conveyancing industry demonstration. The page has one job: turn a stressed buyer or seller mid-contract into a fixed-fee quote enquiry, by showing the whole process and the whole price before they've scrolled once.
WA settlements run on the Torrens register, and the register's own artefacts — ruled ledger lines, iron-gall ink, the stamped seal — are calmer than any stock photo of a handshake. So the whole page is set like a certificate of title: generous paper margins, survey-blue rules, and a crimson seal that behaves as a progress mark. The signature element, the Settlement Rail, is a five-milestone ledger line (OFFER · FINANCE · SEARCHES · DUTY · SETTLEMENT) stamped in sequence, wired to scenario chips and a contract-price stepper that drive an itemised fee ledger. Interaction and quote are the same surface — the demo is the pitch.
The accent split follows the collection's ink/line rule: crimson and blue carry marks, rules and buttons; small text always sits in the iron-gall ink or its muted derivative #6A6355.
Fraunces (variable, optical axis high at display sizes) gives headings the gravity of a deed without costume; the milestone verbs along the rail are its display moment — letterspaced Fraunces caps reading as an engraver's small caps. Albert Sans carries body copy, forms and UI: geometric enough to feel current, warm enough not to fight the paper.
Every figure on the page is computed from four pinned anchors and re-verified in QA against an independently reimplemented model. Totals display to the whole dollar; the arithmetic is integer throughout.
| Scenario | Professional fee | Fixed searches | Displayed quote |
|---|---|---|---|
| Buying, $650,000, two buyers (rest state) | $1,090 (flat to $750,000 incl.) | $350 ($65 + $45 + $142 + $49 × 2) | $1,440 + duty & registration at cost |
| Buying, exactly $750,000 | $1,090 — the tier holds at the boundary | $350 | $1,440 + at cost |
| Buying, $780,000 | $1,290 (over $750k) | $350 | $1,640 + at cost |
| Selling, any price, one seller | $990 flat | $114 ($65 + $49) | $1,104 |
| Simultaneous buy ($650k) + sell | $1,900 ($1,090 + $990 − $180 bundle) | $464 ($350 + $114) | $2,364 + at cost |
Measured from the running page: rest state reads $1,440 + duty & registration at cost; the estimator's cheapest outputs equal the services grid floors ($1,090 buying / $990 selling).
The rail is one procedural SVG, built in vanilla JS at load: a double-ruled ledger line, five milestone groups positioned by SVG transform attributes, and each seal's stamp animation on a separate nested group animated only by CSS (position and animation never share an element — a standing collection rule). A stamp is a CSS class flip: scale 1.5 → 1 with a slight rotation on a springy cubic-bezier, staggered down the rail. The current milestone's seal pulses between opacity 1 and 0.62 — a visibility floor, so the signature is alive at any thumbnail capture instant — and stamping SETTLEMENT draws a survey-blue key across the rail.
Dual-speed redraw: the first stamping run is entrance choreography (300 ms per seal); every subsequent scenario change or milestone preview restamps at 80 ms per seal under a 500 ms cap via a firstDraw flag. Race safety: every handler that restamps bumps a token before swapping state and clears the pending timers, so rapid-fire chip and milestone clicks can never leave a stale stamp callback writing over the new scenario — QA drives ten interleaved clicks in a single evaluate, twice, and asserts the settled state against the oracle.
Everything else is CSS and honest HTML: the ruled hero ground is a repeating gradient, the metro map is a hand-placed SVG survey plan (grid pattern, coastline, Swan River, Victoria Park star), and the enquiry form validates front-end only with v-flag-safe pattern attributes and a designed local confirmation. A window.__conveyancing probe exposes scenario, computed figures and a settled flag so QA gates on state, never on seconds.
This demo deliberately ships only WebPage schema — fictional structured data in a real index is dishonest markup. For a real settlement agency we'd ship the schema below (shown here as a code sample, not live), wired to their real NAP, licence number and review feed:
{
"@context": "https://schema.org",
"@type": "LegalService",
"name": "Fairholme Settlements",
"description": "Licensed settlement agents (conveyancers) for WA property
buyers and sellers. Fixed professional fees, searches at cost.",
"telephone": "+61-8-9000-0291",
"url": "https://fairholmesettlements.com.au",
"address": {
"@type": "PostalAddress",
"addressLocality": "Victoria Park",
"addressRegion": "WA",
"postalCode": "6100",
"addressCountry": "AU"
},
"areaServed": "Perth metropolitan area",
"openingHoursSpecification": [{
"@type": "OpeningHoursSpecification",
"dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
"opens": "08:30", "closes": "17:00"
}],
"priceRange": "$$",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.9", "reviewCount": "127"
},
"review": [{
"@type": "Review",
"author": { "@type": "Person", "name": "…from the live review feed…" },
"reviewRating": { "@type": "Rating", "ratingValue": "5" },
"reviewBody": "…"
}]
}LegalService is the precise schema.org subtype search engines resolve for conveyancers and settlement agents; the review block would be fed from their verified Google Business Profile reviews, never authored.
white-space:nowrap to the button primitive and re-checked the wordmark/CTA clearance explicitly (the masthead is always the first thing checked at 375).animationName computes to none, page settles with all figures correct.