How the Redgum Building Inspections demo was made

Palette — forensic daylight

A surveyor's torch through a roof space: report-page neutrality with one amber beam. The drama lives in the light, not the layout.

Amber small text fails contrast, so type that must read small gets its own inks: #A66315 (amber-ink, 4.6:1) for prices, #59625B (muted ink, 5.8:1) for secondary copy — the ink/line token split from the collection's learnings.

Type

Space Grotesk for display — instrument-panel neutrality with enough character for the inspector's-stamp pin labels (caps, letterspaced, boxed like a report annotation). Public Sans for body — a workhorse built for legibility at 16px+ on a phone in one hand, which is where trade traffic lives.

The signature — an annotated house section

An SVG cutaway elevation of a Perth double-brick home, drawn the way an inspection report is annotated: slate-blue section strokes, pattern-fill brick leaves and soil, small-caps callouts (ROOF SPACE, DAMP COURSE, WET AREA). Eight defect pins sit at the zones an inspector actually works — roof cover & sarking, gutters & fascia, roof-frame timbers, wall cracking, rising damp, wet-area waterproofing, sagging ceilings, boundary retaining walls. Each pin opens an honest note: what we check there, and one consequence line for missing it. A torch in the top corner casts a gradient beam that re-aims at the open pin — when the wall-cracking pin is open, the crack itself lights amber.

Below it, the package picker: scope (structural / combined +$150) × dwelling tier. The two-storey toggle locks the tier to the top band with its reason printed on the card ("roof access and elevated externals — two-storey is always the full scope") — a control that can't honestly change the price says so instead of silently no-oping. Toggling also rebuilds the scene: the roof group lifts 112 units, an upper storey fades in, roof pins ride up with it.

Engineering notes

• SVG position lives in attribute transforms on outer groups; all animation (lift, pin scale, pulse) lives in CSS on nested groups — the CSS-beats-presentation-attribute trap can't fire.
• The beam re-aim runs on a token: every handler bumps the token before swapping state, so a rapid pin-tap → two-storey-toggle sequence can't leave a stale rAF closure animating against rebuilt geometry.
• Entrance choreography (outline dash-draw, staggered pin pop-in) runs once behind a firstDraw-style entered flag; every later state change transitions in ≤450 ms. Pins beacon-pulse with an opacity floor of 0.55 so the signature is alive at any capture instant.
• State probe window.__buildinginspections exposes scope, tier, two-storey, computed price, open pin, and a settled flag; QA gates on state, never on seconds.

Honest numbers

Every figure is pinned arithmetic, verified against an independently reimplemented oracle in the test harness — the displayed price and the probe price must both equal tier + (combined ? 150 : 0) for every driven scenario.

The estimator's cheapest output ($495) equals the services grid's "from $495" floor, and the combined floor ($645) matches its grid line. Defect follow-up & report reissue is priced "quoted on scope" by design — a re-inspection's cost depends entirely on what's being re-checked, so any printed number would be the dishonest choice. The 24-hour written report promise is stated identically above the fold and in the FAQ.

Conversion decisions

• Above the fold at 375px: trade + area value proposition, book CTA, tel CTA, and the registered-builder trust chip — all before any scroll. The sticky bottom bar carries call + book on mobile.
• The signature feeds the form: the picker's tier pre-selects the form's dwelling chips and prints the chosen package + price above the fields, so the demo interaction becomes a warmer enquiry.
• Form fields are what an inspector actually needs to call back usefully: name, phone, property suburb, auction/offer deadline (deadline jobs get priority — that's the honest urgency lever), dwelling type. Validation is front-end with v-flag-safe patterns; the confirmation states plainly that nothing was sent.
• Independence as product: the FAQ answers "can you quote the repairs?" with a flat no — no referral fees, no repair quotes — because that IS the sales argument for an inspector.

Local SEO we'd implement for the real business

The demo page itself carries only WebPage/CreativeWork schema naming it a demonstration — fictional business data doesn't belong in a real search index. A real Redgum would ship this (schema.org has no dedicated building-inspector type, so the precise choice is ProfessionalService with an AS 4349.1-named offer catalogue, rather than HomeAndConstructionBusiness, which implies construction work — an inspector sells independence from the trades):

{
  "@context": "https://schema.org",
  "@type": "ProfessionalService",
  "@id": "https://redguminspections.com.au/#business",
  "name": "Redgum Building Inspections",
  "description": "Pre-purchase structural and timber pest inspections across the Perth metro. Written report within 24 hours.",
  "telephone": "+61 8 XXXX XXXX",
  "email": "bookings@redguminspections.com.au",
  "address": { "@type": "PostalAddress", "addressLocality": "Como", "addressRegion": "WA", "postalCode": "6152", "addressCountry": "AU" },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.99, "longitude": 115.86 },
  "areaServed": { "@type": "City", "name": "Perth" },
  "openingHoursSpecification": [{ "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
    "opens": "07:00", "closes": "18:00" }],
  "hasOfferCatalog": { "@type": "OfferCatalog", "name": "Inspection services",
    "itemListElement": [
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Pre-purchase structural inspection (AS 4349.1)" }, "price": "495", "priceCurrency": "AUD" },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Combined structural + timber pest inspection (AS 4349.1 / AS 4349.3)" }, "price": "645", "priceCurrency": "AUD" },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Pre-settlement walkthrough re-check" }, "price": "220", "priceCurrency": "AUD" }
    ] },
  "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "187" },
  "review": [{ "@type": "Review",
    "author": { "@type": "Person", "name": "Real customer, from the Google Business Profile feed" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "Found a cracked lintel two days before auction — report was in my inbox by 7am." }]
}

For the real client this page would also swap in: bookings straight into ServiceM8 or Tradify (inspection scheduling + SMS confirmations), reports authored in Formitize or SafetyCulture with the PDF delivered from the same pipeline, a live Google Business Profile reviews feed replacing the demo quotes, and a Stripe deposit at booking to kill no-shows in auction week.

Iteration log