Generative Assets · industry demonstration 430
A fictional Welshpool formwork subcontractor, written for one reader: a head contractor’s estimator pricing a job tonight who needs a rate per square metre of formed face before a subbie returns a call. The page’s single job is to hand that number over, show what the repeat levels do to it, and be honest about the four trades it will not price.
Formwork is quoted on a schedule of rates that nobody publishes. An estimator burns a week chasing three subcontractors for a figure they could have read in ten seconds. So this page publishes the schedule, names the practice it is breaking, and puts the arithmetic on the screen: level one builds the deck, every level above it re-uses that deck and bills at 88 per cent of the level-one rate.
The conversion element is the Formed-Face Estimate. Three controls — element, formed face a level, number of levels — and a card that prints the total and the effective rate per square metre side by side at the same size, with all eight level counts priced underneath at the same type size, so the reader sees a model rather than a pitch.
Site concrete, steel band, form-ply tan, and a hi-vis yellow that is licensed on dark grounds only. Every hex and every ratio below is quoted from one row of the wave’s contrast sweep — never from memory — and each token declares the grounds it may sit on. A token drawn on a ground it has not declared is treated as a defect even when it looks fine.
The hi-vis is the only colour on the page anybody would call a brand colour, and it appears exclusively on dark grounds: the sticky call button, the footer headings, the current rung in the level ladder. On paper it measures 1.47:1 and on the steel prop 1.44:1, so the light-ground work is done by the two ochres instead. No colour minted during the build.
Archivo for headings and figures, at a narrowed width for the money. It is a structural, squarish grotesque with a genuine width axis, which is exactly what a rate table wants: font-stretch: 80% lets a six-figure total sit at 36 px inside a 505 px column without shrinking the type. This is the only site in its wave with a sans heading face, and it is the right call for a page whose reader is holding a set of structural drawings.
Inter for body, labels and form fields, with font-variant-numeric: tabular-nums on every figure so the totals do not jitter as the reader drags the level slider. Body is 16.5 px, prose never falls below 12.4 px, and uppercase tracked section labels bottom out at 10.5 px.
Rates are per square metre of formed face, supply and fix. Level one builds the deck; every level above it re-uses it:
total = area × rate × (1 + 0.88 × (levels − 1)) effective = total ÷ (area × levels) soffit $92/m² blade & retaining walls $118/m² columns $135/m² core & lift-shaft walls $148/m²
The services grid’s lowest “from $” and the estimate’s level-one soffit rate are the same $92, which is the collection’s rule for any estimate with a floor. Every figure below was computed by the wave’s arithmetic script before a line of the page was written, and then read back off the running page in a browser:
| Vector | Total | Effective rate |
|---|---|---|
| 650 m² soffit, 1 level | $59,800 | $92.00/m² |
| 650 m² soffit, 4 levels (rest state) | $217,672 | $83.72/m² |
| 650 m² soffit, 8 levels | $428,168 | $82.34/m² |
| 200 m² columns, 2 levels | $50,760 | $127.62/m² |
| 200 m² cores, 4 levels | $107,744 | $134.68/m² |
| 1,800 m² blade walls, 1 level | $212,400 | $118.00/m² |
The seller-costing sentence is the repetition rule itself. The page tells a developer to give one subcontractor all four levels rather than split them, and prints the $8.28/m² it costs them not to — which is the difference between the level-one rate and the four-level effective rate on the same deck.
The page states both in words next to the result: every extra level lowers the effective rate and raises the total. That is a claim, so it is swept rather than assumed. On load the page runs its own sweep over four elements × five areas (100, 200, 650, 1,800, 2,500 m²) × every level step from 2 to 8 — 140 steps — and exposes the result on window.__formwork as monotoneRateFalls, monotoneTotalRises, smallestRateFall and smallestTotalRise. The tightest step in the whole domain is a rate fall of $0.197/m² and a total rise of $8,096, both comfortably positive. The build harness then re-drives the same claim through the live controls: four elements × three areas × eight level counts, 96 cells, each one checked against the model in the probe and in the printed text, and each of the twelve runs checked for monotonicity as it walks 1 → 8.
A third property fell out of the sweep and is now stated on the page too: the effective rate is completely neutral to deck size. A 100 m² pour and a 2,500 m² pour carry the same rate at the same number of levels — only the total moves. That is the sentence on these pages that builds the most trust, because it tells the reader the quote is a model rather than a mood, and it is swept over the same 140 cells rather than asserted.
An inline SVG rebuilt in JavaScript on every change: props, bearers, joists and ply for the soffit; clamped column forms; a shaft box with its void; braced wall panels for the blades. The repeat levels are ghosted above the bay, one band per level, and the box hugs the stack — the viewBox’s top edge moves with the level count, so one level fills the frame and eight levels grow the drawing upward. The ghosts fade as they climb (0.50 down to 0.32) so eight levels read as depth rather than as eight identical stripes.
The bay also gets denser as the deck grows: 4, 6 or 8 props, 5, 8 or 11 ply seams, 9, 14 or 19 joists, three column counts, three wall pairs. It changes the drawing and never the rate, and the page says so directly under the slider.
Motion is wall-clock only. The ghost reveal reads performance.now() deltas from a single start stamp, stops requesting frames the moment it settles, and re-bases its start stamp on visibilitychange rather than accumulating per-frame deltas — a per-frame accumulator has previously shipped a thumbnail of an empty tank in this collection, because headless Chrome only services a frame when one is asked for. Under prefers-reduced-motion the final state is painted in one call and no loop starts at all.
It sits immediately after the result card as its previous element sibling, 12 px below it, inside the estimate section — never in the FAQ. Both facts are asserted, because an assert is what stops a later pass tidying a refusal into a disclaimer. A business that says plainly what it will not price is more believable about what it will.
window.__formwork carries element, rate, area, levels, formed-face total, total, effective rate, the split penalty, the eight-rung ladder and the three swept properties as plain numbers, so both the passes and the checks read state instead of scraping text.pattern="[0-9\s\(\)\+\-]{8,20}", and the checker compiles it with the v flag — the flag browsers actually use — because an unescaped bracket is valid in Node and dead in Chrome, which silently lets junk through.hidden property against a shipped [hidden]{display:none!important} rule.Three forbidden colour pairs were live in the drawn bay and none of them looked wrong: the joist ticks were tieLine on the steel prop fill at 1.56:1, the shaft void was outlined in propEdge on the ply at 5.06:1 (a declared forbidden ground), and the column clamps and wall walers over-ran their ply faces onto paper, where tieLine measures 3.31:1. All three were re-cut to tokens licensed on the ground they actually sit on.
The result card sat at y 910 in the 1200×750 thumbnail frame — outside it. The answer was moved directly under the drawing, which reads better anyway: here is a typical deck priced, now change it. The card now lands at y 479 with the bay at 312 and the ghosts at 263.
The desktop grid was distributing the tall estimate across two rows, leaving 413 px of dead column under the hero. Hero and services were wrapped in one column element and the “How we count formed face” table was added — real estimator content that belongs beside the rates — closing the gap to 2 px.
Drove the enquiry form three ways (empty, junk in the phone field, good data with a tender date) and the estimate through all four elements at three areas across every level count. 104 checks green.
The drawing box now hugs the stack: the viewBox top edge tracks the level count, so a one-level job fills the frame instead of floating in 100 px of white, and an eight-level job grows upward. The ghost opacity ramps 0.50 → 0.32 up the stack for depth.
Added the second read: the bay gets denser as the deck gets bigger — props, ply seams, joists, column counts and wall pairs all step at 300 m² and 1,200 m². Then swept it and found the claim worth printing: deck size moves the drawing and the total, and leaves the rate per square metre untouched. That is now a sentence under the slider and three asserts in the harness (three densities drawn, one rate, three totals).
Added aria-live="polite" on the result so the total and the rate are announced when a control moves. Re-drove all 96 cells plus a pointer-driven pass with real mouse clicks, to prove the controls are hittable and not merely scriptable.
The map labels were rendering at 6.5 px on a 375 phone. SVG type scales with the viewBox, so a 12.5-unit label that is comfortable at 1440 is illegible at 375. Stepped to 13 / 17 / 24 viewBox units across three breakpoints and asserted that every visible label renders at 11 px or better at 375, 768 and 1440.
Measuring the label boxes pairwise then found five collisions at 768 that no eye had caught at desktop — Scarborough over Osborne Park, South Perth over Victoria Park, Perth CBD over Belmont. Labels were repositioned, Belmont was dropped, and the collision test now runs at all three widths and includes the yard marker.
Negative-tested the 375 fold rule rather than trusting its green: grew the sticky bar to 430 px and confirmed the CTA and trust-line asserts both fire, and that the CTA being measured is the hero call button rather than the masthead one. A check that cannot fail is worse than no check.
Walked 56 tab stops with real key presses — every one shows a 3 px solid ring, and the sticky-bar links flip to hi-vis on their dark ground. Asserted that the two breakpoint selectors match something (.map .lbl-opt = 8 nodes, .scene-cap .cap-opt = 1) because an empty NodeList fails silently.
Chanel rule: removed the bordered counter chips from the how-it-works list. Between the chips, the rungs, the tiles and the cards the page had enough boxes; a plain ochre numeral does the same job. Raised the chip sub-labels and rung labels from 11.5 and 11 px to 12.5 px. Ran the form three ways again and the estimate through 96 cells again.
Where a figure belongs to a real standard, a regulator or another trade, this page does not print it, does not paraphrase it, and does not soften the wording. It declines and says so:
Nothing had to be invented for the page to work, because the estimate prices the fictional subcontractor’s own labour and gear. That is the design move: build the proof element out of figures the business genuinely owns, and the honesty costs you nothing.
This demonstration emits only WebPage and CreativeWork schema, both naming it a demonstration. Fictional LocalBusiness or Review markup in a real search index is dishonest markup, so it is not shipped here. For a real client the page would carry this instead, with their own verified details:
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "Deckform Structures",
"description": "Formwork subcontractor: suspended slabs, columns, cores and blade walls.",
"telephone": "(08) 9000 0530",
"address": {
"@type": "PostalAddress",
"streetAddress": "<the client's own, verified>",
"addressLocality": "Welshpool",
"addressRegion": "WA",
"postalCode": "6106",
"addressCountry": "AU"
},
"areaServed": ["Perth", "Joondalup", "Fremantle", "Midland", "Rockingham"],
"openingHours": "Mo-Fr 06:00-16:00",
"aggregateRating": { "@type": "AggregateRating",
"ratingValue": "<from the live reviews feed>", "reviewCount": "<live>" }
}
The rating and the reviews come from the client’s live feed, never from copy typed into the page — that is the whole point of the markup. On this demonstration the review quotes are exactly what they look like: written copy, attributed to a role, and never marked up.
Their logo, their crew photographs where they want them, their referees. Then the plumbing, which is where most of the value sits for a subcontractor of this size:
Three harnesses, 155 asserts, all green, run against the page served on its own port and driven in headless Chrome:
h1 per page, zero console errors at load, at 7 s, at 375, under reduced motion and while the form is being driven.(08) 9000 0xxx phone pattern, the JSON-LD allowlist parsed rather than pattern-matched, a curly-quote-in-attribute scan, and a street-noun scan across both files.