Design tokens
Primitives = raw, theme-invariant scales. Semantics = role tokens that carry meaning and flip per theme, aliasing into the primitives. Toggle the catalog theme to see the semantics change.
Colour ramps
Raw, theme-invariant. Base step (500) = exact brand hex. Semantics alias into these.
red50
100
200
300
400
500
600
700
800
900
amber50
100
200
300
400
500
600
700
800
900
green50
100
200
300
400
500
600
700
800
900
primary300
400
500
600
700
Alpha ladders
Translucent ink ramps; these flip per theme (fg = on-dark ink, ov = on-light ink).
alpha-fg025
050
100
200
300
400
500
600
700
800
900
alpha-ov050
100
200
300
400
500
600
700
800
900
Type scale (px)
Canonical pixel scale. T-shirt aliases: 2xs · xs · sm · base · md · lg · xl · 2xl · 3xl
9pxThe quick brown fox jumps over the lazy dog10pxThe quick brown fox jumps over the lazy dog11pxThe quick brown fox jumps over the lazy dog12pxThe quick brown fox jumps over the lazy dog13pxThe quick brown fox jumps over the lazy dog14pxThe quick brown fox jumps over the lazy dog15pxThe quick brown fox jumps over the lazy dog16pxThe quick brown fox jumps over the lazy dog18pxThe quick brown fox jumps over the lazy dog20pxThe quick brown fox jumps over the lazy dog24pxThe quick brown fox jumps over the lazy dog32pxThe quick brown fox jumps over the lazy dogSpacing scale
4px base unit.
1 · 4px2 · 8px3 · 12px4 · 16px6 · 24px8 · 32px10 · 40px16 · 64pxRadius scale
xssmmdlgxlpillElevation scale
shadow-1shadow-2shadow-3Easing
Primitive curves; component animations compose these.
ease-quickease-standardease-emphasis