Tokens index

Visual catalog of every token in colors_and_type.css. Useful as a landing page in the dev server, and as a check that nothing's been added inline without being promoted to a token.

Surfaces

--bg-0page

--bg-1card

--bg-2nested

--bg-3input

--bg-4pressed

Text

--fg-0primary

--fg-1secondary

--fg-2muted

--fg-3disabled

Accent + status

--accentprimary

--accent-hover

--accent-active

--status-success

--status-warn

--status-error

--status-info

Radii

--radius-xs

--radius-sm

--radius-md

--radius-lg

--radius-xl

Type scale

--type-xs · The quick brown fox

--type-sm · The quick brown fox

--type-base · The quick brown fox

--type-md · The quick brown fox

--type-lg · The quick brown fox

--type-xl · The quick brown fox

Motion

--dur-flip · --dur-panel · --dur-route · --dur-soft · --ease-out · --ease-in-out — see motion specimen for live demos.