How the Kerbline page was built

A lead-generation page for a fictional Welshpool vehicle-modification workshop. One landing page, no libraries, no images — every mark on it is drawn.

The concept

One question, answered before the price

Kerbline Vehicle Modifications fits hand controls, spinner knobs, pedal swaps, wheelchair hoists, ramps and tie‑downs for drivers and families across Perth. The person landing on this page has just been quoted a conversion and has no idea whether the work needs government approval before anyone touches the car — and every competitor answers that with “contact us”. So the page answers it in ten seconds: which of the three approval routes the job is on, what that means for the order of operations, and what it costs — including the route where we do nothing and charge nothing.

Why this converts

The first thing a visitor sees beside the headline is the answer to the question that brought them — not a form, not a carousel, not a promise to call back — and because the answer sits above the three questions that produce it, the 1200×750 preview that represents this page anywhere it is shared already carries a verdict and a price rather than a headline and a menu. The enquiry form asks for six things, all of which the workshop genuinely needs to quote (name, phone, suburb, year, make and model, and the work), so nobody abandons it wondering why a car modifier wants their postcode. The trust line is not a badge wall: it is the sentence that the paperwork gets lodged with DTMI Vehicle Safety and Standards, which is the specific competence a customer is buying and the thing a general mechanic cannot claim. The page argues against its own sale three separate times — an SSM-plated vehicle needs nothing from us, two of our cheapest jobs need no written pre-approval at all, and with an ACROD number the Department issues the permit free of charge so our $180 is optional — each one quoted from the regulator rather than asserted by the business, because a page that tells you when not to pay it is the page you ring when you do. And the cheaper option is printed in every state with a one-click switch, so declining the electric hoist still leaves something on screen to book.

Colour

Permit green and access blue

Two arguable colours and nothing else. Green is the permit that passes at inspection; blue is the international symbol of access, and it is the only colour the access equipment is ever drawn in. There is no hazard yellow anywhere, because this is not a warning page — it is a page for an adult buying a fitting. Every pair below was measured with WCAG arithmetic; the first five come from the wave’s own contrast-w61.log, the rest were minted for this build and measured the same way.

Ground#F2F5F2A workshop-floor off-white with a green cast, so the page never reads as a hospital.

Ink#131A1616.11:1 on the ground, 17.69:1 on white. All body copy.

Muted#4752497.44:1 on ground, 8.17:1 on white. Secondary copy, never below full opacity.

Permit green#146B485.93:1 on ground; white on it 6.51:1. CTAs and every driver control in the drawing.

Access blue#1F4F867.58:1 on ground; white on it 8.33:1. Access equipment, eyebrows, links.

Band#11251CCarries #E9F2EC at 14.08:1 and nothing else. The honesty panel and the Sapience band.

Tint (minted)#E4EEE7The verdict strip. Ink 14.90:1, muted 6.88:1, green 5.48:1, blue 7.01:1.

Body fill (minted)#E7EEE9The car. Green strokes 5.52:1 on it, blue 7.06:1, outline #6F7E74 3.62:1.

Water (minted)#AFC9DBMap ocean and river. Ink labels on it 10.28:1, blue 4.84:1.

Field border (minted)#5F6D635.45:1 on white — a form border a person can actually see. Never used for text.

One pairing was measured and then banned. Muted at 72% over white blends to #7B827C and measures 3.94:1, so no token on this page is ever set below full opacity. Every ratio printed above was pasted from the measured sweep rather than worked out by hand, which is the only way a contrast figure in a build note is worth anything.

Type

Outfit and Public Sans

Outfit 700 sets every heading. It is geometric and slightly wide, which keeps a three-line headline from reading as shouting, and its figures are even enough that a price set at 1.5rem in the badge holds its own against a drawing. Public Sans 400/500/600 carries the body, the ledger and the form — it was drawn for government service copy, its numerals are unambiguous at 14px, and a page that quotes a regulator four times should not be setting those quotes in something expressive. Body is 16px everywhere including mobile; the scale is 0.74 / 0.8 / 0.86 / 0.9 / 1.0 / 1.04 / 1.24 rem with a single fluid clamp on the h1 and the section headings.

The one place the type is allowed to be loud is the badge on the drawing: the total set at 1.5rem in Outfit 700 with tabular figures, alone on white inside a green hairline, floating over an empty quarter of the scene. Everything else on the page is quiet on purpose.

The proof element

“Does this need approval first?”

Three inputs — what is being fitted (seven checkboxes plus a manual/electric choice for the hoist), whether the original pedals stay in place and clear of a knee airbag, and whether a Second Stage Manufacturer compliance plate is already fitted. The model is about sixty lines of plain JavaScript and returns one of four states:

