The concept
Axleworks Heavy Vehicle is an invented truck and trailer workshop in Kewdale with four bays, an overnight slot and two field service utes. The visitor is a fleet controller with a prime mover due for service and no spare truck, or an owner-driver stopped on a run with a load booked — nobody in this audience is browsing. The page has one job: get them to ring the workshop, or book a bay.
Everything else follows from that. The phone number is set at display scale in the masthead and again in the sticky bar, because on this page the number is the call to action. An amber strip sits directly under the masthead carrying the breakdown line and the hours it is answered, so a driver on the hard shoulder never has to scroll. Prices are published rather than hidden behind an enquiry, because a controller ringing four workshops should not have to ask four times.
The proof element — the downtime card
Two controls and an editable figure. Pick the truck, tell it what a day of that truck earns you, and say how long you would be off the road if it stopped on its own. It then draws the same stop three ways to one scale: an unplanned breakdown, a service booked in hours, and the overnight bay.
The bars are split into two colours — steel for our invoice, ochre for revenue the customer does not earn — because that split is the argument. The overnight bay has the biggest steel segment and the shortest bar. The scale is set by the longest bar, which means the two service options visibly shrink as the visitor raises the days, and the page’s case gets stronger while they drive it. That is the second read.
The give-away
The overnight bay carries a $180 after-hours surcharge, and the page tells the visitor to take it anyway. Half a day of a prime mover is $725, so a job that costs $1,905 in hours costs $1,360 overnight: we charge more and it costs them less, and the card prints the $545 the customer keeps. It is a sentence in the card, not a badge on it.
It runs the same way for a rigid: $1,270 in hours against $960 overnight, so the saving is $310. And it inverts honestly. The surcharge is a flat $180 while the revenue saved is half a day, so below a certain daily figure the overnight bay stops being the better deal — and at that point the card swaps its headline to the extra it would cost and says book the in-hours slot instead. A workshop arguing a customer out of its own dearer product is the most credible thing this page does.
The figures it prints
| Days off the road | Rigid · $980/day | Prime mover · $1,450/day |
|---|---|---|
| Half a day | $490 | $725 |
| One day | $980 | $1,450 |
| Two days | $1,960 | $2,900 |
| Three and a half days (our average, with parts) | $3,430 | $5,075 |
| Five days | $4,900 | $7,250 |
| Comparison | Rigid | Prime mover |
|---|---|---|
| Service booked in hours, all in | $1,270 | $1,905 |
| Overnight bay, all in | $960 | $1,360 |
| Kept by taking the overnight bay | $310 | $545 |
| Breakdown at 3.5 days, less the surcharge † | $3,250 | $4,895 |
† $4,895 is enumerated in check-w55.mjs. Its rigid twin, $3,250, is the same subtraction at the other licensed daily rate — $3,430 less $180, both of which the oracle does name — and this build’s harness re-derives it, and the eight other cells the card can reach, from an independently written model. It is reported here rather than passed off as enumerated.
Services-grid anchors, all licensed by the same file: mobile callout from $190 plus $145 an hour on site; workshop labour $145 an hour; A-service from $780 rigid and $1,180 prime mover; trailer service from $420; brake reline from $890 per axle; pre-inspection check from $290; overnight bay +$180. A worked callout of two and a half hours on site prints $552.50.
One thing the oracle does not license, and the page says so. The daily revenue figure is editable, so the visitor can drive the card to cells no enumeration covers. The two prefilled figures — $980 and $1,450 — are the licensed ones and the card labels them as our customers’ metro numbers rather than a survey. Everything else is the visitor’s own figure multiplied by a day count, shown as that multiplication on screen, with a one-tap put ours back. The alternative was a fixed number the page would have had to pretend was universal.
What this page declined to publish
The concept licensed two statements about real regulation, each conditional on verifying it at the regulator’s own site during the build. One survived and one did not.
Declined — the NHVAS maintenance-records claim
The brief allowed: an operator accredited under the National Heavy Vehicle Accreditation Scheme’s Maintenance Management module must keep systematic records of inspections, repairs and servicing, only after verifying it at nhvr.gov.au. Checked during this build, the regulator’s own page states that the updated Heavy Vehicle National Law and a new Heavy Vehicle Accreditation scheme took effect on 1 August 2026, that no new NHVAS accreditation is being granted, and that existing NHVAS operators run to the expiry of their accreditation. The module page that would carry the record-keeping wording returned a 404.
A present-tense sentence about what an accredited operator “must” do, published on a page dated after that transition, could not be verified as current. It was dropped entirely rather than softened — an unverifiable claim about a named scheme has no business on a page that names the scheme. The page therefore never names NHVAS, NHVR, HVA or any module, and says only what Axleworks itself hands over: a job card with parts, hours and photographs, in a format that suits an audit.
Kept — the Authorised Inspection Station scheme
Verified at transport.wa.gov.au: the Department of Transport authorises private businesses as Authorised Inspection Stations to carry out vehicle inspections, and a vehicle at or above 4,500 kg gross vehicle mass is inspected at a heavy vehicle AIS. The page states the scheme’s name and nature once, beneath the services grid, and immediately makes two things clear: Axleworks makes no claim to be one, and its $290 line is its own pre-inspection check, not a government inspection. The department’s fee is described as not ours to set and is not printed.
The rest of the decline list
- No government fee of any kind, including the AIS inspection fee.
- No regulator-mandated inspection interval. The page never says how often anything must be inspected.
- No fatigue or mass limit. Neither subject appears.
- No accreditation outcome. Axleworks is never described as accredited, authorised, approved or endorsed by anybody.
- No parts pricing. Parts are described as at cost plus our margin, itemised on the job card — because a parts figure invented for a fictional workshop would be the one number a real fitter would catch.
- No repair cost for an unseen fault. The breakdown bar is revenue only, and the card says so beside it rather than in the FAQ.
- No real street address. Suburb only, on both pages. A case-insensitive scan for street|road|avenue|terrace|parade|crescent|drive|highway|way|court|close|lane returns only trade idiom — “off the road”, “roadside”, “driveline”, “drive axles”, “owner-driver”, “rear drive” — and substring hits inside “ways”, “anyway”, “always” and “either way”. No road is named anywhere on either page.
- Phone numbers use the reserved (08) 9000 0xxx pattern; the ABN and licence lines are visibly placeholder-patterned and labelled as such; the rego placeholder is a made-up pattern and the field says so.
Why this converts
The phone number is the largest single piece of type in the masthead and it repeats in an amber strip directly beneath it with the hours it is answered, because a driver whose truck has stopped is not going to scroll, read a value proposition, or fill in a form. The proof element sits beside the headline on a desktop and immediately after the services grid on a phone, so the answer to the visitor’s actual question — what does this stop cost me — is in the first screen of a gallery thumbnail rather than three sections down. The form asks for six things and only four are required, and every one of them is something the workshop genuinely needs before it can decide between sending a ute and booking a bay: what it is, where you are reachable, and what is wrong. The prices are published in a trade where most competitors publish nothing, which converts on its own, and the downtime card then does the harder thing — it argues the customer into the option that costs us more to deliver, and prints the money they keep by taking it. A prospect reading that understands they are looking at a business whose quote is a model rather than a mood, and that is the whole trust argument this page makes.
Conversion decisions
Layout
The pinned lead-gen order describes the mobile stack: masthead, emergency band, hero, services grid, proof element, how-it-works, reviews, service area, FAQ, form, footer. The document order follows it exactly. At 1000 px and above a two-area grid lifts the downtime card into the second column beside the headline, leaving the services grid full width beneath — the resolution three builders reached independently in Wave 51, and the reason the thumbnail shows the drawing rather than a menu of tiles.
Two calls to action, one row
At 375 the hero’s two buttons share a row rather than stacking, and the amber band drops its own call button. That button was the third tel: link within 120 pixels — the masthead carries one at display scale above it and the sticky bar carries one below — and removing it bought the hero 56 pixels, which is what lets the headline, both buttons and the first trust line all finish above the sticky bar at 375×667.
Form fields
Name, phone, vehicle and the fault are required. Fleet or company and the rego are optional because an owner-driver has neither to hand at the roadside and a required field they cannot answer is a field they abandon. The overnight-bay checkbox is the only upsell on the form, and it is worded so it can only be ticked by somebody who has read what the surcharge costs and what it saves.
Confirmation
The confirmation panel is hidden on load, stays hidden after an empty or invalid submit, and appears after a valid one. Nothing leaves the browser and the panel says so — no network round trip is faked.
Palette
Graphite and steel is the workshop floor; the single amber is the beacon on the field service ute. It is the trade without the hi-vis cliché, and the amber earns its loudness by appearing in exactly one place — the emergency band — plus the small marks that key the chart.
- Paper
- Panel
- Band
- Band hover
- Steel
- Amber
- Ink
- Muted
- Steel ink
- Mark amber
- Map land
- Map water
Every ratio above is quoted with its hex from the same row of contrast-w55.log, not from memory, and no token is used on a ground that file does not declare for it. Three consequences worth naming: nothing except body ink ever sits on the amber band; the muted grey never touches the map, even though it would measure well there, because the sweep does not declare that pair; and there is no red on this page at all. Field validation therefore marks an invalid input with a mark-amber border and a mark-amber rule beside a message set in body ink, rather than minting an unmeasured red for the one state that needs it.
No new colour was minted during this build, so nothing needed adding to the sweep. Four ratios in the concept prose sit slightly off the log — it quotes ink at 15.5:1, muted at 7.3:1, steel ink at 6.75:1 and paper-on-steel at 8.2:1, where the log measures 16.5, 7.25, 6.78 and 8.13. Every one is a rounding drift in the friendly direction and no decision changed, but the log is the binding half and it is what this page was built from.
Type
Barlow Condensed at 600 and 700 carries every heading, the phone number, the chart labels and the button text. Condensed reads as vehicle signage and, more practically, it lets a long headline — Truck off the road in Kewdale? Two field service utes, out today. — hold three lines at 375 px instead of five. Barlow regular does the body at 17 px.
The one typographic move is the phone number: display weight at 1.34 rem in the masthead and 1.1 rem in the sticky bar, both set in the condensed face with tabular figures, because on this page the number is the call to action and it should look like one. The headline is set in sentence case rather than caps: at this leading, condensed caps let a comma or a question mark from the line above read as an accent over the letters below, which is a defect no assertion can see.
How it is built
- Two files, nothing else. All CSS and JavaScript inline, no libraries, no build step, no raster images. Google Fonts is the only external resource.
- The chart is inline SVG laid out in real CSS pixels, not a fixed viewBox. The sheet is measured on every render and the viewBox is rewritten to match, so a 12.5 px label is 12.5 px at 375 and at 1440 rather than shrinking with the container.
- Money is held in integer cents throughout and divided once at display. Every licensed cell falls out as a whole dollar; nothing is rounded into existence.
- The entrance is wall-clock driven — the bars grow from zero over 620 ms against performance.now(), never a per-frame accumulator, so a starved frame budget under a headless screenshot still lands the page fully drawn. It runs on cold load only: a resize or a control change repaints settled, so no capture can photograph an empty card.
- Reduced motion is honoured in CSS and checked with matchMedia before the loop is ever scheduled; the card draws settled and the loop never starts.
- State probe at window.__truckrepairs exposes the card’s inputs (vehicle, daily rate, days) and every output, including overnightSaves, overnightWins and breakdownVsOvernightSurcharge. It carries no frame counter, so it is provably frozen between the 7-second thumbnail instant and 15 seconds.
- The service-area map is procedural SVG. Twelve suburbs inside the short run are drawn as filled markers and two — Wangara and Kwinana — as hollow ones, matching the “a longer run, quoted before we leave” line in the list beneath. The harness asserts those counts, because a marker whose style disagrees with its caption is the map lying quietly.
- The [hidden]{display:none!important} guard ships on both pages. Nothing in this build toggles an SVG child’s visibility — the chart is redrawn by geometry rather than by hiding parts — so the hidden IDL trap that cost a Wave 54 site a whole feature has no surface here.
The three passes
Driven, not read. The full card was exercised over both vehicles and all five day chips while watching the console, and it threw four <rect> attribute width: A negative value is not valid errors on load. The cause is the classic one: requestAnimationFrame’s timestamp is a vsync time and can precede the performance.now() captured when the loop was scheduled, so the entrance progress went negative on the first frame and the eased widths with it. Clamped at zero as well as at one.
Two more came out of looking at renders rather than probes. The brand mark read as a pair of spectacles at 34 px — two amber circles joined by a bar — and was redrawn as a cab, a body and two wheels. And the first trust line finished 700 px down a 375×667 viewport against a fold of 597, which the sticky bar itself creates: the fix was the two hero buttons onto one row, a 48 px bar instead of 52, and dropping the amber band’s redundant third phone link below 620 px. It now finishes at 580.
Also in this pass: the document order was rearranged so the services grid precedes the downtime card in the markup, matching the pinned mobile stack, with the desktop two-column placement done entirely in grid-template-areas — so the reading order and the tab order agree with what a phone actually shows.
The card was printing $5,075 of lost revenue but not the comparison the concept names, so a line was added under the bars: left to break on its own, that is $5,075 of revenue gone — $4,895 more than the after-hours surcharge you would have paid to have us do it overnight. Both figures are recomputed live and the harness now asserts them against the oracle in all ten vehicle×day cells, not just at the rest state.
The second-read detail was made legible rather than left to be noticed: the chart’s scale is set by the longest bar, so raising the days visibly shrinks both service options while the breakdown bar stays pinned to full width. A quiet caption under the legend now says so. One micro-interaction was added and no more — the service tiles take a steel border on hover — and the card was given a sticky position at tall desktop viewports so the price stays on screen while the services grid is read.
Vertical rhythm inside the card was rebuilt around the thumbnail contract. The big answer figure was moved out of the closing verdict block and up between the controls and the chart, and roughly 60 px of padding was taken out of the control stack — which moved the drawing from 584–754 to 531–700 at 1200×750, fully inside the frame with margin rather than four pixels over the edge.
The harness runs 326 assertions against an oracle written from the concept’s anchors rather than from the page — and the oracle is itself checked against the ten licensed lost-revenue cells before it is allowed to judge anything. It drives both vehicle chips and all five day chips, comparing the probe, the printed strings and the drawn bar widths in pixels against the model at every cell. Layouts are checked at 375, 768 and 1440 for overflow, wordmark and masthead containment, and the 375 run additionally checks the sticky bar owns a real tel: link with a 44 px target and an in-page anchor that actually resolves to the enquiry form.
The form is driven three ways. Empty: the confirmation stays hidden and at least three fields show a visible error. Junk into the phone field — the literal string ring me maybe — must be rejected by the pattern, and the submit must still leave the confirmation hidden; every pattern attribute is separately compiled with the v flag, because a v-invalid class is silently discarded by the browser and the field then accepts anything. Filled: the confirmation appears and reflects the overnight tick.
The rest-state probe is read at 7 seconds and again at 15 and asserted identical, the drawn subject’s bounding box is asserted inside the 1200×750 frame with at least eight marks in it, liveness is proven by a drive-then-diff rather than a passive frame diff, and the reduced-motion path is loaded under an emulated media feature and asserted settled with the bars at full width. The excess ornament removed in this pass was the vertical “half a day” tick that was to have crossed the bars: it would have been invisible everywhere it crossed a steel segment, which is a mark that lies at some values and not others.
Finally the green itself was tested rather than believed, because a sweep can be green while firing on nothing at all. Five defects were planted into index.html one at a time and the whole harness re-run against each: a second <h1> (1 check fired), a live LocalBusiness JSON-LD block (1), the phone pattern re-written with only the hyphen escaped (4 — including the junk drive, because a v-invalid class leaves the field accepting ring me maybe), the sticky bar’s tel: href swapped for an anchor (2), and the after-hours surcharge moved from $180 to $200 in the model (59). Two more were planted against the honesty scanner: a curly-quoted class attribute and a real road name in the footer block, both caught. The file was rewritten from the original bytes after every plant and its SHA-256 checked before the next one went in.
Local SEO we would implement for the real business
This page emits only WebPage and WebSite structured data naming itself a demonstration. Publishing LocalBusiness or Review markup for a business that does not exist would put fiction into a real index, and the demo reviews on the page are deliberately not marked up. For a real Kewdale workshop the schema below is what would ship — shown here as a code sample only.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "AutoRepair",
"name": "Axleworks Heavy Vehicle",
"description": "Heavy vehicle and trailer workshop in Kewdale: servicing,
brakes, inspections and mobile breakdown across Perth.",
"url": "https://axleworks.example.com.au/",
"telephone": "+61 8 9000 0412",
"image": "https://axleworks.example.com.au/img/workshop.jpg",
"priceRange": "$$",
"address": {
"@type": "PostalAddress",
"streetAddress": "<the real yard address>",
"addressLocality": "Kewdale",
"addressRegion": "WA",
"postalCode": "6105",
"addressCountry": "AU"
},
"geo": { "@type": "GeoCoordinates", "latitude": -31.98, "longitude": 115.96 },
"openingHoursSpecification": [
{ "@type": "OpeningHoursSpecification",
"dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
"opens": "05:00", "closes": "19:00" },
{ "@type": "OpeningHoursSpecification",
"dayOfWeek": "Saturday", "opens": "06:00", "closes": "16:00" },
{ "@type": "OpeningHoursSpecification",
"dayOfWeek": "Sunday", "opens": "07:00", "closes": "15:00" }
],
"areaServed": [
{ "@type": "City", "name": "Perth" },
{ "@type": "AdministrativeArea", "name": "Perth metropolitan area" }
],
"hasOfferCatalog": {
"@type": "OfferCatalog",
"name": "Heavy vehicle services",
"itemListElement": [
{ "@type": "Offer",
"itemOffered": { "@type": "Service", "name": "Mobile breakdown callout" },
"priceSpecification": { "@type": "PriceSpecification",
"priceCurrency": "AUD", "minPrice": 190 } },
{ "@type": "Offer",
"itemOffered": { "@type": "Service", "name": "Scheduled A-service, prime mover" },
"priceSpecification": { "@type": "PriceSpecification",
"priceCurrency": "AUD", "minPrice": 1180 } }
]
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8", "reviewCount": "96"
},
"review": [{
"@type": "Review",
"author": { "@type": "Person", "name": "<real reviewer name>" },
"datePublished": "2026-08-14",
"reviewRating": { "@type": "Rating", "ratingValue": "5" },
"reviewBody": "<the review as the customer actually wrote it>"
}]
}
</script>Alongside it: a verified Google Business Profile with the heavy-vehicle category and the real opening hours including the overnight slot, service-area pages for Welshpool, Forrestfield, Hazelmere and Canning Vale that are genuinely different pages rather than one page with the suburb swapped, and a reviews feed pulled live from the profile so the aggregateRating is a reflection of real data rather than a number typed into a template.
What would change for a real client
The procedural drawing stays — it is doing work no photograph does — but everything around it becomes theirs: photographs of the bays and both utes, the real address and a gate map for drivers who have never been to the yard, the real ABN and licence details, and a reviews feed instead of demo copy.
The integrations a workshop like this actually runs, and where each one would plug in:
- Geotab and MTData — the fleet telematics platforms their customers already run. Fault codes, odometers and utilisation flowing in means the downtime card stops asking the visitor what a day of the truck earns and starts knowing which of their trucks is due.
- Fleetio — maintenance and service history. The job card the page promises is the artefact this produces, and a customer portal off the back of it is what stops the phone ringing to ask where the paperwork is.
- Simpro — jobs, scheduling, timesheets and invoicing. The enquiry form would create a lead directly against a bay in the schedule, and the overnight checkbox would check the overnight slot’s real availability rather than promising it.