Generative Assets · Industry demo 446
How the Frontage Crossover Co. page was built
A lead-generation page for a fictional Bassendean crossover contractor. The audience is a homeowner who has been told — by a builder, or by a letter from the City — that the driveway crossing has to be replaced, and who does not yet know that the council owns that strip, approves the work, sets the width and sometimes pays part of it. The page has one job: tell them what they are allowed to build, roughly what it will cost, and that the application is theirs to lodge.
The single design decision
Everything else follows from one choice: the page refuses the sale in the hero. The rest state of the width check is a 12.0 m frontage asking for a 6.0 m double crossover — the thing the customer came to buy — and the card answers 4.5 m, prints the $864 the rule just took off the quote, and quotes the City of Melville's published sentence for why.
That is the wave's shared move, and the reason it works here is that a crossover is the one piece of concrete on a residential job where the customer is not the decision-maker. A contractor who pours what the customer asked for, on a frontage that cannot carry it, has built an unauthorised structure on land that belongs to the local government. Saying so first is not modesty; it is the only version of the quote that survives contact with the assessor.
Palette
Argued from the trade: the ground is grey-green concrete rather than cream, the blue is the drawing the City asks for, and the orange is the bollard on the verge — a burnt rust used only for the width warning, the refusal outline and the small rule ticks, never as a page-wide flourish. Every ratio below is pasted from contrast-w58.log, not computed by hand.
The log also prints 22 forbidden pairings for this site, and the build obeys them. Two places where it mattered: the service-area map draws its river in survey blue and originally carried the yard label in muted grey across it (1.27:1, forbidden) with the Ashfield dot and label sitting on the water in body ink (1.72:1, forbidden). Pass 1 redrew the river band so that every suburb sits on land, and the one word that does belong on the water — SWAN RIVER — is set in the reversed ink the log licenses at 8.78:1. No colour was minted during the build.
Type
Archivo 600/700 for headings: a spec-sheet grotesque with tight apertures that sets dimensions without looking like a poster. IBM Plex Sans 400/500 for body, chosen for its lining figures and its unfussy behaviour at 13–14 px inside a dense ledger. Tabular numerals are on for the whole document, so a width, an area and a dollar figure all sit on the same column rhythm as the sliders move.
The one typographic moment is the answer row: 4.5 m in survey blue at 54 px against $3,040 in ink at 34 px, on a 2 px ink rule. The width is the larger of the two on purpose — it is the number the council decides and the customer cannot change, and the page wants it read first.
The proof element
Three controls and a toggle: frontage (8–30 m in half-metre steps), the crossover you want (3–6 m in half-metre steps), the finish, an editable verge depth (3–8 m, 4.5 m assumed) and “break out the existing one”. It answers with the approvable width, the area, the estimate and a plan view of the verge strip drawn to scale against the frontage.
The rule, and whose rule it is
The width rule is the City of Melville's, quoted from their own crossovers page and attributed on the card, in the FAQ and in the state probe: the minimum width is three metres, the maximum is six, and a maximum of 4.5 m applies where the frontage is 12.5 m or less. The same page states that all crossover works require the City's approval and that planning and building approvals do not include crossover approval, and asks applicants to allow a minimum of 10 business days. Their published subsidy — a fixed $495, claimable only after construction — is quoted in the hero and the FAQ with the same attribution.
No other council's figures appear anywhere on the page, and the card says in its own footnote that councils differ and that yours is checked in writing before a saw touches the verge. That is a deliberate constraint, not a hedge: publishing a width rule for a council whose page you have not read is the same error as publishing a price you cannot honour.
The arithmetic
Money is held in integer cents and geometry in integer decimetres, so nothing on the page is ever the result of a floating-point width. A 4.5 m crossover on a 4.5 m verge is 45 × 45 = 2,025 dm², and 2,025 × 128 is exactly 259,200 cents. Rounding happens once, at the figure the customer acts on; the ledger above it prints to the cent so it reconciles.
| Frontage | Wanted | Verge | Finish | Break-out | Approved | Area | Subtotal | Charged |
|---|---|---|---|---|---|---|---|---|
| 12.0 m | 6.0 m | 4.5 m | Exposed aggregate | yes | 4.5 m | 20.25 m² | $2,592.00 + $445.50 | $3,040 |
| 18.0 m | 3.0 m | 4.5 m | Plain grey | no | 3.0 m | 13.5 m² | $1,323.00 | $1,450 (minimum) |
| 20.0 m | 6.0 m | 4.5 m | Brick paving | no | 6.0 m | 27 m² | $3,186.00 | $3,190 |
| 18.0 m | 3.0 m | 3.5 m | all three | no | 3.0 m | 10.5 m² | $1,029 / $1,239 / $1,344 | $1,450 for each |
Rates: plain grey $98/m², exposed aggregate $128/m², brick paving $118/m², break-out and cart-away $22/m², job minimum $1,450, total rounded to $10. The last row is the three-way tie — a slab small enough that the job minimum swallows every finish — and the card says so in one sentence instead of printing three identical prices as if the choice were free. It is reachable in 630 of the grid's cells.
What the model was swept for
- Every cell. 1,350 control vectors were driven through the real page at the shipped 4.5 m depth and compared against an oracle written from the rates, not from the page's own function. Zero mismatches, zero non-integer cents, zero cells under the $1,450 services-grid floor.
- Monotonicity. A wider crossover is never cheaper than a narrower one, anywhere on the grid.
- The claim the page makes about its own prices. Plain grey is never the dearest finish, in any cell. That is what licenses the sentence under the estimate that names what the cheaper finish would have cost.
- The minimum's threshold. Exposed aggregate clears the $1,450 minimum at 11.33 m², brick at 12.29 m², plain grey at 14.80 m² — which is why the services grid says “under roughly 11 to 15 m², depending on the finish” rather than picking one number.
- The refusal. It fires on exactly the cells where the wanted width exceeds the cap, and on no others.
The live model is on window.__crossovers — every input, every derived figure in cents, the two unchosen finishes with their deltas, and the rule's attribution — so a harness can assert the page without reading pixels.
The three passes
Pass 1 — Craft
Drove the form empty, junk-filled and correctly filled; drove the width check through the refusal branch, the minimum branch and the widest-legal branch; then looked at a real 1200×750 capture and at native-resolution screenshots at 375, 768 and 1440.
- The drawing was out of the thumbnail entirely. Following the conventional card order — controls, then answer, then picture — put the plan view at y 1089 in a 750 px frame. The card was recut to answer first, refusal second, drawing third, controls last; the drawing now sits at 527–675 and the estimate at 233–268.
- Two forbidden colour pairings on the service-area map. The yard's “our yard” label was muted grey on the survey-blue river (1.27:1) and Ashfield's dot and label sat on the water in body ink (1.72:1). The river was redrawn lower and flatter so all sixteen suburbs are on land; the only word on the water is now in the reversed ink the log licenses.
- SVG labels rendered at ~8.5 px at 375. The 440-unit viewBox scales to 0.74 at phone width, so 11.5-unit type was illegible. All SVG type sizing moved out of presentation attributes and into CSS — the only safe way to have both, since any stylesheet rule silently discards the attribute — with a breakpoint that raises the drawing's type below 1024.
- The refused outline read as two stray dashes, because its top and bottom edges coincided exactly with the boundary and kerb lines. Inset vertically, it now reads as an outline around the slab with the refused width visible as a strip either side.
- Map label collisions (Noranda into Beechboro), a hanging orphan in the refusal heading, chips that wrapped two-and-one at 375, and an FAQ heading that said “five questions” above six of them.
Pass 2 — Depth
Complexified where it costs the business something, on the principle that a claim of honesty converts nothing and a number that visibly costs the seller money does.
- The two finishes you did not pick are now priced in the card, at the same weight as the one you did — each with its own total and the delta, each a button that switches to it. On the rest state that reads “Plain grey concrete · $98/m² — $2,430 — $610 less”, which is the page telling a customer how to spend less with it.
- The three-way tie got its own branch. Where the job minimum swallows all three finishes, printing three identical prices would imply a choice that does not exist; the card collapses to one sentence naming the $1,450 and telling the reader to pick on how it will look in ten years.
- A second read in the drawing. The refused outline's label now names where the metres went: 6.0 m refused · 0.75 m off each side. The refusal is symmetric, and you only notice that on the second look.
- The desktop hero's empty second half became the page's other honest steer — the subsidy is paid to the owner, and lodging is free and has to be done in the owner's name — which was previously buried as a footnote under the proof card.
- The minimum branch's tip is computed, not written: it names the next reachable width, whether that width still sits inside the minimum, and the exact extra slab and extra dollars.
Pass 3 — Hardening
375 px layout, the reduced-motion path, focus order, and a pass whose only job was to re-derive every number that appears in body copy against the shipped model.
- A count of real local governments was withdrawn. The service-area copy said “nine local governments between the river and the hills”. Counting the councils that actually cover the listed suburbs gives six, and the figure is a claim about real authorities, so it was removed rather than corrected — the sentence now says what it needed to say without a number.
- A threshold that was true of one finish was stated as if true of all three. “Below about 15 m² the mobilisation costs more than the concrete” is right for plain grey and wrong for aggregate, which clears the minimum at 11.33 m². Now stated as a band, with the band asserted in the check script.
- The trust strip finished 7 px under the sticky call bar at 375×667. The fold is the viewport minus the bar, so the headline, the primary CTA and the whole trust strip were tightened until each one finishes above it — measured at 594 against a bar top of 598.
- The drawing now re-measures itself when the web fonts land and when the viewport crosses the breakpoint that changes its type scale, because the decision to put the slab's label inside or above it is made by measuring the text, not by a fixed pixel threshold.
- Chanel rule: the proof card's second box-shadow and a dead CSS counter on the how-it-works steps were removed. Both phone patterns were compiled under the
vflag and driven with junk to prove the field actually rejects it, and both files were scanned for curly-quoted attributes.
The harness ends at 180 assertions green across both pages at 375, 768 and 1440, plus 54 in a standalone arithmetic check written from the rate card rather than from the page, plus the 1,350-cell drive through the live UI. A green sweep is not evidence on its own, so eleven defects were planted one at a time — a second h1, a banned LocalBusiness block, a curly-quoted attribute, a real street address, an unreserved phone exchange, a v-invalid phone pattern, the drawing pushed below the thumbnail fold, a wrong rate, a confirmation panel shipped visible, a console error, and the proof card losing its hero column — and every one of the eleven turned the harness red before the file was restored byte-for-byte.
Why this converts
1. The first thing a visitor sees at any width is a number that answers the question they arrived with — how wide can this be, and what will it cost — rather than a photograph of somebody else's driveway and an invitation to enquire. 2. The page hands back money in public: it prints the $864 the council's rule takes off its own quote, names what the cheaper finish would have cost, and discloses the job minimum before the total rather than after, which is what makes the rest of the pricing believable. 3. Every claim about the council is quoted from the council's own page and attributed by name, so the reader can check it in one click and the business never has to be trusted on a fact it does not control. 4. The call path is three deep — a tel: link in the header, a sticky bar on the phone, and a form that asks for five things and confirms in the customer's own suburb and frontage — so the lead is captured wherever the reader happens to be convinced. 5. And the whole thing is one self-contained file with no libraries, no images and no tracking, which is why it is legible on a builder's phone on a verge in Ellenbrook with one bar of signal.
Conversion decisions
Why the proof card sits beside the headline
The lead-gen layout order — masthead, hero, services, proof, why-us, reviews, map, FAQ, form, footer — describes the mobile stack, and the page obeys it exactly at phone width. At 1024 px and above the proof card is lifted into the hero's second column, because the 1200×750 thumbnail is the asset that has to sell this page in a gallery, and a thumbnail showing a headline above a menu of price tiles sells nothing. The placement is written at id specificity so a descendant rule on the same property cannot quietly win it back.
Why the form asks for five things
Name, phone, suburb, frontage and what is there now. The suburb is required because it decides which council's rule applies and therefore what can be said on the phone; the frontage is optional because half of callers have not measured it and a required field they cannot answer is a lost lead; “what is there now” is a select rather than free text because it decides which saw goes on the truck. Nothing asks for an email address, because this trade rings back.
Why the refusal is next to the number and not in the FAQ
A refusal in an FAQ is a disclaimer. A refusal 40 px under the estimate, at full size, with its own call-to-action, is a demonstration of how the business quotes — and it is the only part of the card that a competitor's page will not have. The card's refusal branch always ends in something the reader can do today: the widest legal width is still offered, with a button to book the mark-out.
What the page deliberately does not say
- No subsidy amount, application fee, width rule or timeframe for any council other than the City of Melville, whose figures were read at source and are attributed on the page.
- No suggestion that the business can lodge, obtain or speed up an approval. It cannot, and the FAQ says so plainly.
- No count of local governments, no approval success rate, no “we handle the council for you”.
Local SEO we would ship for the real business
This page carries only WebPage schema naming itself a demonstration, because publishing LocalBusiness and Review markup for a business that does not exist would put fictional data into a real index. For a real client the structured data below is what would go on the page, with their ABN-verified details and reviews pulled from their Google Business Profile rather than typed by hand.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "GeneralContractor",
"@id": "https://example.com.au/#business",
"name": "Frontage Crossover Co.",
"description": "Driveway crossover construction, break-out and verge reinstatement across Perth's northern and eastern suburbs.",
"url": "https://example.com.au/",
"telephone": "+61 8 XXXX XXXX",
"image": "https://example.com.au/img/crew-bassendean.jpg",
"address": {
"@type": "PostalAddress",
"streetAddress": "their real street address",
"addressLocality": "Bassendean",
"addressRegion": "WA",
"postalCode": "6054",
"addressCountry": "AU"
},
"geo": { "@type": "GeoCoordinates", "latitude": -31.90, "longitude": 115.94 },
"openingHoursSpecification": [
{ "@type": "OpeningHoursSpecification",
"dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
"opens": "06:30", "closes": "16:30" },
{ "@type": "OpeningHoursSpecification",
"dayOfWeek": "Saturday", "opens": "07:00", "closes": "12:00" }
],
"areaServed": [
{ "@type": "City", "name": "Bassendean" },
{ "@type": "City", "name": "Bayswater" },
{ "@type": "City", "name": "Midland" },
{ "@type": "City", "name": "Ellenbrook" }
],
"hasOfferCatalog": {
"@type": "OfferCatalog",
"name": "Crossover services",
"itemListElement": [
{ "@type": "Offer",
"itemOffered": { "@type": "Service", "name": "New driveway crossover" },
"priceSpecification": {
"@type": "PriceSpecification",
"priceCurrency": "AUD", "minPrice": 1450 } },
{ "@type": "Offer",
"itemOffered": { "@type": "Service", "name": "Break out and cart away" },
"priceSpecification": {
"@type": "UnitPriceSpecification",
"priceCurrency": "AUD", "price": 22,
"unitCode": "MTK" } }
]
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8", "reviewCount": "63"
}
}
</script>
Beside the markup, the work that actually moves a crossover contractor in local search: a Google Business Profile with the primary category set to the concrete or paving contractor category rather than “construction company”; one page per council area, each answering that council's own rules and linking to that council's crossover page; the reviews feed rendered server-side so the Review nodes are real; and the enquiry form posting into the job-management system rather than an inbox, so that response time — the one ranking-adjacent thing this trade reliably loses on — is measured.
What would change for a real client
- Job management. The form would post into whatever the crew already lives in — ServiceM8 is the common choice for a two-to-six-truck concreting outfit, with Tradify, Fergus, simPRO and AroFlo the usual alternatives as the crew grows — creating the job, attaching the width check's inputs and outputs as a note, and setting a callback task with the same-working-day promise the page makes.
- Quoting and invoicing. The estimate becomes a real quote through the job system into Xero or MYOB, so the figure on the page and the figure on the invoice come from the same rate card instead of two spreadsheets.
- Measuring the frontage. Before a site visit the office measures off Nearmap or Landgate imagery. Feeding those measurements into the check means a caller can be told a width on the first phone call, which is the entire conversion argument of this page.
- The council layer. Each council's specification, subsidy and lodgement portal differs, and several WA councils lodge through Infor's ePathway. The real build would carry a small per-council table — rule, timeframe, subsidy, form link, all sourced and dated — and the width check would take the council as an input instead of assuming one. That is the single biggest upgrade from this demo, and it is a content problem, not a code one.
- Photography. Every visual here is drawn in SVG and CSS, which is the collection's constraint. A real client's page would keep the plan view — it does a job no photograph can — and replace the illustrative texture with their own finished crossovers, shot from the road.
- Reviews. The three on this page are demo copy and are deliberately not marked up. A real build pulls the Google Business Profile feed and marks up what is actually there.
Where this build disagreed with its brief
A superlative that the arithmetic does not support
The concept described the 20.0 m frontage / 6.0 m brick-paving cell, at $3,190, as “the widest legal answer on the page”. The price is exactly right and is shipped unchanged. The description is not: exposed aggregate is $128/m² against brick's $118, so the dearest legal 6.0 m answer at the default verge depth is $3,460 in aggregate, and the dearest cell overall is $4,050 — 6.0 m of aggregate with a break-out. Both were found by sweeping for the extremum rather than reading it off a chosen cell. The page therefore makes no superlative claim about money anywhere; 6.0 m is described as the widest width the rule allows, which is a fact about the rule and is true.
A verified figure the brief did not include
The City of Melville publishes its crossover subsidy as a fixed $495, payable only after construction and only where it is the first crossover to the land or an upgrade from bitumen. That was read at source during the build and is quoted with attribution, because the brief's requirement is that a council figure be verified and attributed — not that it appear in the brief first. Everything else about subsidies on the page is a mechanism with no dollar figure attached.