How Chalkline Tyre & Alignment Was Made

Concept

Chalkline sells the two moments a tyre shop earns trust: the chalk mark that says the wheel is balanced, and the alignment printout that proves the car is straight. The audience is a commuter told "you need two soon", a ute on 18s before a long run north, anyone squinting at 205/55R16 wondering what it means and what it costs. So the page teaches the sidewall first and prices it second — step the size until it matches your tyre, watch the wall re-mark itself, and the card prices your rim band in three tiers with fitting, balancing, a new valve and disposal already inside the number.

The art direction is the workshop after close: asphalt-dark ground, the fitter's chalk doing the annotating, wet-road blue in the tread grooves. Motorsport-adjacent numerals, honest suburban prices.

Palette — the rubber and the chalk

The wave's only dark site, argued from the subject: tyres are black, chalk is what the trade writes with, and blue is the wet road the tread is designed for. Chalk and blue are mark-and-line colours only — body text always uses the headlight-white ink.

Asphalt black#16171BPage ground — the workshop floor at night.

Headlight white#EDEDE8Body ink, 14.6:1 on the ground.

Tyre chalk#F2C14ECallouts, CTAs, the balance tick. Marks, never small text.

Wet-road blue#5B87A8Tread grooves, map roads, rules. Lifted to #7FA8C9 for text links (7.1:1).

Ink/line discipline on the dark ground: muted copy uses #A9AEB6 (8:1) and quiet captions #83888F (5:1); the blue is a stroke colour, with its own lifted text token for links — the accent never carries small type.

Type

205/55R16 — SAIRA CONDENSED

Manrope carries the body copy — sturdy, legible, no drama. Saira Condensed does the display work: tall motorsport numerals, so the size code itself becomes the typography.

Display moment: the tyre size set huge in chalk as the decoder's headline, each token decoded beneath a hand-drawn chalk underline — and the same string moulded around the SVG sidewall on a circular textPath.
Prices on the ledger and services grid are set in Saira Condensed — on this page the numbers are the content, so they get the display face.

The Sidewall Decoder — how the signature works

The tyre is a single inline SVG drawn to scale from the size arithmetic: overall diameter = rim inches × 25.4 mm + twice the sidewall height (width × profile). Stepping any control rebuilds the geometry — a three-quarter view built from a sampled silhouette hull (back-left half-ellipse, top and bottom bridges, face-right half-ellipse — sampled polylines, so no SVG arc-flag ambiguity), lateral tread grooves cut dark across the band, two circumferential grooves in wet-road blue, and a five-spoke rim whose radius tracks the rim stepper. A 185/70R15 visibly balloons; a 265/40R19 goes rubber-band. The size marking rides a circular textPath on the sidewall — the size across the top, TUBELESS RADIAL upside-down along the bottom arc, the way a real mould reads — and the chalk balance tick sits by the shoulder.

Every size step bumps an animation token in the handler before the state swap (the W25 stale-closure rule), then the wheel spins ~30° settling over 450 ms, the three chalk underlines re-draw with a dash animation (stroke hidden until drawn length > 0), and the ledger re-prices from the rim-band table. First draw gets the slow entrance (staggered tread bars, 780 ms callouts); every subsequent step redraws snappy at 420 ms. At rest the width callout carries a slow chalk pulse with a 0.55 opacity floor, so the signature is visibly alive at any capture instant. Reduced motion renders everything settled — callouts drawn, no spin, no pulse. State probe: window.__tyreshop exposes size, tier, alignment, the computed figures and a settled flag.

Honest numbers — the rim-band table

Width and profile change the tyre; the band prices the rim — and the card says exactly that, with brand pricing confirmed on quote. Per corner, fitted (fitting, balancing, new valve and disposal included in every figure):

Rim band	Budget	Mid-range	Premium	Set of 4, mid + $99 alignment
15″	$109	$149	$199	$695
16″ (rest state)	$119	$165	$225	$759
17″	$135	$189	$259	$855
18″	$155	$215	$299	$959
19″	$175	$245	$339	$1,079

Rest state, measured from the running page: 205/55R16, mid-range, alignment on → 4 × $165 + $99 = $759. Alignment off: $660. Tier swaps at rest size: budget $575, premium $999.
Set-of-4 is 4 × per corner, flat — no bulk discount, stated on-card as a deliberate pricing statement.
Grid floor equals the estimator's cheapest output: "tyres from $109 a corner" is the 15″ budget band.
Designed price-less states: TPMS sensor service prints no number — sensors are at cost plus fitting, quoted by sensor type (the at-cost declaration is the deliverable). Nitrogen fill is a deliberate $0 ledger line, free with any fitting.
Every figure was verified against an independently reimplemented oracle in the QA harness — all 15 band × tier combinations, both toggle states, driven through the live steppers.

Conversion decisions

Above the fold at 375px: wordmark, "tyres fitted and aligned in Wangara — priced per corner" value line, the Quote CTA, the phone, and four trust chips — all before the first scroll, with the sticky call/quote bar pinned beneath.
The signature is the quote path. Every stepper tap ends in the same place: a per-corner price, a set-of-4 total, and a form already carrying the size and tier. The "Quote this setup" button under the ledger is the handoff.
Per-corner pricing is the trust move. Tyre pricing usually hides behind "from $396 a set"; pricing the corner and stating what's inside the number (fitting, balancing, valve, disposal) is the honesty a driver can check on the invoice.
Alignment on by default — with the honest sell ("recommended with any new pair — we show you the printout") and a one-tap opt-out that re-labels the total, so the default never hides.
Form fields: name, phone, suburb, tyre size (pre-filled live from the decoder), tier chips, optional notes. Per-field validation, chalk focus rings, and a designed local confirmation — hidden on load, shown only after a valid submit, stating plainly that no enquiry was sent anywhere.
No emergency-line treatment — a tyre shop's urgency is same-day fitting, so the trust strip carries "fitted same day" and the free 10-minute pressure check instead.

