The real
tokens.
This page reads the live CSS variables the build compiles from DESIGN.md. Toggle the theme in the header and watch them change.
Color
Aa
canvas
--canvas
…
Aa
surface
--surface
…
Aa
surface-raised
--surface-raised
…
Aa
ink
--ink
…
Aa
body
--body
…
Aa
muted
--muted
…
Aa
primary
--primary
…
Aa
on-primary
--on-primary
…
Aa
accent
--accent
…
Aa
link
--link
…
Aa
success
--success
…
Aa
warning
--warning
…
Aa
danger
--danger
…
Aa
hairline
--hairline
…
Typography
Display, sentence case
--font-display
…
Body copy in the sans face. Plain, concrete, readable.
--font-sans
…
mono for code and identifiers
--font-mono
…
Display sizes
Aa
Heading
Subhead
Radius
sm
rounded-sm
…
md
rounded-md
…
lg
rounded-lg
…
pill
rounded-pill
…
Elevation
The house style is flat. Depth comes from hairline borders and the raised surface tone, not heavy shadows.
Level 0
surface, no border
Level 1
surface + hairline
Level 2
surface-raised + hairline