How Tappet & Co. was made — mechanic industry demo

Concept

Tappet & Co. Automotive is the honest workshop: a clean floor, a torque wrench back on the board, the labour rate written on the wall. The audience is commuters due for a logbook service who don't want dealership rates, families with a second-hand SUV making a noise, and ute owners who need it back by Friday. Every design decision is anti-dealership and pro-explanation — prices before the job, photos before the spanner.

The page's single job is a booked service, so the signature element is a price conversation, not an ornament: the Service Estimator on the Hoist shows the visitor their own car class in the air with honest ranges under it, then hands that scenario straight into the booking form.

Palette — argued from the floor

#EEEDE9 · shop-floor concreteGround. The sealed grey-white of a swept workshop floor — daylight through a roller door, not showroom gloss.

#23262B · engine blackStructure and primary ink — the block itself. Headings, the readout panel, the trust band, the footer.

#D4622A · safety orangeLINE/MARK only — shop-towel and inspection-tag orange. Hoist caps, lit inspection points, section ticks, the price rule. Never body text on concrete (it fails 4.5:1 there by design).

#B34A13 · deep tag orangeThe CTA fill, derived from the mark orange so white button labels clear 4.5:1 (≈5.0:1). The ink/line split, applied to buttons.

#31707A · gauge tealSecondary — the dial faces. Links, focus rings, map suburb dots, the confirmation tick.

#E9E7E2 · boneBody ink on engine black — derived light ink so dark panels keep ≥4.5:1 body contrast (the mark orange is reserved for large mono figures and lines there).

The spec named safety orange as the line/mark accent; per the collection's ink/line rule it never sets small text. On the dark readout the price is orange but only at display size (30px+ bold mono, ≈4.2:1 — above the 3:1 large-text threshold), with all explanatory copy in bone or the dimmed grey.

Techniques

Fully self-contained single file: inline CSS/JS, Google Fonts only, every visual procedural (SVG + CSS) — no raster images, no libraries. Restrained by design: a tradie's customer on 4G gets a calm, fast page.

The Service Estimator on the Hoist

The bay is a hand-built SVG: two posts with orange safety caps, a floor line, and a #car-group that carries the carriages, lift arms, sill pads, the car and its inspection markers. Four car silhouettes (small hatch, family SUV, dual-cab ute, Euro sedan) are authored as path data in a shared local coordinate system (ground at y=140, facing left), so wheels, arms and inspection points are per-class data, not per-class artwork. Raised is the resting state — a CSS transform on the group; changing car class adds a .down class (car sinks to the floor), swaps the silhouette mid-lower, then lifts it again on the collection's crafted ease. Service chips relight the numbered inspection points (safety orange, pulsing halo) and the numbered plain-language checklist beside the scene mirrors them. Prices live in one matrix keyed by service × class; the readout, the services grid floor ("from $269") and the FAQ labour rate all resolve from the same numbers. "Book this service" pre-fills the form's class and service selects — the demo interaction becomes a warmer lead. Under prefers-reduced-motion everything renders settled and complete: car up, four points lit, range showing, no pulse, no lower-and-raise choreography.

Everything else

Service-area map: stylised procedural SVG of the inner north-west — coastline, Mitchell Fwy, Scarborough Beach Rd, Karrinyup Rd and Main St as labelled strokes, eleven named suburbs, the workshop ringed in orange at Osborne Park.
Load choreography: a single IntersectionObserver reveal with staggered hero delays, gated on document.fonts.ready with a 900ms fallback and a 4s reveal-everything safety net — content is never stranded at opacity 0.
Form: front-end validation with per-field messages and aria-invalid, a local designed confirmation ("Thanks — request received… we'd call you back") that never fakes a network round-trip, and an explicit demo note.
State probe window.__mechanic: car class, service, price range, lit points, form status and prefill — every interaction updates it, so QA gates on state, not seconds.

Conversion decisions

Above the fold at 375px: brand, the one-line promise ("logbook servicing without the dealership markup"), a Book CTA, and three trust marks (MRB licence, $135/hr on the wall, since 2013). The estimator is one scroll below — price curiosity is the hook, so "See what it costs" is the secondary CTA.
Click-to-call everywhere: tel: in the header, in the booking panel, and a sticky call/book bar on mobile (56px targets). Mechanics win jobs on the phone.
Form fields: name, mobile, suburb, the car in one free-text line (make/model/year — how owners actually describe it), class + job selects that mirror the estimator (so the handoff is lossless), and an optional notes field for the noise description. Nothing more — every extra field costs bookings.
Honest anchors, one source of truth: the estimator's cheapest logbook (small hatch, $269) equals the services grid floor; the $135/hr rate appears in the hero, trust band, readout, and FAQ from the same copy decision; Euro surcharges are explained, not hidden.
Trust strip is specifics, not adjectives: a licence number pattern, a flat rate, a photo-first promise, two loan cars, a founding year. No "quality" claims.