Local SEO we'd implement for the real business

The demo ships only honest WebPage/CreativeWork schema naming it a demonstration — fictional structured data in a real index is dishonest markup. A live build for a real workshop would ship the precise schema.org subtype with real NAP, geo, hours and a review feed:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "TireShop",
  "name": "Chalkline Tyre & Alignment",
  "description": "Tyres supplied and fitted per corner, wheel balancing
    and laser wheel alignment in Wangara, Perth.",
  "url": "https://chalklinetyres.com.au",
  "telephone": "+61 8 XXXX XXXX",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Unit X, XX Example St",
    "addressLocality": "Wangara",
    "addressRegion": "WA",
    "postalCode": "6065",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.793, "longitude": 115.826 },
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
      "opens": "07:30", "closes": "17:00" },
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": "Saturday", "opens": "08:00", "closes": "12:30" }
  ],
  "priceRange": "$45–$1,455",
  "areaServed": ["Wangara","Joondalup","Wanneroo","Madeley","Darch","Landsdale"],
  "review": {
    "@type": "Review",
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "author": { "@type": "Person", "name": "Real Customer" },
    "reviewBody": "Sourced from the workshop's live Google reviews feed."
  }
}
</script>

TireShop is schema.org's exact Store subtype for the trade — the vocabulary uses the US spelling, so a careful Australian build keeps the token as-is and writes "tyre" everywhere humans read. Review markup only ever wraps the shop's real, attributable reviews.

What changes for the real client

Live brand pricing: the three generic tiers become real brand/pattern options priced from the distributor stock feeds the shop already buys through — the band table stays as the honest fallback.
Bookings: the quote form posts into their workshop system (MechanicDesk, Workshop Software, or an AutoGuru listing) with the size and tier already structured.
Real Google reviews feed replacing the demo quotes; real MRB repairer's licence and ABN; their alignment rig's actual printout as the proof artefact.
A rego/plate lookup on the form so the size comes from the vehicle database instead of the sidewall squint — the decoder stays as the explainer.

Iteration log

Pass 1 — Craft

The sidewall marking shipped as one long string ("205/55R16 · TUBELESS RADIAL") centred on the top arc — the screenshot showed the leading digit clipped past the path start and half the text running down the shoulder. Split it: size alone across the top, TUBELESS RADIAL as a second, smaller textPath on the bottom arc — upside-down, the way a real mould reads.
The chalk balance tick sat at −38°, colliding with the relocated marking — moved to the 3 o'clock shoulder, clear of both arcs.
The SVG kept a static 640×560 viewBox sized for the largest tyre, leaving dead margin around the rest-state tyre — tightened to the computed extremes of the biggest geometry (470×470) so every size fills the frame.
Tread read as blue fishnet: lateral bars and circumferential grooves were both blue. Re-cut the lateral grooves dark (rubber gaps) and kept only the two circumferential grooves in wet-road blue.
The 1200×750 capture showed the board as a title strip with no signature (the W19 trap) — tightened the hero rhythm and reordered the board column readout → tyre → decode rows, so the chalk readout and steppers share the thumbnail frame.
Ledger header said "per corner · fitted" beside a row that says the same thing — replaced with the live size, which also confirms the decoder→card link.

Pass 2 — Depth

Second-read details: the tyre is genuinely to scale from the size arithmetic (a 185/70R15 balloons, a 265/40R19 goes rubber-band — the QA harness asserts the silhouette grows with width), and the bottom marking reads upside-down like a real sidewall.
Total-bump micro-interaction: when any control changes the price, the chalk total scales 1.07 for 240 ms — the eye lands on the number that changed. Suppressed under reduced motion.
Dual-speed redraw confirmed: 780 ms staggered entrance on first draw, 420 ms snappy callout re-draw per step, wheel settling in 450 ms — driven and timed via the probe's settled flag.
Rapid-fire drive (eleven control clicks in one evaluate, no settle between, run twice): state, DOM ledger and sidewall marking all land consistent — the token bump in the handler kills in-flight callout and spin frames before each swap.

Pass 3 — Hardening

375px masthead first: wordmark clears the collapsed Call pill, which clears the Quote button; h1, CTA and trust chips all inside the first viewport; sticky call/quote bar holds 54px targets. Page and guide both hold scrollWidth ≤ 375.
Map label contrast lifted: road labels to #8A9099 and the ocean label to #6E8CA3 — the 11.5px strokes were riding under 4.5:1 on the map ground.
Keyboard drive: rim stepper by Enter, tier chip by Enter, alignment switch by Space, FAQ by Enter — all update state correctly with the chalk focus ring visible.
Reduced motion: callouts render fully drawn (dash offset 0), no spin, no pulse, settled flag true immediately; steppers still update instantly.
Form: empty submit raises per-field errors and never shows the panel; a valid submit hides the form and shows the confirmation with the live size. Phone validation is a JS regex, so no v-flag pattern hazards.
Chanel rule: dropped the "//" chalk flourish from the board title — the wordmark keeps it, once is a mark, twice is wallpaper.