State	Condition	What it prints	Rest example
SSM	An SSM plate is fitted	No approval work, the Department’s own sentence, and an invitation to send a photo of the plate	$0
Inspection	Every item is one of the three listed modifications and the pedal condition holds	Permitted at inspection by an AIS examiner; the permit is pre-paid before the car is presented	$3,210
Written	Anything else	Written application to DTMI Vehicle Safety and Standards before the work	$8,730
Prompt	Nothing ticked	A designed empty state printing `$ —`, never a zero dressed as a price	—

The arithmetic is held in whole dollars inc GST and nothing is ever divided, so there is no rounding step anywhere on the page — every line item and every total is an exact sum of the published anchors. That was checked before the page was written: a separate script reimplements the model from the anchors alone and enumerates all 4,608 reachable control combinations, asserting that every printed total is a sum of the pinned anchors, that no figure is non-integer, that all four states are reachable, and that adding work never lowers the price. The floor of the estimator ($180, a spinner knob with the paperwork declined) is the same $180 the services grid publishes.

The drawing is a static inline SVG assembled in the markup, not built by script — the JavaScript only adds or removes a class on the parts and toggles the hidden attribute on the ones that should not be there at all. That distinction matters: SVG elements have no hidden IDL property, so setting el.hidden = true on a <g> does nothing while every state assert stays green. Nothing animates on a loop, so there is no frame clock to pause and the page is at rest the moment it has painted.

A window.__vehiclemods probe exposes the inputs and every derived figure — route, fitted subtotal, paperwork, approval work, total, what is quoted on inspection, the cheaper alternative with its saving and an isSubstitute boolean, and the grid floor — so the behaviour can be driven and asserted rather than eyeballed.

Conversion decisions

Why things are where they are

The proof card sits beside the headline, not below the services grid

The mobile reading order is the conventional one — masthead, hero, services, proof, why-us, reviews, service area, FAQ, form, footer. At 1024px and up the card moves into the hero’s second column, because the 1200×750 preview is the page’s sales asset and a preview showing a headline and six tiles sells nothing. The verdict lands 242px down the page and the total 403px down, both comfortably inside the frame.

The answer comes before the questions

Inside the card the order is verdict → drawing with the price on it → itemised ledger → the three questions. A visitor who agrees with the default (hand controls and a spinner knob, the most common job) never has to touch a control, and a visitor who does not can see immediately what changing an answer would change.

Six form fields, all of them load-bearing

Name, phone, suburb, vehicle year, make and model, and the work. Every one is something the workshop needs before it can quote — the year and model decide whether there is a knee airbag in the footwell, which decides the approval route. The OT’s name and a free-text note are optional. The form validates in JavaScript for the messaging and carries required, inputmode and pattern, so the browser’s own constraint API — and an assistive technology — knows what the page will refuse.

The confirmation is local and says so

Submitting shows a designed panel that names the customer and their car and promises a callback within one business day, then states plainly that this is a demonstration, nothing was sent and nothing was stored. No network request is made and none is faked.

The paperwork fee is a tick box, not a line in the small print

$180 to prepare the application and book the inspection, presented in the ledger with its own checkbox and a one-click “I will lodge it myself” in the cheaper-option row. On the SSM route it is disabled with the reason on screen rather than silently zeroed.

Everything quoted is linked

Four sentences on the page belong to the Department of Transport and Major Infrastructure and each is quoted verbatim with its source page and that page’s update date. The three no-pre-approval modifications are reproduced as a list, including the unbalanced bracket the Department’s own page carries, flagged as published rather than silently corrected. Running those three bullets together into a sentence, or tidying the bracket, would be a fabricated quotation.

The three passes

What each pass actually found

Pass 1 — Craft

Drove: the enquiry form empty and filled; the proof element through all three routes and the six priced examples; the first 1200×750 and 375×667 screenshots opened and looked at.

The thumbnail showed the literal string — inside the inspection-route sentence. The route copy is written with textContent, which does not decode HTML entities; two strings were rewritten with the character itself. 124 green asserts did not see this — only the picture did.
The hero column was align-self:center. Beside a 1,400px proof card that centred the headline more than 400px down the page and pushed it out of the preview frame entirely. Changed to align-self:start with position:sticky, so the headline and its CTA stay with the reader while they work through the card.
The card’s answer measured 983px at 1200 wide — 233px outside the frame — because the three questions came first. The card was re-ordered to answer-first, which moved the verdict to 242px and the total to 403px.
The paperwork row overflowed the 375px viewport by 74px: the ledger’s flex children inherited min-width:auto and refused to shrink.
The masthead rule .brand span matched both the wordmark and its sub-label, so the rule that hides the sub-label under 720px would have hidden the business name with it. Split into separate elements.
The “quoted as published” note on the Department’s bracket was set in the drawing’s dim grey — about 2.3:1 on white. Re-inked to muted at 8.17:1, and the trust-line separators with it.

