Torque

Best for

• Mechanics, service centres and tyre shops. It's written to the new-car warranty rules, the repair information sharing scheme, repairer licensing and the state safety checks (see "Workshops: what we build in").
• Anyone who books jobs in, quotes extras and hands the thing back the same day:
  • bike repairs (Spoke & Chain: fixed-price tunes and a test ride)
  • phone and laptop repairs (Fix Lab: approve each part, no passcode needed)
  • auto electricians, panel beaters, and boat and mower repairs
• Audiences: drivers booking from their phone, people approving work from their desk, and sellers who need a roadworthy this week.

Less suited to: a car dealer (Forecourt), or a parts shop selling online.

Personality and voice

Straight and fair, like a mechanic who rings before doing anything extra and tells you what can wait.

• Headlines: "Fixed prices, no surprises." · "Found something? You decide." · "Where's my car up to?"
• Buttons: "Book a service" · "Go ahead" · "Not now" · "Send my answer"
• Microcopy:
  • "Next logbook service: 60,000 km or 12 months, whichever comes first."
  • "Down to 3 mm. New pads are 10 to 12 mm."
  • "Nothing on this list is done without your OK."
• Words to avoid: "while we were in there", "you'll need to", "dealer-quality", "genuine only (or your warranty's void)", and anything that frightens people into work they don't need.

Colour

Measured contrast (WCAG).

• Workshop:
  • ink on paper 16.2:1
  • muted on paper 5.9:1 (5.3:1 on well)
  • green on paper 7.2:1 (6.5:1 on well and on its soft fill), white on green 8.0:1
  • ink on gauge 10.7:1; gauge ink 6.6:1 (6.5:1 on its soft fill)
  • ok 5.8:1, alert 5.9:1
• After hours:
  • ink 16.6:1
  • muted 7.3:1 (6.7:1 on card)
  • green 10.5:1 (9.7:1 on card), text on green 9.3:1, green on its soft fill 9.1:1
  • gauge 11.2:1 (9.2:1 on its soft fill)
  • ok 11.0:1, alert 9.2:1
• Example dials: Spoke & Chain blue, Fix Lab violet and Bellarine bay blue all meet AA, light and dark, and so does each closing card.

Typography

• Display: Oswald, 500–700, uppercase for headlines and card titles. Workshop signage.
• Body: Overpass, 400–700. It's based on the road-sign typeface. Reading, forms, buttons.
• Mono: Oxygen Mono, 400. Kilometres, job numbers, times, parts and labour.

The signature move: the lit words cross the line. They're set in racing green over a chequered flag strip that's unveiled from left to right.

Layout

• Frame: a 1200px wrap with a max(20px, 4vw) gutter. An ink top line with a yellow label; a sticky header with the rev-gauge mark; a big rev counter under the hero copy, whose needle sweeps up on load and then idles.
• Hero: copy on the left, which stays in view on wide screens; the service booking on the right.
• Then: the quote approval beside its heading; the job tracker with two notices; the inspection finder; questions; and a dark closing card with a gauge whose needle swings to "ready".

Shape

• Engineered: --r-s 6px, --r-m 10px, --r-l 16px.
• Drawn in CSS, no images needed:
  • the gauge mark and the hero rev counter
  • the chequered strip, and the chequered flag that waves in each page head
  • the hatched full days and the chequered progress track

Motion language

• Flag: the chequered strip is unveiled under the lit words.
• Booking and quote: totals rise in when they change; approved jobs get a tick, declined ones are struck through.
• Elsewhere:
  • The hero needle revs and idles.
  • The page-head flag waves.
  • The progress bar fills.
  • The closing needle swings to ready.
  • The mark's needle revs on hover.
  • Sections reveal with a rise.
• Motion switch in the footer ([data-motion-toggle], html.calm, remembered as site-motion, with the default from prefers-reduced-motion). Calm stops all of it.
• After hours switch ([data-theme-toggle]), remembered as site-theme; theme-color follows.

Imagery and illustration

Your own workshop, hoists and people, and photos of the actual parts you quote (worn pads beside new ones). The template draws its gauges and flags in CSS, so nothing is borrowed. Avoid stock photos of mechanics giving a thumbs up, and car makers' logos you aren't licensed to use.

Signature components

• Service booking: .booking[data-booking] (.hero-card in a hero) with script[data-bk-data] (interval km, days, full as day indexes, prices as {service: {engine: $}}, where null means quote first). It contains:
  • input[data-bk-car] and an optional input[data-bk-km]
  • a [data-bk-eng] segmented control and service radios
  • [data-bk-due], [data-bk-days] (the next working days, built by the script, with full days disabled) and extras (data-price, data-label)
  • [data-bk-lines], [data-bk-total], [data-bk-go] and [data-bk-msg]
