Crate

Best for

• Removalists, local and interstate. It's written to the state consumer guidance on removalists (see "Removalists: what we build in").
• Anyone who prices a job by what's in the house:
  • house cleaners (Spark: rooms and extras become the team, the time and the price)
  • self storage (Stackd: an inventory picks the unit size, with storage cover)
  • rubbish removal, furniture delivery, piano movers, office relocations
• Audiences: people moving house who've been burnt before, anyone comparing quotes line by line, and renters who need a date and a window they can plan around.

Less suited to: a trade that quotes after a site visit only (Signal), a storage facility selling by the square metre alone, or a courier.

Personality and voice

Sturdy and plain, the crew leader who tells you the clock rules before the job starts.

• Headlines: "Moving, priced in full." · "Hourly or fixed, you choose." · "When the clock starts and stops."
• Buttons: "Price my move" · "Get a written quote" · "Send for a written quote"
• Microcopy:
  • "4-tonne truck, 2 movers. About 2 h 45 min to 3 h 30 min, including 25 minutes' drive"
  • "Travel from our depot, a flat fee (not on the clock) $120"
  • "We'll arrive between 7–9 am on Saturday 24 Oct, and text you 30 minutes before."
• Words to avoid: "fully insured" when only the truck is, "from $99 an hour" with no minimum or travel charge, "door to door" when the clock starts at the depot, and "book now, limited spots!" pressure.

Colour

Measured contrast (WCAG).

• Daylight:
  • ink on paper 15.6:1
  • muted on paper 6.0:1 (5.5:1 on well)
  • brick on paper 6.3:1 (5.7:1 on well, 5.6:1 on its soft fill), white on brick 7.0:1
  • ink on kraft 8.8:1; kraft text 6.0:1 (5.4:1 on its soft fill)
  • brick on the packing tape 4.2:1 (headline size only, where AA asks 3:1)
  • ok 5.8:1
• After hours:
  • ink 16.1:1
  • muted 7.4:1 (6.8:1 on card)
  • brick 9.2:1, text on brick 8.9:1, brick on its soft fill 7.9:1
  • kraft text 10.7:1, ok 10.5:1
  • the tape fades to 30% so the lit words keep 4.6:1 on it
• Closing card: ink-white 14.5:1, kraft em 9.7:1.
• Example dials: teal (Spark), blue (Stackd) and eucalypt green (Cartwheel) all meet AA, light and dark, and so does each closing card.

Typography

• Display: Rubik, 500–900. Headlines, prices, truck names.
• Body: Noto Sans, 400–700. Reading, forms, buttons.
• Mono: Ubuntu Mono, 400 and 700. Volumes, rates, quantities, labels.

The signature move: the lit words go brick red and a strip of kraft packing tape is pulled across under them.

Layout

• Frame: a 1200px wrap with a max(20px, 4vw) gutter. An ink top line with a kraft label; a sticky header with the carton mark; a tall kraft box leaning behind the hero (hidden on phones).
• Hero: copy on the left; the inventory on the right.
• Then: the price beside the arrival windows; when the clock starts and stops; the cover chooser beside the plain-words notices; straight answers; and a dark closing card with a stack of cartons that wobbles.

Shape

• Sturdy: --r-s 8px, --r-m 12px, --r-l 18px. Cards sit on a soft shadow with a hairline.
• The truck: drawn in CSS, a kraft box body that grows with the truck size, a brick cab and two wheels. Storage uses a roller-door unit instead (.truck-pic.unit).
• The mark: a carton with a strip of tape.

Motion language

• Inventory: the volume bar fills and the truck body stretches as you add things.
• Price: the cheaper option is outlined in brick.
• Elsewhere: the tape is pulled across under the headline, the closing card's top carton wobbles, 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 tape, the bar, the truck and the wobble.
• After hours switch ([data-theme-toggle]), remembered as site-theme; theme-color follows.

Imagery and illustration

Your own crew and trucks, at work, in uniform. The template draws trucks and cartons so nothing is borrowed. No invented reviews, "5-star" badges or before-and-after photos you didn't take.

Signature components