Pass 2 — Depth

Drove: all seven items individually and in combination, both hoist types, all three answers to each of the other two questions, the ledger’s paperwork toggle and the cheaper-option button; a 2× clip of the drawing captured with every access item on and inspected.

The zoom showed the hoist starting inside the cabin with its hook falling outside the viewBox, and the wheelchair glyph reading as a circle with a flag on it. The hoist was redrawn as a post in the cargo bay with the arm swung out past the tailgate and the hook inside the frame.
The car had been an empty shell with parts floating in it. A firewall, a floor pan and a driver’s seat were added, the body fill lightened to #E7EEE9 and the outline re-inked to #6F7E74 at 3.62:1 against it, so the vehicle reads before the parts do.
The pedals were two bare L-shapes. Redrawn as arm plus pad; the knee-airbag zone moved down to enclose them, which is where a knee airbag actually is; the pedal-swap arrow moved to floor level so it stopped colliding with that zone.
A legend was added under the drawing — green for driver controls, blue for access equipment — beside a live caption naming the picked parts. The colour system is now stated rather than inferred, and the caption gives any harness a text change to measure when a control is driven.
Two second-read details: the international access mark appears on the rear quarter glass only once access work is ticked, and the kerb the workshop is named for is drawn at the left end of the ground line.
The cheaper option now prints in every state with its saving and a one-click switch — a manual hoist for $2,500 less where one is selected, otherwise lodging the paperwork yourself for $180 less.

Pass 3 — Hardening

Drove: the whole harness again at 375×667, 768 and 1200; the form under reduced motion; 22 tab stops by real keyboard; a real pointer click as a negative control; both pattern attributes through checkValidity with deliberately invalid values; fourteen deliberately planted defects; and clipped screenshots of the map, the mobile card, the confirmation and the SSM branch, opened and looked at after the harness was already green.

The worst defect of the build was found after 158 asserts were green. A clipped screenshot of the service-area map showed the headline printed straight through the middle of it. The hero column had been given position:sticky in Pass 1 to use the whitespace beside the tall proof card — but body{overflow-x:hidden} makes the body a scroll container, the grid area stops bounding the sticky element, and the headline stayed pinned over every section below it, all the way to the footer. Measured: 243,875 px² of overlap on five of the six sections. Not one assert saw it, because every assert measured elements at the top of the page. The sticky was removed and a check added that scrolls to each section and asserts the hero's box intersects nothing.
The SSM branch argued with itself. With an SSM plate and work ticked, the total row was labelled “Approval work, total” beside the fitting figure — so the card said $3,030 of approval work on the one route where the approval work is nothing. The label is now always “Total inc GST”, and the badge carries both facts at once: the fitted price, and $0 approval work beside it. Found by opening the screenshot of that branch, not by any of the fifteen asserts pointed at it.
The ornament removed: the wheelchair glyph in the cargo bay. It was not part of the drawn subject the brief specifies, it crowded the rear wheel and the tie-down track, and the track with its four anchors and two straps carries the meaning on its own. The access mark on the glass says the rest.
375×667: the headline, the subline, both CTAs and the trust line all sit above the sticky bar with 72px of clearance — the sweep requires 12. No element overhangs the viewport and scrollWidth is exactly 375.
The price badge docks below the drawing at 640px and under, so it can never cover the car; at wider sizes a rectangle-intersection check confirms zero overlap with any of the 18 visible marks.
Reduced motion is handled twice: a CSS media query and a matchMedia read that strips the entrance classes outright. Under emulation the headline is opaque and in place, part transitions are 0s, and the estimator still computes.
Both pattern attributes were driven rather than read. Chrome compiles them under the v flag, where an unescaped bracket or hyphen in a character class kills the regex silently — so the phone field was fed “Testerson” and asserted to report patternMismatch, then a real number and asserted valid.
Every tab stop matches :focus-visible and paints a 3px outline; a real mouse click on the same control does not, which is the point of the pseudo-class. The first version of that check asked the browser for the computed style of a pseudo-class it will not compute, got an empty string back, and passed for the wrong reason — a check that cannot fail is worse than no check.
Fourteen defects were planted into a green harness to see which ones it would catch, and it missed one. Toggling an SVG group with the hidden IDL property instead of the attribute leaves the group painting while every state assert stays correct — the model is right and only the pixels are wrong. The check now reads the rendered box of all ten parts and asserts the exact set painted in each scenario. Re-planted against the patched check, that defect and two more like it fired; fourteen of fourteen now do.
Final copy read, against the one rule this subject deserves: the reader is an adult buying a fitting, so every sentence is about a car, a rule, a date or a dollar. The reviews name the model, the figure and the day of the week; the headline names the suburb; the FAQ answers are the length the question deserves and stop there.

