Design tokens
Color, typography, and spacing — every visual decision on this site defined as a token. Each panel below renders the same tokens under a different mode and expression, using the same CSS cascade the footer toggle applies to the whole page.
light · default
Typography
H1Display heading
H2Section heading
H3Sub-heading
H4Card heading
LeadLead paragraph
BodyBody text
SmallSupporting text
Labellabel · tag
Color
Primitives
Neutral
50
100
200
300
400
500
600
700
800
900
Semantic
Surfaces
Primary
Secondary
Tertiary
Inverse
Spotlight
Text
Primary
Secondary
Inverse
Frozen-primary
Frozen-secondary
Accent
Default
Hover
Bold
Bold-hover
Foreground
Glow
Borders
Default
Strong
Focus
Feedback
Error
Error-background
Error-foreground
Error-border
Success-background
Success-foreground
Success-border
Warning-background
Warning-foreground
Warning-border
Info-background
Info-foreground
Info-border
Spacing
tight-gap
4px
inline-gap
8px
label-gap
12px
element-gap
16px
component-gap
24px
layout-margin
clamp(1.25rem, 4vw, 2rem)
section-gap
clamp(3rem, 8vw, 5rem)
Motion
interaction
200ms
reveal-delay
300ms
skeleton
400ms
transition
400ms
reveal
400ms
entrance
600ms
spin
700ms
Radius
interactive4px
component8px
image0.75rem
pill9999px
Opacity
disabled0.1
overlay0.3
light · bold
Typography
H1Display heading
H2Section heading
H3Sub-heading
H4Card heading
LeadLead paragraph
BodyBody text
SmallSupporting text
Labellabel · tag
Color
Primitives
Neutral
50
100
200
300
400
500
600
700
800
900
Semantic
Surfaces
Primary
Secondary
Tertiary
Inverse
Spotlight
Text
Primary
Secondary
Inverse
Frozen-primary
Frozen-secondary
Accent
Default
Hover
Bold
Bold-hover
Foreground
Glow
Borders
Default
Strong
Focus
Feedback
Error
Error-background
Error-foreground
Error-border
Success-background
Success-foreground
Success-border
Warning-background
Warning-foreground
Warning-border
Info-background
Info-foreground
Info-border
Spacing
tight-gap
4px
inline-gap
8px
label-gap
12px
element-gap
16px
component-gap
24px
layout-margin
clamp(1.25rem, 4vw, 2rem)
section-gap
clamp(3rem, 8vw, 5rem)
Motion
interaction
200ms
reveal-delay
300ms
skeleton
400ms
transition
400ms
reveal
400ms
entrance
600ms
spin
700ms
Radius
interactive4px
component8px
image0.75rem
pill9999px
Opacity
disabled0.1
overlay0.3
dark · default
Typography
H1Display heading
H2Section heading
H3Sub-heading
H4Card heading
LeadLead paragraph
BodyBody text
SmallSupporting text
Labellabel · tag
Color
Primitives
Neutral
50
100
200
300
400
500
600
700
800
900
Semantic
Surfaces
Primary
Secondary
Tertiary
Inverse
Spotlight
Text
Primary
Secondary
Inverse
Frozen-primary
Frozen-secondary
Accent
Default
Hover
Bold
Bold-hover
Foreground
Glow
Borders
Default
Strong
Focus
Feedback
Error
Error-background
Error-foreground
Error-border
Success-background
Success-foreground
Success-border
Warning-background
Warning-foreground
Warning-border
Info-background
Info-foreground
Info-border
Spacing
tight-gap
4px
inline-gap
8px
label-gap
12px
element-gap
16px
component-gap
24px
layout-margin
clamp(1.25rem, 4vw, 2rem)
section-gap
clamp(3rem, 8vw, 5rem)
Motion
interaction
200ms
reveal-delay
300ms
skeleton
400ms
transition
400ms
reveal
400ms
entrance
600ms
spin
700ms
Radius
interactive4px
component8px
image0.75rem
pill9999px
Opacity
disabled0.1
overlay0.3
dark · bold
Typography
H1Display heading
H2Section heading
H3Sub-heading
H4Card heading
LeadLead paragraph
BodyBody text
SmallSupporting text
Labellabel · tag
Color
Primitives
Neutral
50
100
200
300
400
500
600
700
800
900
Semantic
Surfaces
Primary
Secondary
Tertiary
Inverse
Spotlight
Text
Primary
Secondary
Inverse
Frozen-primary
Frozen-secondary
Accent
Default
Hover
Bold
Bold-hover
Foreground
Glow
Borders
Default
Strong
Focus
Feedback
Error
Error-background
Error-foreground
Error-border
Success-background
Success-foreground
Success-border
Warning-background
Warning-foreground
Warning-border
Info-background
Info-foreground
Info-border
Spacing
tight-gap
4px
inline-gap
8px
label-gap
12px
element-gap
16px
component-gap
24px
layout-margin
clamp(1.25rem, 4vw, 2rem)
section-gap
clamp(3rem, 8vw, 5rem)
Motion
interaction
200ms
reveal-delay
300ms
skeleton
400ms
transition
400ms
reveal
400ms
entrance
600ms
spin
700ms
Radius
interactive4px
component8px
image0.75rem
pill9999px
Opacity
disabled0.1
overlay0.3