Generative Assets · Industry demo 465

How Sightline Road Safety was built

Sightline Road Safety is a fictional Burswood practice selling road safety audits and road safety inspections to WA councils, subdividers and civil contractors. Its audience is a council engineer building a Black Spot submission, a developer’s project manager at detailed design, or a contractor who has just been told the job needs an audit. The page has one job: tell them which of Main Roads’ four audit stages their project actually needs, who they are permitted to engage, and what it costs — three things the policy, the portal and every competitor between them refuse to put on one screen.

Palette: asphalt under sodium light

A night site inspection is the only time most of these people look properly at a road. Navy is the asphalt, the amber is the sodium lamp and the hi-vis, and the amber is rationed: it marks stages and warrants and nothing else. Every ratio below is measured, not calculated — they come from the wave’s contrast sweep, and a token only ever lands on a ground that sweep passed for it.

Page#F2F4F6 Cool grey, the ground everything else is measured against.
Surface#FFFFFF Cards, inputs, the drawing. Plan-sheet white.
Ink#131A21 15.91:1 on page, 17.54:1 on surface.
Muted#46525C 7.26:1 on page, 8.01:1 on surface. Secondary copy only.
Primary#26405E 9.63:1 on page, 10.62:1 on surface; white on it 10.62:1. Asphalt navy, every CTA.
Accent#8A5000 5.90:1 on page, 6.51:1 on surface; white on it 6.51:1. Stages, warrants, centreline.
Band#182634 with #E9EFF4 at 13.27:1. The Black Spot funding card and the footer.

The forbidden pairings in the log are the ones a hurried build reaches for: ink on band (1.14:1), primary on accent (1.63:1), muted on primary (1.33:1). None of them appears. There are no tinted panel backgrounds anywhere on the page, because a tint is a ground the sweep never measured — where a card needed emphasis it got a 3 px left border in primary or accent instead.

Type

Barlow Condensed 700 carries every heading, the verdict, the stage names and the fee. It is the closest freely available face to the condensed grotesque on an Australian road sign, and condensed type earns its keep here twice: the h1 fits “Road safety audits for projects anywhere in Western Australia’” in four lines at 375 px, and a four-figure fee at 2.5 rem still sits inside a 530 px card column.

Barlow 400/500/600 carries all body copy, every quoted policy sentence, every label and the whole form. The condensed face is never set below about 1 rem and never used for running text — a condensed paragraph reads as a signage pastiche, and this audience reads long quoted sentences carefully. Figures are set with font-variant-numeric: tabular-nums so the fee does not shuffle as it changes.

The proof element: “Which stages does your project need?”

Four inputs, and the answer arrives in the order the reader needs it: which stageswho you must engageis your last audit still currentfee. The price is last on purpose. A council engineer who does not know whether the job is two stages or four cannot act on a number, and a bidder who leads with a number is answering a question nobody asked yet.

The model underneath is about thirty lines and every line is a sentence of the policy. The value bands are sections 6.1, 6.2 and 6.3 — prose sections, not a table, which is why the value input is a four-option band selector and never a slider. Interpolating between published bands would invent policy, and the page says so on the card. Sections 6.2 and 6.3 set their stages “as a minimum”, so a third answer row appears in exactly those two bands to say the project manager can ask for more.

Under $100,000 two exceptions bring projects back in rather than letting them fall out. Section 6.7 lists warrants for land-use developments, and the boundaries are strict: the policy says more than 20 lots, more than 50 vehicles and in excess of 100 movements per day, so exactly 20, exactly 50 and exactly 100 are not warrants and the checker returns no stage for them. Section 6.4.2 puts a sub-$100,000 Black Spot project at Stage 3 alone. Both are driven and asserted.

The drawing is a plan view of a development access onto a State road — kerb returns, a holding line, a pedestrian crossing, a splitter island and the sight triangle each way from the holding position — drawn as static SVG so it cannot fail to render. Under it, the four-stage timeline is HTML, not SVG: the answer has to stay legible at 375 px, and real type in a CSS grid does that where a scaled viewBox does not. Below the timeline a caption names what each required stage actually looks at on that drawing, which is the second-read detail: the picture stops being decoration once you notice it is the thing being audited.

One place this page refined the wave oracle

