Brand Tokens
One design system for the admin app and the public site. Components read tokens; components never hardcode color.
Logo
A bridge deck over a road, ruled like a ledger line, closing into a check
Minimum clear space equals the height of the bridge deck. Never stretch, recolor outside the token palette, or add effects.
Color tokens
Defined once in styles.css; every surface reads from these
--background
Page canvas
--foreground
Primary text
--card
Panel surface
--primary
Deep navy — headers, sidebar, primary buttons
--accent
Electric teal-green — action and momentum
--muted
Quiet surfaces and table headers
--success
Money in, on-time, verified
--warning
Needs attention before it costs money
--danger
Past due, missing title, compliance risk
--border
Hairlines and dividers
Typography
Display / headings
More people approved. More vehicles moving.
Body
Operational copy stays plain and specific. Say what a number means and what to do next — no jargon, no pressure language.
Numeric
$18,432.65 · 84,120 mi · 17.9% APR
Status language
Tone is assigned by meaning, not by guesswork