How Laneline was made

Palette — asphalt and hi-vis

THE utility dark site of Wave 24: a Maddington arterial at 5:30am, night works winding down. Every colour is argued from the taper — no romance, all retroreflectivity. Explicitly distinct from every prior dark in the collection (welder's arc-blue, towing's beacon-amber, signage's plum dusk, celebrant's twilight indigo).

Per the ink/line split: orange and lime are marks only. Body copy runs in lane white (≈15.6:1 on asphalt) and a muted #A7ADB4 ink (≈6.7:1) — both clear of the 4.5:1 floor. CTA text is asphalt-on-orange at ≈7:1.

Type — road-sign DNA

• Barlow Condensed (display) — condensed grotesque with genuine road-signage lineage, set in caps for the masthead and section heads, punctuation kept off line ends in the tight-leading display blocks.
• Barlow (body/UI) — the same family relaxed; keeps the page reading like one system.
• IBM Plex Mono (numbers) — hours, crews, prices, the run sheet, the price card. The estimate reads like a docket, which is the honesty argument made typographically.

The Closure Planner

Work-type chips (lane closure / shoulder & verge / footpath / event), a controller stepper (2–4), a shift-hours stepper (4–12), day/night chips and two add-on toggles drive a procedural SVG plan-view road scene that deploys live: the cone taper plants cone by cone, advance-warning signs step out ahead of it, controller figures take the taper heads as the stepper climbs, the arrow board blinks in with a calm 600ms alternation, and the night chip drops the scene into sodium dusk — the base road dims under an overlay while cones, vests and signs stay bright above it, which IS retroreflectivity, drawn cheaply. A lime dashed guide path shows the route traffic actually takes through the closure (the second-read detail). Rest state holds the closure mid-deployment at full visibility — never blank, never waiting for a cursor.

Engineering notes

• Nested-group split (LEARNINGS W16/W17), learned the hard way: the first build positioned every cone with an SVG transform attribute and animated the same element's CSS transform — the stylesheet rule silently discards the presentation attribute, so the whole scene collapsed to origin while every count-based assert stayed green. Only the screenshot review caught it. Fixed by splitting position (outer group, attribute) from animation (inner group, CSS).
• Dual-speed redraw (W21): first render staggers 26ms/element capped at 1.4s; every later state change redraws at 10ms/element capped at 500ms via a firstDraw flag, so stepper taps feel snappy, not laggy.
• State probe: window.__trafficmanagement carries state, price, breakdown, element counts and a settled flag; QA gates on state, never wall-clock.
• Reduced motion: the scene renders complete and settled immediately; the board's pulse becomes a steady state; entrance choreography is skipped.
• Zero libraries — the whole page is hand-rolled SVG, CSS and vanilla JS. Google Fonts is the only external resource.

The pricing model — one meter, stated plainly

The meter is people and hours. All four work types share it — the chips honestly no-op on price, say so on-card, and still re-render the scene (shoulder works pull the taper to the verge, footpath closures fence the path, events swap cones for barriers). Add-ons are flat, never a second meter.

Worked examples — measured from the running page

All four figures were verified against an independently reimplemented oracle in the QA harness — displayed totals matched the spec's pinned anchors exactly, with zero spec corrections. The planner's cheapest output ($1,020) equals the services grid's "crewed closures from $1,020" floor, so the page never argues with itself. The 4-hour minimum is enforced structurally: the hours stepper's own floor is 4, so the meter can't be driven below its clamp.

Conversion decisions

• Planner in the hero — the signature shares the 1200×750 thumbnail viewport with the h1 (planner top measured at 117px), so the first screenshot shows both the promise and the proof.
• Two CTAs above the fold at 375 — "Request a crew" (anchor to form) and the tel: call button, plus the MRWA trust chip; a fixed call/quote bar rides the bottom on mobile with ≥44px targets.
• Signature→form handoff — the planner's configured scenario pre-fills the works description with the estimate, so the enquiry arrives warm; the field stops auto-updating the moment the visitor edits it.
• Form fields — name, phone, suburb of works, company (optional), works date (min today), description: exactly what a scheduler needs to confirm a crew, nothing that adds friction.
• Confirmation names the crew — the demo confirmation lists controller names, cashing the trust strip's "crews confirmed by SMS, with names" promise. Local only; no fake network round-trip.
• Accreditation as a band, not a badge — MRWA accreditation is the trade's defining compliance fact, so it gets a full-width statement with the audit consequence spelled out.

Local SEO we'd implement for the real business

This demo page ships only honest WebPage schema naming it a demonstration — fictional structured data in a real index is dishonest markup. For a real Laneline, we'd ship LocalBusiness + Review schema like this:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Laneline Traffic Management",
  "description": "MRWA-accredited traffic control crews, cones and TMPs across Perth.",
  "telephone": "+61-8-XXXX-XXXX",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Maddington",
    "addressRegion": "WA",
    "addressCountry": "AU"
  },
  "areaServed": ["Maddington","Gosnells","Cannington","Welshpool",
                 "Kewdale","Canning Vale","Armadale","Perth"],
  "openingHours": "Mo-Su 00:00-24:00",
  "priceRange": "$$",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.9",
    "reviewCount": "87"
  }
}
</script>

Plus suburb + service landing variants ("traffic management Armadale", "TMP design Perth"), Google Business Profile with real job photos, and review markup fed by a genuine review flow.

What would change for the real client

• Assignar — crew rostering and competency/ticket tracking; the "BWTM & TC carded" claim becomes a live compliance fact.
• MRWA / council TMP submission workflows — the "5–10 working days" line becomes tracked lodgement status.
• SignOnSite — inductions before the 6am start.
• Deputy — timesheets straight to payroll; the hours meter on this page becomes the actual billing meter.
• Geotab — on the utes; live ETA for the "crew at 6am" promise.
• Xero — per-project job codes so a civil head contractor's month reconciles itself.
• Podium — the review flow that earns the real ratings this demo only sketches.
• Their photos, their real accreditation numbers, and the quote form raising jobs in the rostering system with the run sheet SMS'd back.

Iteration log