Build guide · Generative Assets

How Trueline Glass & Glazing was made

The concept. Trueline Glass & Glazing is a fictional Osborne Park glazier — cricket-ball windows, 7am break-in board-ups, shower screens and compliance-letter safety upgrades across Perth's inner north. The page has one job: book a same-day measure. The art direction is the glass rack in morning showroom light — clean panes leaning in the A-frame, the green glow float glass only shows on its edge — precise and unhurried, zero cracked-glass drama.

Palette — argued from the racked pane

The spec's ink/line rule applied twice: glass-edge green fails 4.5:1 as small text on daylight (3.9:1), so body-scale green is set in the derived #256B5D and buttons in #2F7566; the bright #3E8E7E is reserved for lines, marks and the pane's edge glow. Silicone grey measures 2.75:1 and is confined to borders.

Type

• Familjen Grotesk — display. A precise, slightly warm grotesque; the masthead's two-tone TRUELINE wordmark is the one moment of typographic bravery.
• Figtree — body and UI. Legible at 16px+ on a 4G phone, which is where glazing customers are standing.
• Red Hat Mono — dimensions, m², weights and prices. Everything measured is set in mono, so numbers read as instrument output, not marketing.

The signature — Pane Estimator

Job chips (window re-glaze / shower screen / splashback / sliding door), glass chips (4 mm float / toughened / laminated / obscure) and 300–2400 mm width/height steppers drive a procedural SVG pane drawn face-on and edge-on. Geometry is laid out in JS at 0.125 px/mm and eased to new dimensions with a 240 ms cubic-out requestAnimationFrame lerp (instant under reduced motion). The glass type renders procedurally: float's reflection streak lives in a clipPath that tracks the pane rect; toughened gains the etched corner stamp "T — AS 1288"; laminated thickens the edge-on bar and draws the interlayer seam; obscure overlays an SVG <pattern> frost. Scene swaps (shower screen, splashback) toggle SVG groups via the hidden attribute — with the [hidden]{display:none!important} guard, and never g.hidden=true, which silently no-ops on SVG. The live state (job, glass, dims, billed area, price, form status) is exposed at window.__glazier for QA.

Pricing model — shape, anchors, derivation

Model: price = fit fee + glass rate × billed area, where billed area = max(actual m², 0.5 m² minimum billable pane). The minimum is the derivation that makes every pinned "from" anchor exact: $120 + rate × 0.5 reproduces $190 float, $280 toughened, $260 laminated, $220 obscure.

Component	Value	Source
Fit & seal fee (window)	$120	pinned
Fit fee (sliding door, incl. new rollers + track service)	$180	derived — $180 + $320 × 0.5 = the pinned $340 floor
4 mm float	$140/m²	pinned
Toughened 6 mm	$320/m²	pinned
Laminated 6.38 mm	$280/m²	pinned
Obscure 4 mm	$200/m²	pinned
Sliding-door floor	$340	pinned — laminated sliders would otherwise undercut it, so the floor applies

Rounding rule: the glass line rounds to the nearest dollar (Math.round(rate × billed)) and the total is fee + rounded glass line, so the card never argues with its own line items. The oracle in QA keeps exact arithmetic. Measured rest example: 1200 × 900 mm toughened window = 1.08 m² → $120 + round($345.60) = $466, matching the spec's cross-derived ≈$466. Cheapest reachable output — float window at minimum size — measures $190, equal to the services grid's re-glaze floor.

Honest disables (no control computes a dishonest figure): shower screens and splashbacks are quoted-on-measure scopes — selecting them disables the steppers and glass chips with the reason on-page ("screens are priced by configuration, not area — the measure is free") and the card shows only the pinned anchors ($680 / $1,250 semi-frameless / frameless; $420/m² splashbacks). Sliding doors disable float ("can't legally go in a door under AS 1288") and obscure ("comes as toughened obscure, quoted with the pattern in hand"), auto-switching to toughened with the switch announced. The pane-weight second read uses flat glass mass at 2.5 kg/m² per mm of thickness.

Conversion decisions

• Above the fold at 375px: brand, "broken glass to booked measure, same day", the measure CTA, a tel: secondary, and the AS 1288 / since-2012 / $10M trust line — all before scrolling.
• Emergency band directly under the hero: break-in traffic doesn't want an estimator, it wants plywood — board-up prices, the photograph-first insurance advice and the real 131 444 non-urgent police line sit in the first scroll.
• Estimator → form handoff: "Book this measure" copies job, glass, dimensions and the estimate into the enquiry, so the demo interaction becomes a warmer lead. The handoff is button-driven, so an untouched page still validates as empty.
• Form fields: name, phone, suburb (sets the travel window), job select, free-text description. Three required fields only — a glazing enquiry is a phone call with a form in front of it. Local confirmation states the within-the-hour callback and declares that nothing was sent.
• Mobile sticky bar: call + quote, 48px targets, above env(safe-area-inset-bottom).

Local SEO we'd implement for the real business

This demo deliberately ships only WebPage schema naming it a demonstration — fictional LocalBusiness/Review data in a real index is dishonest markup. For a real Trueline, we'd ship:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Trueline Glass & Glazing",
  "description": "Window re-glazing, shower screens, splashbacks
    and emergency board-ups across Osborne Park and Perth's
    inner north. Installs to AS 1288 & AS 2047.",
  "telephone": "+61-8-XXXX-XXXX",
  "address": { "@type": "PostalAddress",
    "addressLocality": "Osborne Park", "addressRegion": "WA",
    "postalCode": "6017", "addressCountry": "AU" },
  "areaServed": ["Osborne Park","Tuart Hill","Yokine","Balcatta",
    "Stirling","Innaloo","Karrinyup","Dianella","Mount Hawthorn",
    "North Perth","Leederville","Wembley"],
  "openingHours": ["Mo-Fr 07:00-17:00","Sa 08:00-12:00"],
  "priceRange": "$$",
  "review": { "@type": "Review",
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "author": { "@type": "Person", "name": "[verified customer]" },
    "reviewBody": "[pulled from the live Google / Podium feed]" },
  "aggregateRating": { "@type": "AggregateRating",
    "ratingValue": "[live]", "reviewCount": "[live]" }
}
</script>

Plus suburb-level service pages (the FAQ answers above are each a query cluster: "safety glass requirements WA", "window cracked by itself", "shower screen cost Perth"), Google Business Profile with the board-up line as the primary category action, and review schema fed from a real review platform — never hand-typed.

What would change for the real client

• ServiceM8 — same-day dispatch, on-the-way SMS, and the board-up job card raised from the enquiry form.
• Smart-Toolbox (glass-industry quoting) — the Pane Estimator's model swapped for their live rate card; supplier cut-to-size ordering feeds so a confirmed measure becomes a glass order.
• Xero — invoicing wired to the assessor-friendly itemised format the page promises.
• Insurance workflows — claim-number capture on the form, photo upload for the assessor, and the invoice referencing AS 1288 clauses.
• Podium — the reviews section fed from the live feed instead of demo copy.

Iteration log