Honesty

What this page declined to publish

The Department’s modification permit fee. It sits behind a DoTDirect form rather than a public price list, so the page says what decides whether you pay it — the ACROD sentence — and says the figure is not ours to publish.
Any range for a ramp or a full wheelchair-accessible conversion. The estimator prints the computable part of the job beside the words “quoted on inspection” and never invents a band.
The sentence about returning a vehicle to the manufacturer’s specifications. It could not be verified on the Department’s page, so the FAQ answers that question in the workshop’s own voice and says it will check with the Department rather than quoting a rule that may not exist.
Anything about funding. No scheme name, no price limit, no support item number, no claim about the GST treatment of disability car modifications, and no grant figure written for a different audience.
Anybody else’s prices. Every dollar on the page is this fictional workshop’s own and the page says so.

Local SEO

The schema we would ship for the real business

The live page carries only a WebPage block naming itself a demonstration and crediting Sapience with creditText. Publishing AutoRepair or Review markup for a business that does not exist would put fiction into a real search index, so the schema below never ships on this page — it is what we would put on the real client’s site once the name, address, licence and reviews were theirs.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "AutoRepair",
  "@id": "https://kerbline.example.com.au/#workshop",
  "name": "Kerbline Vehicle Modifications",
  "description": "Hand controls, spinner knobs, pedal modifications, wheelchair hoists, ramps and tie-down systems fitted for drivers and families across Perth.",
  "url": "https://kerbline.example.com.au/",
  "telephone": "+61 8 0000 0000",
  "email": "workshop@kerbline.example.com.au",
  "image": "https://kerbline.example.com.au/img/workshop.jpg",
  "priceRange": "$$",
  "currenciesAccepted": "AUD",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Unit 0, 000 Example Road",
    "addressLocality": "Welshpool",
    "addressRegion": "WA",
    "postalCode": "6106",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -00.0000, "longitude": 000.0000 },
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
    "opens": "07:00", "closes": "16:30"
  }],
  "areaServed": [
    { "@type": "City", "name": "Perth" },
    { "@type": "AdministrativeArea", "name": "Perth metropolitan area" }
  ],
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Vehicle modifications",
    "itemListElement": [
      { "@type": "Offer",
        "itemOffered": { "@type": "Service", "name": "Hand controls, brake and accelerator, supply and fit" },
        "priceSpecification": {
          "@type": "PriceSpecification",
          "price": "2850", "priceCurrency": "AUD", "valueAddedTaxIncluded": true } },
      { "@type": "Offer",
        "itemOffered": { "@type": "Service", "name": "Electric wheelchair hoist, supply and fit" },
        "priceSpecification": {
          "@type": "PriceSpecification",
          "price": "6900", "priceCurrency": "AUD", "valueAddedTaxIncluded": true } }
    ]
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.9", "reviewCount": "63", "bestRating": "5"
  },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "R. Mansell" },
    "datePublished": "2026-08-14",
    "reviewRating": { "@type": "Rating", "ratingValue": "5", "bestRating": "5" },
    "reviewBody": "Left hand controls in a 2019 Kia. Told me on the phone it would not need a written approval, booked the inspection, and the permit was issued on the day."
  }]
}
</script>

Two rules we would hold the real client to. The aggregate rating has to be earned and re-syncable — it is pulled from the review platform on a schedule, never typed into a template, because a rating that drifts from the visible reviews is what triggers a manual action. The offer prices have to match the page; if the workshop changes a price and only one of the two moves, the markup is the one Google believes.

For the real client

What would change on day one

The form stops being local. It posts into the workshop’s job system — ServiceM8 or Tradify for a shop this size, Simpro or AroFlo if they are already running one — creating the enquiry with the vehicle details and the approval route already attached, so the quote is written against the right route instead of a phone note. The customer gets the confirmation email the panel promises.
The estimator writes to the quote. The same three answers that drive the card pre-fill the job card, and the $180 paperwork line becomes a real optional item on the quote rather than a tick box on a web page.
Photography replaces some of the drawing, but not all of it. Real photos of fitted hand controls and a hoist in a customer’s car convert better than any illustration — but the cutaway stays, because it is the only thing on the page that explains the route, and no photograph does that.
Reviews come from the source. Google Business Profile reviews pulled on a schedule and rendered server-side, with the Review and AggregateRating markup above generated from the same feed.
The quoted sentences get a review date. The Department’s pages carry update dates and those dates move. A quarterly check on the two source URLs, with the quoted text diffed, goes into the client’s maintenance retainer — a page whose whole argument is “here is what the regulator says” is only as good as the last time somebody looked.
Measurement. Call clicks, form submits and estimator completions as separate events, plus which of the three routes the estimator most often lands on, which tells the workshop what to stock and what to write about next.