How the Formset Concrete demonstration was made

01Concept

Formset Concrete is a fictional driveway, alfresco and shed-slab concreter based in Baldivis, serving Perth's southern corridor. The audience is a new-build owner staging their own driveway or comparing three per-metre quotes against finishes they can't picture; the page's single job is to turn "what would exposed aggregate cost me?" into a booked site measure. It is the one dark site of Wave 18 — a 5:30am pour under halogens, deliberately different from the locksmith's navy night and the earthmover's iron dusk: cool wet-slab charcoal, oxide string lines, first light in the sky.

02Palette

The spec's ink/line split applied exactly as written: oxide and cure are line/mark tokens; every run of copy is set in screed light or its dimmed variant #B9B6AF (6.6:1 on cards).

03Type

• Space Grotesk — display. Engineered geometry with a stencilled weight at 700; the masthead's letter-spaced FORMSET and the h1's string-line underline are the typographic moment.
• Inter — body and UI. Legibility first: this is a conversion page read on a phone in one hand.
• JetBrains Mono — everything measured: m², $/m², MPa, the batch docket, dimension labels, suburb tags. The mono is the page's honesty register — if a number matters, it's set in mono.

04The signature — Slab & Finish Estimator

Use chips (driveway / alfresco / shed slab), a 20–120 m² area slider and four finish chips drive a plan-view SVG slab rebuilt on every input. The slab's proportions derive from the use (a driveway runs long at ~2.6:1, an alfresco sits squarer, a shed slab nearly square), scaled to true relative size inside the viewBox with control joints placed so no panel exceeds ~3.5 m — the way a real cutter would lay them out.

Each finish renders procedurally: plain grey is a steel-trowel gradient with wide low-opacity sweep arcs; liquid limestone is a cream pour with soft elliptical patches; exposed and honed aggregate are deterministic point fields — a mulberry32 PRNG seeded from the finish and the rounded area scatters 13 stones/m² (exposed, 1.1–3 px, six stone tones with a 4% oxide-tinted stone) or 20 flecks/m² (honed, finer, under a diagonal gloss overlay). Same inputs, same speckle, every load — the field is a function, not noise. Use-specific details ride on top: a crossover splay on the driveway, a house-wall band with falls noted for the alfresco, hold-down bolt markers to plan on the shed slab. Changing finish triggers a screed-pass wipe across the slab, and the estimate card's batch-docket line recomputes volume (area × thickness) into truck loads.

The card's scenario pre-fills the quote form via the "Use this in my quote" handoff, and window.__concreter exposes the live state for QA.

05Pricing model — shape, anchors, and where the floor takes over

The model is estimate = max(area × rate, $1,800). Two shape decisions, both deliberate and both from the spec's anchors:

• The use dimension is flat. Driveway, alfresco and shed slab share the per-m² rate — the spec pins rates by finish only. Use changes the specification, not the rate at this level: thickness (125 mm vehicles / 100 mm alfresco), the batch-docket volume, and the plan details. Shed slabs to engineered drawings are flagged as quoted-to-plan in copy.
• The $1,800 minimum is a hard floor, stated identically in the estimator's floor note and the services grid, so the two surfaces can never argue.

Where the floor takes over, measured from the shipped model across the 20–120 m² slider: plain grey floors from 20–25 m² (25 × $70 = $1,750 < $1,800; at 26 m² the model clears it at $1,820). Liquid limestone touches the floor exactly at 20 m² (20 × $90 = $1,800 — displayed without the floor note, since the raw figure isn't below it). Exposed ($2,000 at 20 m²) and honed ($2,800) never floor within the slider's range.

Worked example — measured, not asserted: the spec's rest-state hypothesis was ≈$4,000 for a 40 m² exposed-aggregate driveway. The shipped model computes 40 × $100 = $4,000 exactly, verified in the harness against an independently reimplemented oracle at rest and across six driven scenarios (plain@20/25/26, lime@20, honed@120, exposed@40). The FAQ's "lands around $4,000" and the estimator agree because they read from the same rate card.

06Conversion decisions

• Above the fold at 375px: name, trade + area value proposition, oxide "Get a slab estimate" CTA, tel: button and the registration trust chip — all verified inside the first viewport.
• Two call paths always in reach: header tel: link, plus a sticky bottom bar on mobile (Call now / Get estimate, 48px+ tap targets) — trade traffic is a phone in one hand.
• The estimator sits directly under the hero because the visitor's real question is a price question; the primary CTA scrolls to it rather than the form. The form comes after the trust work (rate card, reviews, FAQ) is done.
• Form fields: name, phone, suburb, job — the minimum a scheduler needs to book a measure. Suburb matters because the corridor defines travel-free pricing. Validation is inline with per-field messages; the confirmation is local, immediate, and says plainly that nothing was sent — never a faked network round-trip.
• Estimator → form handoff writes the configured scenario into the job field, so the demo interaction arrives as a warmer lead.

07Local SEO we'd implement for the real business

This demo page ships only WebPage schema naming it a demonstration — fictional structured data in a real index is dishonest markup. For a real Formset, we'd ship LocalBusiness + Review schema fed by a live review flow:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "@id": "https://formsetconcrete.com.au/#business",
  "name": "Formset Concrete",
  "description": "Driveways, alfrescos and shed slabs across Baldivis
    and Perth's southern corridor.",
  "telephone": "+61 8 XXXX XXXX",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Baldivis",
    "addressRegion": "WA",
    "postalCode": "6171",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates",
    "latitude": -32.33, "longitude": 115.83 },
  "areaServed": ["Baldivis","Kwinana","Wellard","Rockingham",
    "Warnbro","Port Kennedy","Secret Harbour","Golden Bay"],
  "openingHours": "Mo-Fr 05:30-15:30",
  "priceRange": "$$",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.9", "reviewCount": "87"
  },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "Real customer" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "Pulled from the live review platform, never typed in."
  }]
}
</script>

08What changes for the real client

• AroFlo — the quote form lands as a job with the estimator's scenario attached; measures scheduled against crew calendars.
• Assignar — crew and pour scheduling; the 5:30am start exists because the crew roster does.
• BGC / Holcim batching orders — the truck-load line in the estimate card becomes a real batching order draft.
• BOM weather-window automation — the weather policy on the page becomes a rule: forecast >32°C or soaked-base rain triggers a reschedule SMS before the customer has to ask.
• Xero — deposits and progress invoicing off the accepted quote.
• Power BI margin dashboards — per-pour margin by finish and suburb, so the rate card stays honest in both directions.
• Plus their photos of finished slabs replacing the procedural plan-view, and a live review feed replacing the demo copy.

09Iteration log