figures-w61.mjs measures the age of a previous audit as a fraction of a 365.2425-day year. On both figures it asserts — a 30 Jun 2022 audit against a fixed 2 Mar 2026 (stale) and a 1 Sep 2024 audit (current) — the page agrees exactly. They diverge on one cell the oracle does not assert: an audit dated 2 Mar 2023 comes out at 3.0007 years by the fraction and would be flagged, but section 4.2 bites only where the previous audit is “more than 3 years old”, and an audit three years old to the day is not more than three years old. The page computes the calendar anniversary in UTC instead and keeps that audit current until the following day. Same answer everywhere the oracle looks; the correct answer on the boundary it does not.

Where the page argues against its own sale

Twice, and both branches were built at full size and driven like the sell branch.

The $0 answer is a designed state, not an error. A sub-$100,000 development meeting no warrant gets “No audit stage”, a $0 fee, an empty timeline and the sentence that the policy names no stage for a project like theirs — plus the reminder that section 6.7 only reaches developments that intersect the State road network at all. It does not end there: it offers to put that in writing for free, so the reader has something to attach to their submission, and it prices the road safety inspection at $2,700 for anyone who wants a look at the existing road regardless. A refusal that ends the conversation is a lost lead dressed up as honesty.

The Black Spot funding card is built on Main Roads’ own sentence: the programs cover the cost of Stage 3 and 4 audits, and the estimated cost is to be included in the total project cost. That sentence takes our fee out of a council’s engineering budget entirely, and the card finishes by telling a reader who does not want to engage us to take the Stage 3 and 4 figures off the rates above and use them.

The cheaper option is drawn in every state, not only where it wins, and it carries isSubstitute: false with the reason written out: a road safety inspection examines a road already open and in service, so it is $1,200 less than a Stage 3 audit and it is not a substitute for one. Hiding a cheaper option until it applies makes a page look like it was concealing it.

And the trust line costs us something. A Senior Road Safety Auditor must “team lead at least TWO road safety audits over TWO years to maintain accreditation”, so the page tells the reader to ask any bidder when they last led one — us included.

What this page declined to publish

  • Any dollar price for a road safety audit from anyone but Sightline. No Australian operator publishes one, so an “industry rate” would have been invented. The services strip says exactly that and tells the reader to compare on scope and team instead.
  • Any count of accredited auditors in WA. The register sits behind a login, which is all the page claims — and it turns that into advice: ask for the accreditation number and have your LGA confirm it.
  • Any panel or schedule rate from a procurement body, any claim that a named local government requires an audit, and any crash statistic. None of it was verifiable, so none of it is on the page.
  • Any table attributed to Main Roads. The value bands are prose sections and the FAQ says so in as many words.

Conversion decisions

  • The proof card takes the hero’s second column above 1024 px. The 1200×750 thumbnail is the sales asset, and a thumbnail showing a headline and nothing else sells nothing. The answer sits at 402 px and the whole drawing finishes at 640 px, both inside the frame. Mobile reading order is untouched: hero, services, proof, how, reviews, area, FAQ, form.
  • The primary CTA is the checker, not the form. This buyer will not send project details until they know what they are asking for. The form CTA sits beside it, and the sticky bar carries a real tel: link plus a form anchor at 56 px tall.
  • The CTA label changes with the answer. “Get stages 2, 3 and 4 quoted” is a different offer from “Get it in writing that you do not need us”, and both are things a reader will click.
  • Eight form fields, and two of them are pre-filled from the checker. Project type and value band arrive already answered, which is the cheapest possible demonstration that the page was paying attention. The fields validate in JS for the message quality, and also carry required, inputmode and a pattern so the browser’s own constraint API — and a screen reader — knows what the form will refuse.
  • The confirmation is local and honest. No network call is made or faked; the confirmation repeats the stages and the indicative fee back, and says plainly that this is a demonstration and nothing was sent.
  • Rates are on the page. Six fixed fees with the GST-inclusive figure beside each, and the combined Stages 3 + 4 price shown as $300 less than the two separately, with the arithmetic printed to the cent underneath the total.

Why this converts

The person landing here has been told their project needs an audit and has no idea whether that means one stage or four, which is the exact question the fee depends on — so the page answers it in ten seconds, for free, before asking for anything. Putting the answer in the hero’s second column means the search result, the shared link and the thumbnail all show a real answer rather than a headline, and the answer changes as the reader changes their inputs, which is what makes them trust the number under it. The page then does the thing competitors will not: it prints its fees, states that no operator in the country publishes one so there is no market rate to compare, and tells the reader how to judge bidders instead. It argues against its own sale twice — a $0 answer for projects the policy does not reach, and Main Roads’ own sentence proving a council’s Black Spot audit should be paid for out of the project rather than its own budget — and both of those endings still leave something to do today. That is the whole pitch for hiring us: a page that tells a professional buyer the truth faster than anyone else will is the page that gets the phone call.

