How Setline Paving was built

Palette — a Wangara worksite at noon

Argued from the site, not from taste: screeded yellow builder's sand is Perth's actual base, the cut edge is bitumen-dark, the paver face is kiln oxide, and the chalked string line is blue. Deliberately not the banned cream+terracotta default: yellow sand, not cream; kiln oxide as a line/mark token, not body serif terracotta; a grotesque, not a serif. Per the ink/line split, the two bright accents each carry a derived darker ink for text duty.

Type

Archivo 800 for display — a worksite grotesque with flat shoulders, set in caps for the masthead moment ("LAID TO THE LINE" carries a literal string-line underline strung between two pin marks). Public Sans does the body and UI work: professional and legible beats expressive on a trade page, body ≥16px on mobile. Red Hat Mono owns every number — m², rates, totals, the price meta line — so the arithmetic always reads as arithmetic.

The Course Planner — signature & how it works

The signature is a procedural SVG plan view that lays itself the way the job does. Every brick is generated, not drawn: pavers are true 230 × 115 format at the plan's scale, so the paver count on the card (38/m²) is the same arithmetic a real estimator runs.

Genuinely redrawn patterns

Stretcher is rows of half-offset running bond; basketweave alternates paired horizontal/vertical 2×1 blocks; herringbone is a true 90° domino tiling — cell rule s = (gx+gy) mod 4, a horizontal brick anchored at s=0 and a vertical at s=2 — rotated 45° about the pad centre and clipped to the pad. The patterns are different geometry, not retints: a full-path census at 60 m² counts stretcher at 2,543 horizontal bricks and 0 vertical, basketweave at 1,243 / 1,254.

Course-by-course reveal, two speeds

Bricks batch into 28 course groups by laying-direction progress, then into one <path> per group per shade (≤ ~140 nodes for ~4,500 bricks at 120 m²). The first render earns the entrance: 53 ms per course, capped at 1.5 s. Every subsequent chip or stepper tap redraws snappy — 11 ms per course, settling well under the ~600 ms cap — via a firstDraw flag, so the planner reads as response, not replay. A window.__paving probe carries the live state and a settled flag so QA gates on state, never wall-clock.

The rest state is mid-make

At rest the job holds two-thirds laid (19 of 28 courses down), the string line strung taut in blue at the frontier with a pin at each end, and the next brick outlined in clay, pulsing with a 0.55 opacity floor — never invisible at any capture instant. Reduced motion renders the job fully laid and settled, no frontier, no pulse.

Area type redraws the plan, honestly not the price

Driveway gains the crossover splay and a vehicle outline; alfresco draws the house wall, door threshold and slab edge; pool surround wraps the courses around a blue coping line (an even-odd clip cuts the water out of the field); paths narrow to 1.2 m with edge restraints, planting marks, and honest break marks when the run is longer than the drawing ("16.0 m drawn of a 50.0 m run"). The card says why the price doesn't move: the meter is metres and material.

Pricing model — shape, anchors, measurements

The model is area × (rate + pattern), clamped to max(metered, $1,900). When the clamp binds, the card shows the metered arithmetic and a visible "minimum applies" badge — the page never hides that you're buying the crew's morning, not just the metres. The clamp is a dollar clamp: sub-minimum granite and sub-minimum concrete both read $1,900.

Measured from the running code (all verified against an independently reimplemented oracle across all 36 scenario combinations, plus the spec's pinned readings — zero corrections needed):

• Rest state: driveway, 60 m², clay, herringbone → 60 × ($110 + $10) = $7,200
• Clamp boundary: concrete stretcher 15 m² meters $1,275 → card $1,900 (badge on); 20 m² meters $1,700 → $1,900; 25 m² meters $2,125 → clamp releases, badge off
• Chip to granite at 60 m² herringbone → 60 × $185 = $11,100; limestone basketweave 30 m² → 30 × $141 = $4,230
• Cheapest possible output ($1,900) equals the services grid's "brick paving from $1,900" floor; the driveways card's "from $2,125" is the clamp's release point, with the arithmetic printed on the card

Deliberate flatness, stated rather than invented: area-type chips honestly no-op on price while genuinely re-rendering the scene — a control may stay live without moving the price only if it says so visibly and still changes the drawing, which is exactly what the on-card note does. The drawing's pad proportions (driveway width clamped 3.2–6 m, alfresco 4:3, an 8 × 4 m pool, 1.2 m paths) shape the picture only — the meter never reads them. Pool coping stays outside the m² model entirely.

Conversion decisions

• Above the fold at 375px: name + promise h1, one-line value prop with the $1,900 floor, clay CTA, call button, and three trust chips — all inside the first viewport; the planner card shares the 1200 × 750 thumbnail frame with the hero.
• Click-to-call everywhere: tel: in the header (collapsing to a "Call" chip under 400px) and a fixed call/quote bar in the bottom 140px on mobile. No emergency-line treatment — nobody's driveway floods at 2am.
• Form fields earn their place: suburb (travel), property type (new-build sand pads quote differently from rip-outs), site access (clear / tight / rear laneway decides whether the bobcat or the wheelbarrow does the lifting), preferred start (the scheduling board), and job notes the planner pre-fills. Empty required fields stay empty at rest so validation demonstrates honestly on first submit.
• Planner → form handoff: "Use this plan in the quote" writes the configured scenario (type, m², paver, pattern, figure, clamp state) into the notes and scrolls to the form — the demo interaction becomes a warmer lead.
• Confirmation is honest: instant local state — "Thanks — request received … we'd call you back within one business day" — plus a plain statement that nothing left the browser. No fake network round-trip.

Local 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 Setline, we'd ship the tightest schema.org type with live review data, like this:

{
  "@context": "https://schema.org",
  "@type": "HomeAndConstructionBusiness",
  "name": "Setline Paving",
  "description": "Brick paving, driveways, alfresco and pool surrounds
                  across Perth's northern suburbs.",
  "telephone": "+61-8-XXXX-XXXX",
  "url": "https://setlinepaving.com.au",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Wangara",
    "addressRegion": "WA",
    "postalCode": "6065",
    "addressCountry": "AU"
  },
  "areaServed": ["Wangara","Landsdale","Madeley","Darch","Wanneroo",
                 "Joondalup","Kingsley","Hillarys","Ballajura","Ellenbrook"],
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
    "opens": "06:30", "closes": "16:00"
  }],
  "priceRange": "$$",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.9",
    "reviewCount": "127"
  },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "— real customer —" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "— pulled live from the Google Business Profile —"
  }]
}

Plus: suburb-level service pages fed from the areaServed list, a Google Business Profile review pipeline, and FAQ schema on the six questions the trade actually gets asked.

What changes for the real client

Their photos replace the procedural scenes (though the planner stays — it's the differentiator), their Google reviews feed the review strip, and the quote form posts to their actual workflow. The integrations we'd wire for a paving operator: Buildxact or Groundplan-style takeoff & estimating from site plans, ServiceM8 job cards with photo records of the base prep (the compactor-passes promise, made auditable), supplier pallet ordering through Midland Brick-style trade portals, the council crossover application workflow, Square progress payments, Xero for the books, and a Podium-style review flow at handover.

Iteration log — three passes, driven not skimmed

Every pass drove the real controls headlessly (chips, stepper, form, FAQ, sticky bar) with asserted outputs, and included at least one real screenshot review. Final harness: 54 assertions green, zero console errors.