• Quote approval: .approve[data-approve] with .ap-line items (data-cost, data-urg now, soon or watch), each with a [data-ap-choice] segmented control (yes or no). It also has [data-ap-count], [data-ap-total], [data-ap-go] (disabled until every line is answered) and [data-ap-msg]. The urgency wording can be changed per site (Fix Lab uses "needed for the fix").
• Job tracker: .job[data-job][data-now] with .jb-steps li (.done, .now), [data-jb-fill], [data-jb-step], [data-jb-ready], .jb-log li (one per step) and [data-jb-next] (the demo's stepper).
• Inspection finder: .inspect[data-inspect] with script[data-in-data] (rules as {state: {reason: [check, what]}}), [data-in-state] and [data-in-why] segmented controls, [data-in-name] and [data-in-what]. It ships with NSW, Victoria and Queensland.
• Supporting pieces: .urg (urgency chips), .plan-pair, .card, .facts (--n columns, or .stack), .notice, .side-box, .checks, .faq, .table, .close-card (--close-bg, --close-em).

Multi-page kit

• Phone menu: .menu-btn[aria-controls] opens .site-menu. Escape, an outside click or choosing a link closes it, and Tab stays inside while it's open.
• Current page: aria-current="page", shown as a soft pill.
• Inner pages: .page-head (a chequered flag on a pole), .crumbs, a .tag and a smaller .h1.
• Fields: .field, .fields, .field-wide, fieldset.field-set, .check, .form-card, [aria-invalid="true"]; form[data-template].
• Tiles, segmented control, gate, slider, switch, tables: .choices, .seg, [data-gate], input.range, .switch[role=switch], .table.
• Events:
  • booking (service, engine, total, next, day)
  • approve (yes, no, open, total)
  • job (step)
  • inspect (state, why, check)
• Helper: Torque.refresh(root), and Torque.last, the latest detail of each event, for scripts that load afterwards.

Workshops: what we build in

We checked these for Australian workshops in October 2026:

• New-car warranties: a car maker can require servicing by qualified people, to its schedule, with suitable parts. It can't require dealer servicing. An independent workshop can stamp the logbook, and parts must be of suitable quality but needn't be genuine.
• Repair information: since 1 July 2022, car makers must share service and repair information with independent repairers at a fair market price. The scheme's review was released on 6 February 2026, and the ACCC took Subaru Australia to court over access in August 2026.
• Licences:
  • In NSW, repair businesses need a motor vehicle repairer licence and anyone doing repair work needs a tradesperson certificate.
  • Inspection stations and licensed testers show their numbers. The footer has a slot for each.
• Safety checks:
  • NSW: most light vehicles more than five years old need a yearly eSafety check (pink slip) from an Authorised Inspection Station, valid for six months. Interstate cars, or those unregistered for more than three months, need a blue slip.
  • Victoria: sellers must give the buyer a roadworthy certificate less than 30 days old, from a licensed vehicle tester.
  • Queensland: sellers need a safety certificate from an Approved Inspection Station, displayed before advertising. It lasts two months or 2,000 km.
• Quotes: extra work is quoted and approved before it's done, and declined work is recorded.

These notes are design guidance, not legal advice.

• Car warranties and dealer servicing (CHOICE, quoting the ACCC)
• Right to repair delivering for motorists (Treasury ministers, 6 February 2026)
• ACCC takes Subaru Australia to court (carsales)
• Motor vehicle repairer licence (NSW Government)
• Safety checks and vehicle inspections (NSW Government)
• Selling a car (Consumer Affairs Victoria)
• Safety certificates in Queensland (Repco Service)

Do and don't

• Do show fixed prices, and quote everything else before you do it.
• Do say plainly what's a safety issue and what can wait.
• Do record declined work, so people can come back to it.
• Don't tell people their warranty needs the dealer.
• Don't do extra work "while you were in there" without asking.
• Don't put text on the gauge yellow in anything but ink.

Accessibility

• AA contrast throughout (measured above), a skip link and a 3px focus ring.
• Booking: labelled fields. The days are buttons with aria-pressed and their full dates in hidden text, and full days are disabled and say so. The price and due date are text, and the total is announced.
• Quote: each line's choice is a labelled segmented control. Urgency is in words, not just colour. The count and total are announced, and the send button stays disabled until every line is answered.
• Tracker: the current step and the ready time are text. On phones the step labels give way to "Now: ...".
• Finder: segmented controls; the answer is announced.
• Testing: responsive to 360px, and tested with motion on and off, in Workshop and After hours.

How to make it yours