Local SEO we would implement for the real business

The live page carries only a WebPage block that names it a demonstration, because marking up a fictional business with LocalBusiness and Review data would put invented facts into a real index. For a real Sightline this is the block we would ship, alongside a Google Business Profile in the Professional Services category, consistent NAP across the profile, the site footer and the major directories, and a reviews feed that writes real, dated, attributed reviews into the markup rather than hand-typed copy.

{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "ProfessionalService",
      "@id": "https://example.com.au/#business",
      "name": "Sightline Road Safety",
      "description": "Road safety audits and road safety inspections for local governments, subdividers and civil contractors across Western Australia.",
      "url": "https://example.com.au/",
      "telephone": "+61 8 XXXX XXXX",
      "priceRange": "$$",
      "address": {
        "@type": "PostalAddress",
        "streetAddress": "Unit N, NNN Example Street",
        "addressLocality": "Burswood",
        "addressRegion": "WA",
        "postalCode": "6100",
        "addressCountry": "AU"
      },
      "geo": { "@type": "GeoCoordinates", "latitude": -31.95, "longitude": 115.90 },
      "areaServed": { "@type": "State", "name": "Western Australia" },
      "openingHoursSpecification": [{
        "@type": "OpeningHoursSpecification",
        "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
        "opens": "07:00", "closes": "17:00"
      }],
      "hasOfferCatalog": {
        "@type": "OfferCatalog",
        "name": "Road safety audit stages",
        "itemListElement": [
          { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Stage 3 detailed design road safety audit" },
            "priceSpecification": { "@type": "PriceSpecification", "price": "3900", "priceCurrency": "AUD", "valueAddedTaxIncluded": false } },
          { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Stage 4 pre/post-opening road safety audit" },
            "priceSpecification": { "@type": "PriceSpecification", "price": "4600", "priceCurrency": "AUD", "valueAddedTaxIncluded": false } },
          { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Road safety inspection" },
            "priceSpecification": { "@type": "PriceSpecification", "price": "2700", "priceCurrency": "AUD", "valueAddedTaxIncluded": false } }
        ]
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.9", "reviewCount": "31",
        "bestRating": "5", "worstRating": "1"
      },
      "review": [{
        "@type": "Review",
        "datePublished": "2026-02-18",
        "author": { "@type": "Person", "name": "Real reviewer name, pulled from the reviews feed" },
        "reviewRating": { "@type": "Rating", "ratingValue": "5", "bestRating": "5" },
        "reviewBody": "Audited the detailed design and came back for the pre-opening at night. Findings register our designer did not argue with."
      }]
    },
    {
      "@type": "FAQPage",
      "@id": "https://example.com.au/#faq",
      "mainEntity": [{
        "@type": "Question",
        "name": "Which road safety audit stages does my project need?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Main Roads sets the stages by estimated project value in sections 6.1 to 6.3 of its Policy and Guidelines for Road Safety Audit, with exceptions under $100,000 in sections 6.4.2 and 6.7."
        }
      }]
    }
  ]
}

The ranking work that actually moves this business is not the markup though. It is a page per stage and per region — “Stage 3 road safety audit”, “road safety audit Bunbury”, “Black Spot road safety inspection WA” — each one answering the question in its own first paragraph, because this buyer types the trade’s own words and abandons anything that makes them fill in a form to find out.

What would change for the real client

  • Their drawings, their jobs. The plan view would become a sanitised extract from a real audit, exported from 12d Model or Civil 3D, with the client’s permission and the project de-identified. The checks the page names are the ones their team already runs in SIDRA Intersection and AutoTURN.
  • Their reviews. The three demo testimonials come out and a live Google Business Profile feed goes in, dated and attributed, which is also what makes the Review markup above legitimate.
  • Where the work comes from. Council work in WA arrives through VendorPanel and Tenders WA, so the form would push straight into their pipeline — Pipedrive or HubSpot — tagged by project type and value band, and their existing panel numbers would sit in the footer beside the accreditation number.
  • Where the reports go. Road safety inspection reports are lodged on the IPWEA Road Safety Portal, and councils receive audit reports into Objective, Content Manager or TechnologyOne. Drawing exchange happens in SharePoint, Dropbox or, on contractor jobs, Aconex and Procore.
  • Time and money. Fixed-fee audits still need recovery tracking: WorkflowMax or Harvest against Xero, with the stage fee and the travel line coming off the quote the page generated.
  • The three-year clock as a product. The re-audit date the checker computes is the most valuable thing on the page for a real practice. Held against a client register it becomes a diary: every stage, every project, a call in the month before it passes three years. That is repeat revenue the competitors are not collecting.

