Every token, chip and component

Cool, slightly blue-cast neutrals — galvanised steel in shade, not pure grey. The low but non-zero chroma is what stops this reading as a default install. Swatch values below are read live from the DOM, so the dark column reports the dark value.

Each tone has a distinct lightness step as well as a hue, so the chips still form a readable ladder when hue collapses. Minimum ΔL between any two warm tones is 0.11 — plus a different icon, a different word, and a hazard stripe on overdue.

The atom of the system. Leading status bar, icon, label, optional trailing meta. Colour is never the only signal, the label is never omitted, and the aria-label is always the full sentence — “Bin RB-014, on site, day 12”.

The signature component: the stencilled number painted on a container flank, rendered as a stamped steel tag with a clipped corner. Identical in every surface — manager table, driver card, customer portal, printed invoice — so a bin number is instantly recognisable as a thing you can click.

Barlow for the interface — a low-contrast grotesk rooted in Californian transport signage. Barlow Condensed for display, labels and asset plates, because condensed uppercase is the vernacular of stencilled container numbers. Azeret Mono for every numeral that sits in a column, because it reads like a scale-ticket printout and guarantees alignment.

4px base radius, deliberately flatter than the shadcn default — soft corners read as consumer SaaS. Hairlines carry structure; shadow is reserved for things that genuinely float. Nothing is a pill except an avatar.

Flat, bordered, no gradient, no icon in a coloured circle, and no animated count-up — a ticking figure is unreadable and unverifiable. The warning footer renders only when it is actionable and non-zero: an absent warning is the good state, and “0 overdue” is never rendered.

Every number that sits in a column is monospaced and tabular. Money is integer cents end to end and the formatter never receives a float; weight is integer pounds because that is what the scale prints, with short tons derived for display.

The order lifecycle drawn as a route, not a vertical stepper — a bin travels a physical line: yard → site → disposal → yard. The delivered-to-picked-up segment is drawn heavy because it is the billable clock, and on this page that is the money. Below md the rail turns vertical with the same node vocabulary.

Driver-captured proof. The metadata is as important as the picture, because this is evidence in a billing dispute — so the timestamp, coordinates, accuracy, distance from the recorded site and the capturing driver are on the face of the card. A GPS mismatch is shown, never suppressed.

Empty is an instruction, not a mood: icon in a hairline square, condensed headline, one sentence, one action. Errors state what failed and what to do — never “Oops!”, never “Something went wrong.” Skeletons are static blocks; a shimmer sweep implies progress that is not happening.

Sorting, filtering, pagination and an empty state, with view state synced to the URL (?fleet_q=, ?fleet_sort=, ?fleet_page=) — never useState. A manager on the phone must be able to paste the URL of exactly what he is looking at, and a refresh must not lose the view. Structure comes from horizontal hairlines only: no zebra, no shadow, no row-enter animation.

The primitive set keeps its shadcn API and gets the industrial treatment in globals.css: Card loses its shadow for a hairline, Badge becomes a rectangle, table heads become condensed uppercase labels, and Button's default variant inherits the hi-vis fill through --primary.

Three archetypes, three densities. The console is compact and desktop-first; the driver view is touch-density, mobile-first and forced-daylight capable; the portal is comfortable and calm. Each is a full-viewport surface, so they are reviewed on their own pages.

Run these before signing off a change to any surface.