Reference
Design tokens
Three tiers: primitives hold raw values, semantics name them by job, and the Tailwind bridge turns them into utilities. Components read only the middle tier, which is why the toggle in the corner changes everything on this page and nothing in this page knows about it.
Typography
Two families, one job each
Instrument Serif carries display sizes and nothing else. Inter takes every reading and interface size. The scale is deliberately small: body is 14px and section headings 17px, because a dense tool has no room for a 36px heading.
text-display-hero · Instrument Serif
Know who owes you
text-display-lg
Record a payment
text-display-sm
Payment history
text-body-lg · Inter
Acme Corp has paid 400.00 of 1,000.00. The balance is due on 15 August.
text-body
Acme Corp has paid 400.00 of 1,000.00. The balance is due on 15 August.
text-body-sm · secondary ink
Acme Corp has paid 400.00 of 1,000.00. The balance is due on 15 August.
text-caption · the label size, sentence case
Amount due
tabular-nums · what replaced the mono face
ORD-0001 · 4,556.00
ORD-1111 · 1,111.11
Two families only. Inter carries references and figures with tabular numerals, which is the one thing the monospace face was actually providing.
text-metric-lg · tabular figures
1,000.00
111.11
Digits occupy identical width, so decimal points stack down a column.
Colour
Ink, surface, line
Elevation is tint plus a hairline, not shadow. Surfaces get fractionally darker as they recede in light mode and fractionally lighter in dark, because light travels up: an inversion that copies the light values exactly is the fastest way to make a dark theme look wrong without anyone being able to say why. `surface-inset` is the one that reverses direction on purpose, so a table header reads as a band on its panel rather than a hole punched in it.
bg-surfacebg-surface-raisedbg-surface-sunkenbg-surface-insetbg-surface-canvasbg-surface-inversebg-actiontext-ink
text-ink-muted
text-ink-faint
text-ink-disabled
border-line-subtle
Dividers inside a bordered container.
border-line
The default component edge.
border-line-strong
Selected state. Ink, never a colour.
Brand
Colour lives on the editorial surface
Three hues, sampled from the gradient photographs rather than picked from a wheel, which is why they agree with the artwork and with each other. They appear on the landing page and nowhere inside the product: the accent on a money screen is ink, so the only chroma there is carrying information.
Ember
bg-wash-ember · the coral in signal and ember
Sage
bg-wash-sage · the cool green in mist
Slate
bg-wash-slate · the blue-grey haze in dusk
Status
The only chroma inside the product
Four states, each with a tint, a line and an ink so contrast is decided once. Low chroma on purpose: saturated status colours make a money screen look like a toy, and they stop reading as information. The dot is the list weight; the pill is reserved for a screen where the status is the subject.
PendingPart paidPaidOverdueControls
Press fast, release slow
Press registers in 100ms with a hard ease-out so acknowledgement feels instant. Release takes 160ms with a gentle overshoot so the control settles instead of snapping. Click and hold one: the lit hairline along its top edge goes out as it drops, which is what a real key does when it falls below the plane of the light.
Use a full stop for decimals.
Radius
Five steps, not one value
A single radius applied everywhere flattens hierarchy and is a documented tell of generated design. Small controls sit tighter than the panels holding them. The nesting rule: inner radius equals outer radius minus the gap between them.
rounded-xsrounded-smrounded-mdrounded-lgrounded-xlElevation
Two shadows and one hairline
Shadows are layered rather than one blurred blob: a tight contact shadow plus a wider ambient one, which is how light actually falls. Reserved for things that genuinely float. The relief is separate, an inset highlight in the inset-shadow namespace so it composes with a drop shadow instead of replacing it.
No shadow
Cards, panels, table containers.
shadow-raised
Hover lift on an interactive card.
inset-shadow-relief
One lit pixel along the top edge.
Motion
Entrances, staggered
Movement is transform and opacity only, so nothing here touches layout. Reduced motion removes the movement and keeps the fade, because the fade is the part carrying meaning: it is how the interface says this is new.
Staggered
40ms apart, via --stagger-index
entry
40ms apart, via --stagger-index
animation
40ms apart, via --stagger-index
Editorial
900ms, landing on filter: none
blur
900ms, landing on filter: none
rise
900ms, landing on filter: none
Texture
Grain, on everything
A fixed fractal-noise tile at 5.5% opacity, multiplying on paper and screening on charcoal. It is on this page right now. Zoom in on any flat area and it is visible; at reading distance it is the difference between a printed surface and a screenshot of a colour picker.