Local SEO we'd implement for the real business

This demo page deliberately ships only WebPage schema naming it a demonstration — fictional structured data in a real index would be dishonest markup. For a real workshop we'd ship AutoRepair (a LocalBusiness subtype) plus review markup fed by their actual Google reviews:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "AutoRepair",
  "name": "The Real Workshop Pty Ltd",
  "image": "https://example.com.au/workshop.jpg",
  "telephone": "+61 8 XXXX XXXX",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Unit X / XX Example Street",
    "addressLocality": "Osborne Park",
    "addressRegion": "WA",
    "postalCode": "6017",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.90, "longitude": 115.81 },
  "url": "https://therealworkshop.com.au",
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
    "opens": "07:30", "closes": "17:00"
  }],
  "priceRange": "$$",
  "areaServed": ["Osborne Park","Balcatta","Stirling","Tuart Hill","Innaloo"],
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.9", "reviewCount": "187"
  },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "A Real Customer" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "Sourced live from the workshop's Google Business Profile."
  }]
}
</script>

Plus: Google Business Profile categories (Auto repair shop / Mechanic), service-suburb pages only where genuine work happens, and review capture wired to the invoice ("text the review link when the keys are handed back").

What would change for the real client

Bookings straight into the workshop system — the form would create a job in MechanicDesk or Workshop Software (both strong in Australian independents), with SMS confirmation and reminder flows; if they take online bookings via AutoGuru, we'd wire that channel in rather than fight it.
Quoting and parts — estimator ranges maintained from their own invoice history; parts pricing sanity-checked against Repco Navigator Pro and their Capricorn supplier account so the web ranges never drift from the counter.
Their photos, their reviews — the photo-first promise backed by their actual inspection photos (MechanicDesk sends these natively), and the review cards replaced by a live Google reviews feed.
Real NAP, real licence — actual street address, MRB licence number, ABN, and the schema above; call tracking on the tel links so they can see which suburb pages ring the phone.

Iteration log

Pass 1 — Craft

Screenshot review caught what the green asserts sailed past. The rear wheels of the SUV, hatch and Euro poked past their tails — the body paths ended too early — so all four silhouettes were rebuilt with real rear overhangs (the SUV's tailgate now closes at 332 of 340 units). The ute's cab was 22 units of roof and read like a dragster; it became a true dual-cab (roof 128–204, two door rows, tray from 228). The lift arms drew as one horizontal bar skewering the wheels — re-angled from the carriages down to sill pads placed clear of the oil marker. Unlit inspection markers showed as mud dots on the glass; they're now hidden until lit. The viewBox was cropped from 760×470 to 648×438 (the car gained ~19% presence), anchor links stopped burying section headings under the sticky header (scroll-margin-top), the desktop h1 came down from 72px to 58px, and the trust row moved above the CTAs so value prop + CTA + trust all clear a 375×667 fold (measured: h1 at 141px, trust at 465px, CTA at 551px). Two map labels (Stirling, Herdsman) were pulled off the freeway stroke.

Pass 2 — Depth

Deepened the signature. A second-read detail went up on the bay wall: a small black board reading "LABOUR $135/HR — SAME RATE FOR EVERYONE", the page's flat-rate promise painted into the scene itself. Inspection points now light with a 70ms stagger (skipped under reduced motion), and hovering a checklist line highlights its matching marker on the car — the list and the diagram read as one instrument. The estimator→form handoff got a one-shot teal flash on the two pre-filled selects so the visitor sees what the button did. The harness drove all 20 class × service combinations against an independently re-implemented price oracle — every displayed range matched (SUV logbook $299–$359 at rest; Euro belts $1,050–$1,400 at the extreme) — and a new assert covers the hover-sync behaviour.

Pass 3 — Hardening

Chanel rule: removed the faint tool-locker outlines from the bay floor and a dead hero background hook — the scene is calmer without them. The sticky call/book bar gained env(safe-area-inset-bottom) padding for notched phones, and a driven assert that tapping "Book a service" lands on the form (#book, page scrolled). Verified at 375px: scrollWidth exactly 375, wordmark/h1/CTA fully inside the viewport, 56px tap targets. Reduced-motion renders settled and complete — car raised (translateY 122px), four points lit, range showing, no pulse, class swaps instant. Empty submit flags all six required fields; filled submit renders the local confirmation. The reserved-phone sweep found only (08) 9000 0233, structured data is WebPage-only, and the final copy read found no filler — every number on the page resolves from the one price matrix ($269 floor, $135/hr everywhere).