Iteration log

Pass 1 · Craft

The first build failed its own thumbnail check: the drawing finished at 984 px, well outside the 1200×750 frame. Fixing it properly meant tightening the whole card rather than shrinking the picture — the date hint went from two lines to one, the “as a minimum” sentence moved out of the verdict subline into its own answer row, the input grid dropped to two rows, and the column padding came down. Drawing bottom 984 px → 640 px, verdict 590 px → 402 px.

Driving the form found a silent defect worth writing down: pattern="[0-9 ()+-]{8,20}" on the phone field did nothing at all. Chrome compiles pattern with the RegExp v flag, where an unescaped bracket inside a character class is a syntax error, and an invalid pattern is ignored rather than reported. The field happily accepted “Testerson” while checkValidity() returned true. Escaped to [0-9 \+\-\(\)]{8,20}, which compiles under both flags and refuses letters.

Driving the checker found a copy defect: the verdict was lower-casing the project type mid-sentence and printing “a black spot project”. Black Spot and State road are proper nouns, so a separate mid-sentence label map replaced the toLowerCase(). Also fixed in this pass: the masthead phone link lost its accessible name below 720 px because the number span is hidden there (added an aria-label); the quotation in the dark funding card had no measure and ran past 110 characters a line at 1200 px (capped at 74ch); the hero eyebrow wrapped to two lines at 375 px (shortened to three words); the two hero buttons were ragged widths at 375 px (full width below 480); two service-area map labels sat on top of the coastline (per-town vertical nudges); the trust line broke at a hyphen and left one word alone on a line; and the enquiry-form placeholder named a real Perth road, which was replaced with a generic reference.

Pass 2 · Depth

The fee now shows its working. Under the total, the stage line items print to the cent — Stage 2 $3,200.00 + Stage 3 $3,900.00 + Stage 4 $4,600.00 = $11,700.00 ex GST — and where Stages 3 and 4 are booked together it prints both figures: $3,900.00 + $4,600.00 = $8,500.00, charged $8,200.00 as one audit. A proof element that shows its working is asserting its working, so the harness now checks all four band cases and the $0 branch against those exact strings.

Added the second-read detail: a caption under the timeline naming what each required stage looks at on the drawing above — Stage 2 the geometry and the sight distance, Stage 3 the crossing and the island and the signs and lines, Stage 4 the same junction built, at night. It only lists stages the project needs, so it changes as the reader changes their inputs, and on the $0 branch it says the drawing is still the one their local government will look at. The state probe gained the line items and the caption text.

Micro-interaction: the stage markers ease between lit and unlit rather than snapping, killed under reduced motion.

Pass 3 · Hardening

Opening the 375×667 screenshot did what a green harness could not. The plan drawing measured 281×97 px, which put its 12.5 unit labels on screen at about five pixels — present, asserted, and unreadable. It now swaps to a narrow-screen viewBox that crops to the junction itself (170 10 300 210, 281×197 px) and drops the labels entirely on narrow screens, because the caption already carries the words. The swap runs on a throttled resize handler and is exposed on the probe.

The second screenshot, of the whole card at 375, caught the same class of fault one element down: the four-stage timeline was SVG and rendered 39 px tall with seven-pixel type. It was rebuilt as an HTML grid — a dot, a stage name and a sub-label per column, with the live segment positioned by percentage — so it keeps real type at every width, and the answer became real page text rather than SVG glyphs.

Chanel rule: the plan carried five labels and now carries four. “Kerb returns” went, because the caption says it better and the drawing still shows them. Checked and held: no horizontal overflow at 375; every checker input at least 44 px tall; 53 px of clearance between the trust line and the sticky call bar at 375×667, against a 12 px floor; reduced motion settles the page with the h1 at full opacity and the checker still computing; the drawings keep all 62 of their marks through a resize to 1000 px; the timeline’s live segment hides and returns cleanly; both files scan clean for curly quotes inside attributes; zero console errors. The harness finishes at 133 checks, every one of them driving the real control rather than reading state.