Colors

LedgerIt is drawn in Vercel's Geist palette: ten steps per color, each step with a job. Product code never names a step. It names a role, and the role names the step.

Scales

Nine scales of ten steps, plus two backgrounds. The grays build the whole interface; green, red and amber are the money signals, and nothing else is colored.

Theme

gray

gray-alpha

blue

red

amber

green

teal

purple

pink

Point at a step to read its value. Select it to copy the value.

Backgrounds

Two backgrounds. The first is the page and almost everything on it; the second sets a region apart, and is used sparingly.

Theme

background-100 Default. The page, cards, menus and dialogs.
background-200 Secondary. The sidebar, one step off the page.

Steps

Every scale splits the same way, so a step means the same thing in every color.

Component backgrounds100–300100 is the default, 200 the hover, 300 the pressed or selected state.

Borders400–600400 is the default hairline, 500 the hover, 600 the pressed or focused edge.

High-contrast backgrounds700–800700 is a solid fill, 800 its hover. Text on them is white or the page.

Primary textSecondary text

Text and icons900–1000900 is secondary text and tinted text on a 200 fill, 1000 is primary text.

Roles

What product code actually uses. Each role points at one step, so it reads the same in both themes and a retune is one line in globals.css.

Role	Step	Used for
Surfaces
background	background · background-100	Page, cards, menus
sidebar	sidebar · background-200	The sidebar
surface-100	surface-100 · gray-100	Recessed areas, hover
surface-200	surface-200 · gray-200	Pressed, skeletons
Edges
line	line · gray-400	Hairlines
line-strong	line-strong · gray-500	Outlined controls, emphasis rules
input	input · gray-800gray-600 in dark	Control edges, 3:1 on every surface
Text
ink-muted	ink-muted · gray-900	Secondary text
ink	ink · gray-1000	Text
Where you areInk and gray, not a hue: the only color in the interface is money.
ledger	ledger · gray-1000	Checked controls, the active nav icon, new
ledger-soft	ledger-soft · gray-200	Its tint
ring	ring · gray-900	Focus rings
hover	hover · gray-alpha-100	Anything you can touch, under the pointer
selection	selection · gray-300	Selected text
MoneyAlways with a sign or a word, so money in and money out never rest on red and green alone.
positive	positive · green-900	Money in, reconciled
positive-soft	positive-soft · green-200	Positive badge fill
negative	negative · red-900	Money out when flagged, errors
negative-soft	negative-soft · red-200	Negative badge fill
warning	warning · amber-900	Needs review
warning-soft	warning-soft · amber-200	Warning badge fill