Design system
A calm, dark workshop: graphite surfaces, one signal-blue accent for the primary action, and four status colors that always come with a word. Components use tokens only, never raw color values.
Color tokens
Dark (default)
Surfaces
-
--bg -
--surface -
--surface-raised -
--surface-hover -
--line -
--line-strong
Ink
-
--ink -
--ink-muted -
--ink-faint
Accent
-
--accent -
--accent-strong -
--on-accent -
--accent-soft
Status
-
--overdue -
--overdue-soft -
--soon -
--soon-soft -
--ok -
--ok-soft -
--watch -
--watch-soft
Charts and systems
-
--chart-1 -
--chart-2 -
--chart-3 -
--chart-4 -
--chart-5 -
--chart-6 -
--chart-7 -
--chart-8
Light
Surfaces
-
--bg -
--surface -
--surface-raised -
--surface-hover -
--line -
--line-strong
Ink
-
--ink -
--ink-muted -
--ink-faint
Accent
-
--accent -
--accent-strong -
--on-accent -
--accent-soft
Status
-
--overdue -
--overdue-soft -
--soon -
--soon-soft -
--ok -
--ok-soft -
--watch -
--watch-soft
Charts and systems
-
--chart-1 -
--chart-2 -
--chart-3 -
--chart-4 -
--chart-5 -
--chart-6 -
--chart-7 -
--chart-8
Type
Barlow Condensed for car names and big numbers, Inter for UI, JetBrains Mono for part numbers.
| Style | Sample | Use |
|---|---|---|
display-xl | 104,978 mi | Welcome headline |
display-lg | 104,978 mi | Car name on the car page |
display-md | 104,978 mi | Page and section titles |
odometer | 104,978 mi | Odometer, big mileage |
title | 104,978 mi | Card and modal titles |
heading | 104,978 mi | Group headings |
body | 104,978 mi | Default text |
body-sm | 104,978 mi | Secondary lines, dense tables |
caption | 104,978 mi | Helper text, units |
mono | 8R0615301D | Part numbers, VINs |
Rules
- One primary button per view. Everything else is secondary or ghost.
- Status is a pill with a word: Overdue, Soon, Watch, Done, Condition.
- Cards use a 1 px line, not shadows. Only overlays get a shadow.
- Unverified data gets the Soon style plus the word “Unverified”.
- Focus: a 2 px accent outline with a 2 px offset on every interactive element.