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
Text
Primary
Secondary
Inverse
Accent
Default
Hover
Foreground
Borders
Default
Strong
Focus
Feedback
Error
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
transition
400ms
reveal
400ms
entrance
600ms
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
Text
Primary
Secondary
Inverse
Accent
Default
Hover
Foreground
Borders
Default
Strong
Focus
Feedback
Error
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
transition
400ms
reveal
400ms
entrance
600ms
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
Text
Primary
Secondary
Inverse
Accent
Default
Hover
Foreground
Borders
Default
Strong
Focus
Feedback
Error
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
transition
400ms
reveal
400ms
entrance
600ms
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
Text
Primary
Secondary
Inverse
Accent
Default
Hover
Foreground
Borders
Default
Strong
Focus
Feedback
Error
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
transition
400ms
reveal
400ms
entrance
600ms
Radius
interactive4px
component8px
image0.75rem
pill9999px
Opacity
disabled0.1
overlay0.3