Tokens

Every value the system paints with. Each swatch prints what the browser actually computed, so the hexes change as you switch brand or theme.

The accent — the only thing a brand changes

Switch the brand in the header. These four move; nothing below them does.

brand-accent · fill
accent-ink · text
accent · 12% tint
ring · focus
Surfaces

Cream and warm white on paper; charcoal and the four-step titanium ramp in the dark.

background
card
muted
sidebar
popover
border
border-strong
input
Ink

Never pure black on cream, never pure white on charcoal. Tertiary is for disabled and hint text only — it is below 4.5:1 by design.

foreground · primary
muted-foreground · secondary
text-tertiary · tertiary
The three semantics

A state, never the brand. The accent says 'this is the subject'; these say what happened.

positive
caution
destructive
The row ladder

Zebra at 1.04:1 is a reading aid, not a decoration. Selection adds a 3px bar because colour alone cannot carry a state at 1.28:1.

row
row-alt · zebra
row-hover
row-selected
row-header · band
Radius, measured

Six on controls, eight on containers, sixteen where a card is a big clickable object, full on a pill. These are the resolved values, read off the rendered page — a comment in the source claims eight and ten, and the browser disagrees with it.

6px · controls
8px · containers
16px · cards
pill
Elevation

A resting surface is a line, not a shadow. Three tiers, and most things use none of them.

resting · a card
overlay · popover, menu
modal · dialog, sheet

The complete list — every declared property with its value and scope — is in Documentation, under “Token reference”. It is generated from the stylesheets, so it cannot go stale.