• Inventory: .inventory[data-inventory] with data-trucks (JSON rows of capacity, name and crew), data-crew-word, data-noun, data-vol-unit, data-passes (2 for load and unload, 1 for cleaning), and optional data-truck-line, data-sub (with {truck}, {crew}, {word}, {vol}, {cap}, {pct}) and data-empty, containing:
  • button[data-show-room] and .inv-room[data-room] panels
  • .item with data-vol and data-mins, each with button[data-q="1"], button[data-q="-1"] and an output
  • optional input[data-drive] with [data-drive-out], and input[data-stairs] (data-stairs-factor on the inventory, 1.25 by default)
  • [data-vol-out], .vol .bar i, .truck-pic, [data-truck-name] and [data-truck-sub]
• Price: .pricing[data-pricing] with data-for (the inventory), data-slots (the windows), data-rates (JSON of crew size to hourly rate), data-min, data-callout, data-weekend-extra, data-included, and optional data-crew-line and data-callout-label, containing input[data-weekend], [data-opt-hourly] [data-hourly], [data-opt-fixed] [data-fixed], [data-verdict] and [data-pr-lines]. Fixed is the top of the hourly range plus 5%, rounded up to $10.
• Arrival windows: .slots[data-slots] with script[data-slots-data] (days, closed weekdays, windows as label and note, bookedAhead as day offset and window), [data-days], [data-wins] and [data-slot-msg].
• Cover: .cover[data-cover] with input[data-declared] and [data-declared-out], radios with data-rate (a percentage) and data-min, or data-flat (and data-zero for its label at $0), each with data-says (with {cost} and {value}), and [data-cover-out].
• Supporting pieces: .plan-pair, .card, .facts (--n columns, or .stack), .notice, .side-box, .checks, .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 a brick-soft pill.
• Inner pages: .page-head (a taped carton in the corner), .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: inventory (vol, crew, truck, low, high, items), pricing (hourlyLow, hourlyHigh, fixed), slot (date, dow, window), cover (declared, cost).
• Helper: Crate.refresh(root).

Removalists: what we build in

We checked these against the NSW, Queensland and WA consumer guidance on removalists in October 2026:

• A written, itemised quote. NSW Fair Trading says to get a written quote that's itemised so every charge can be explained, and WA's Consumer Protection asks for the terms and either an hourly rate or a fixed price. The price explainer shows both, with every line, and the forms ask for a written quote rather than booking on the spot.
• When the clock starts and stops. Queensland suggests asking where the journey's cost starts and ends. The template answers it on the page: from your door to the last item in place, with depot travel as a flat fee and breaks not charged.
• Insurance in plain words. Removalists aren't required to insure your goods and most insure only their vehicles, so the cover chooser says what the business's own care covers, what it doesn't, and what transit insurance costs, and the copy suggests checking your home and contents policy and asking for a certificate of currency. A quote never says the business accepts no responsibility; WA says it will act on such clauses.
• Nothing upfront. WA says not to pay upfront and Queensland calls upfront payments risky, so the templates take no deposit and payment is due when the job's done, never part-way through.
• Storage and delays. Storage charges and the cost of holding goods if moving day slips are stated before you book.
• No card surcharges. Surcharging on eftpos, Mastercard and Visa ended on 1 October 2026.

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

• Choosing a removalist (NSW Government)
• Using a removalist (Queensland Government)
• Choose your removalist wisely (Consumer Protection WA)
• Card surcharging to end on 1 October 2026 (RBA)

Do and don't

• Do show the minimum, the travel charge and what's included next to every rate.
• Do say when the clock starts and stops.
• Do say plainly that most removalists insure only their trucks.
• Don't ask for payment upfront or part-way through.
• Don't say "fully insured" or use invented reviews.
• Don't put text on kraft in anything but ink.

Accessibility

• AA contrast throughout (measured above), a skip link and a 3px focus ring.
• Inventory: every plus and minus button names its item, each count is announced, rooms are a segmented control, and the volume, truck and time are announced politely.
• Price: both prices and the verdict are announced; the lines are a list.
• Arrival windows: days and windows are buttons with full spoken dates, closed days and booked windows are disabled and say so, and focus stays on what you chose.
• Cover: a labelled slider and a radio group; the explanation is announced.
• 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 Daylight and After hours.

How to make it yours