Forecourt

Best for

• Car dealers, new and used. It's written to the advertised price, credit advertising and used car warranty expectations (see "Dealers: what we build in").
• Anyone selling big-ticket things with on-costs and finance:
  • boat dealers (Saltline: ready-to-launch prices with both registrations, engine hours)
  • e-bike and bike shops (Ride Republic: ready-to-ride prices, used bikes with battery health)
  • caravans and campers, motorbikes, farm machinery, used equipment
• Audiences: buyers comparing real drive-away prices, people who want to know what's wrong with a used car before they visit, and anyone weighing finance against cash.

Less suited to: a car hire company (Turndown), a mechanic (Signal), or a single-brand manufacturer's site.

Personality and voice

Bold and blunt, the honest salesperson: every number on the table, and the flaws said first.

• Headlines: "Every price, drive away." · "Six cars, no surprises." · "Finance, with the real rate."
• Buttons: "See the cars" · "Price it in full" · "Book a test drive"
• Microcopy:
  • "Stamp duty (NSW: $3 per $100 to $45,000, then $5 per $100), on $32,980, paid to the state"
  • "7.99% p.a. interest · 9.10% p.a. comparison rate*"
  • "Small scratch, rear bumper. About 4 cm; we'll touch it up if you'd like."
• Words to avoid: "plus on-road costs" with no total, "from $99 a week" without the comparison rate and its warning, "immaculate" and "like new", and "drive away today!" pressure.

Colour

Measured contrast (WCAG).

• Showroom:
  • ink on paper 17.3:1
  • muted on paper 5.8:1 (5.4:1 on well)
  • orange on paper 6.4:1 (6.0:1 on well, 5.8:1 on its soft fill), white on orange 6.9:1
  • ink on yellow 12.7:1; yellow on the black total 12.7:1; yellow text 6.1:1
  • ok 6.1:1, alert 6.3:1
• Night drive:
  • ink 16.8:1
  • muted 8.0:1 (7.3:1 on card)
  • orange 9.3:1, text on orange 8.7:1, orange on its soft fill 8.0:1
  • ok 10.8:1, alert 9.4:1
• Example dials: ocean (Saltline), green (Ride Republic) and deep sea blue (Coastline) all meet AA, and so does each closing card.

Typography

• Display: Barlow Condensed, 500–800, uppercase. Headlines, car names, prices.
• Body: Barlow, 400–700. Reading, forms, buttons.
• Mono: Chivo Mono, 400–600. Kilometres, specs, prices in lists, rates.

The signature move: the lit words go italic and burnt orange, and a yellow speed stripe sweeps in underneath them.

Layout

• Frame: a 1200px wrap with a max(20px, 4vw) gutter. An ink top line with a yellow label for this week's stock; a sticky header with the speedo mark; diagonal hatching on the right of the hero.
• Hero: copy on the left; the drive-away price of a featured car on the right.
• Then: the stock finder; finance beside the condition report; test drives and trade-ins; straight answers; and a black closing card with road markings racing along the bottom.

Shape

• Crisp: --r-s 4px, --r-m 8px, --r-l 12px.
• Cars: drawn in CSS, any colour, on a road with a speed stripe. Never another dealer's photos.
• The mark: a speedo, an arc with the needle up.

Motion language

• Stock: cards lift on hover; the picked car gets an outline; sorting reorders them.
• Drive-away: the total slides in when the car changes.
• Finance: the repayment slides in when the deposit or term changes.
• Elsewhere: the speed stripe sweeps under the headline, the closing card's road markings race, sections reveal with a 14px rise over 650ms, and the phone menu drops in.
• Motion switch in the footer ([data-motion-toggle], html.calm, remembered as site-motion, with the default from prefers-reduced-motion). Calm stops the sweep, slides and road.
• Night drive switch ([data-theme-toggle]), remembered as site-theme; theme-color follows.

Imagery and illustration

Your own photos of your own stock, in daylight, from all sides, including the damage you've listed. The template draws cars so nothing is borrowed. No invented reviews or "sold!" stickers.

Signature components

• Stock finder: .stock[data-stock] (with data-unit and data-units), containing:
  • .stock-bar with select[data-f-make], .seg[data-f-body], .seg[data-f-fuel], input[data-f-max] with [data-f-max-out], and select[data-sort]
  • [data-stock-count], .cars, and .stock-none
  • .car with data-make, data-body, data-fuel, data-price (drive away), data-car (the car alone), data-year, data-km and data-used, each holding a .carpic (--c for its colour) and button[data-price-it] (a #id to scroll to, or a page to open)
• Drive-away price: .driveaway[data-driveaway] with data-for, data-duty (nsw or none), data-car and data-used, containing script[data-da-items] (rows of label, amount, note, whether it's for new or used cars only, and whether it's dutiable), [data-da-lines] and [data-da-total].
• Finance: .finance[data-finance] with data-for, data-rate, data-estab, data-monthly-fee and data-price, containing input[data-deposit], button[data-term], [data-repay], [data-rates], [data-fin-lines] and the .fin-warn.
• Condition report: .condition with .checks > li.ok|.note, .wear rows (--v for the percentage left) and .warranty.
• Supporting pieces: .buy-grid, .card, .facts, .notice, .side-box, .faq, .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 an orange-soft pill.
• Inner pages: .page-head (diagonal hatching on the right), .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: stock (shown), car (name, year, price, car, used), driveaway (total, car, duty), finance (amount, months, monthly, comparison).
• Helper: Forecourt.refresh(root).

Dealers: what we build in

We checked these for Australian dealers in October 2026:

• One total price. Under the Australian Consumer Law, a price shown in parts needs a single total at least as prominent. Every car's headline price is its drive-away total, and the breakdown shows each part, including stamp duty by the state's rule (NSW: $3 per $100 up to $45,000, then $1,350 plus $5 per $100 above, on the higher of price and market value).
• Credit advertising. An advertised interest rate for consumer credit comes with a comparison rate and the prescribed warning, worked out for a standard $30,000 loan over five years; the estimate says it isn't an offer and names who lends.
• Used car warranties and checks. NSW dealers give a statutory warranty of 3 months or 5,000 km on cars under 10 years old and 160,000 km; the condition report says so, shows the PPSR check, and lists faults in writing. Consumer guarantees apply on top.
• No card surcharges. Surcharging on eftpos, Mastercard and Visa ended on 1 October 2026.
• Responsible lending. The finance page explains the lender's assessment and points to hardship help and the National Debt Helpline.

These notes are design guidance, not legal or financial advice.

• Check motor vehicle stamp duty (Service NSW)
• Displaying prices (business.gov.au)
• Card surcharging to end on 1 October 2026 (RBA)

Do and don't

• Do lead with the drive-away price, and show what's in it.
• Do show the comparison rate and the warning whenever a rate appears.
• Do list faults on used cars, in writing, with photos.
• Don't advertise "plus on-roads" without the total.
• Don't use "immaculate", "like new" or invented reviews.
• Don't put text on the yellow in anything but ink.

Accessibility

• AA contrast throughout (measured above), a skip link and a 3px focus ring.
• Stock finder: labelled selects, segmented controls and slider; the count of matching cars is announced; every car's button says what it does.
• Drive-away: a list of lines and a total that's announced.
• Finance: labelled deposit slider, a segmented term, and the repayment and rates announced politely.
• Condition report: checks in words, wear as numbers beside the bars.
• Forms: labelled fields, errors listed in an alert, linked to and marked on each field.
• Testing: responsive to 360px, and tested with motion on and off, in Showroom and Night drive.

How to make it yours