TokensPrimitives

Primitives

The foundation layer of the design system. Raw, immutable values that define colors, spacing, typography metrics, and other fundamental measurements. These tokens are referenced by semantic and component tokens.

308
Total Tokens
22
Color Families
31
Spacing Values
7
Categories

Token Categories

Explore the fundamental building blocks

245 tokens

Colors

22 color families with 11 shades each (50-950), plus base colors

31 tokens

Spacing

31 spacing values from 0px to 256px based on 4px/8px grid

9 tokens

Border Radius

9 radius values from 0px to full (9999px)

8 tokens

Durations

8 animation timing values from 75ms to 1000ms

75ms
150ms
300ms
500ms
1000ms
9 tokens

Font Weights

9 font weight values from thin (100) to black (900)

Light (300)Normal (400)Semibold (600)Bold (700)
6 tokens

Line Heights

6 line height multipliers from 1 to 2

Aa
Aa
Aa
1
Aa
Aa
Aa
1.25
Aa
Aa
Aa
1.5
Aa
Aa
Aa
2

About Primitives

Primitives are the lowest layer in our token architecture. They contain raw, literal values that never reference other tokens. Semantic tokens (like ) reference these primitives to create meaningful, context-aware tokens.

#10b981
Emerald.500
Color.Brand