UI Tokens
Design tokens — colors, spacing, typography, shadows, and radius for your design system.
Brand Colors
Lime
#B8FB3C
--color-lime
Purple
#a855f7
--color-purple
Cyan
#06b6d4
--color-cyan
Ink
#0a0a0f
--color-ink
Surface
#111118
--color-surface
White/60
rgba(255,255,255,0.6)
--color-text
Typography Scale
Display
60px / 800
The quick fox
Heading 1
48px / 700
The quick fox
Heading 2
36px / 700
The quick fox
Heading 3
24px / 600
The quick brown fox
Body
16px / 400
The quick brown fox jumps over
Small
13px / 400
The quick brown fox jumps over the lazy dog
Label
11px / 600
UPPERCASE LABEL SMALL CAPS
Spacing Scale
xs
4px
sm
8px
md
16px
lg
24px
xl
32px
2xl
48px
3xl
64px
4xl
96px
Border Radius
none
0px
sm
4px
md
8px
lg
12px
xl
16px
2xl
20px
3xl
24px
full
9999px
Shadow Tokens
sm
--shadow-sm
md
--shadow-md
lg
--shadow-lg
glow
--shadow-glow
Opacity Scale
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%