Color Palette
primary
50
100
200
300
400
500
600
700
800
900
950
secondary
50
100
200
300
400
500
600
700
800
900
950
accent
50
100
200
300
400
500
600
700
800
900
950
neutral
50
100
200
300
400
500
600
700
800
900
950
dark
50
100
200
300
400
500
600
700
800
900
950
Semantic Colors
bg-primary
bg-surface
bg-card
text-primary
text-secondary
text-on-action
action-primary
action-primary-hover
border-default
border-faint
Typography
Heading 5XL
Heading 3XL
Heading XL
Body text at base size. This paragraph demonstrates the body font, weight, line height, and secondary text color. All values are driven by design tokens and update in real time.
const mono = "JetBrains Mono";Spacing Scale
14px
28px
312px
416px
624px
832px
1248px
1664px
Proof Components
Buttons
Cards
Design Tokens
Foundation colors cascade through semantic assignments to every component automatically.
Typography
Font families, sizes, weights, and line heights all respond to token changes in real time.
Spacing
A base unit drives the entire spacing scale, keeping proportions consistent throughout.