Greaseboard design system

Component kit

The living implementation of docs/04-design-spec.md — every token and primitive, in both themes. Flip the theme and everything holds.

Color

tokens from the spec — theme-aware
paper--paper
surface--surface
sunken--sunken
line--line
ink--ink
steel--steel
amber--amber
amber-ink--amber-ink

Type

Barlow Semi Condensed · Inter · JetBrains Mono
Aa
Barlow Semi Condensed — headings & big numbersHighway-signage DNA. 600/700 only.

Inter carries the body. Plain, brief, shop-fluent — units, ROs, PMs, cores. Buttons say what happens.

Identifiers always set in mono: VIN 1XKAD49X1KJ211440 · UNIT T-114 · RO-10041

$14,280.00 · $2,430.50 · 6/8

Buttons

one hi-vis action per screen, never two
Estimates land in Phase 3 — this button explains itself

Work-order statuses

color + icon + label, never color alone
DraftEstimate sentApprovedIn progressWaiting on partsQuality checkReadyPaidOverdue

Forms

labels above · validate on blur · drafts autosave

The fleet's own ID — the primary handle everywhere.

That doesn't look like an email — check for a typo.

Scoreboard tiles

Quotes at risk
$14,280
6 open — oldest is 9 days
Units in shop
11
4 in progress
Techs clocked on
6/8
2 on lunch

Drawer & toasts

drawers over modals · undo over confirm

Empty state

never blank — explain + one action

No units yet

Units are the trucks and trailers you service — each one keeps its specs, meters, and full history. Add your first, or import the whole fleet from a spreadsheet.

Motion

120 / 180 / 240ms · one easing · no bounce
Hover and press anything above — micro-interactions run 120ms, state changes 180ms, drawers 240ms, all on cubic-bezier(0.2, 0, 0, 1).