Color System
Complete color palette with 11 shades per scale. Click any swatch to copy its hex value.
Primary
Secondary
Neutral
Success
Warning
Error
Typography Scale
Inter · Major Third (1.25) · Base 16px
6xl
Design Tokens
76.3px800
5xl
Design Tokens
61px700
4xl
Design Tokens
48.8px700
3xl
Design Tokens
39.1px600
2xl
Design Tokens
31.3px600
xl
Design Tokens
25px500
lg
Design Tokens
20px500
base
Design Tokens
16px400
sm
Design Tokens
12.8px400
xs
Design Tokens
10.2px400
Spacing Scale
Base unit: 4px · Multiplied across a consistent scale
px
1px · 0.0625rem
0.5
2px · 0.125rem
1
4px · 0.25rem
1.5
6px · 0.375rem
2
8px · 0.5rem
3
12px · 0.75rem
4
16px · 1rem
5
20px · 1.25rem
6
24px · 1.5rem
8
32px · 2rem
10
40px · 2.5rem
12
48px · 3rem
16
64px · 4rem
20
80px · 5rem
24
96px · 6rem
Shadow System
Six elevation levels with subtle color tinting from your primary color.
Border Radius
Style: Rounded · Seven radius values from none to full
Live Preview
Your tokens applied to real UI components — card, form, buttons, and status badges.
TL
TokenLab
Design Token Generator
Generate a complete design token system from your brand in seconds. Perfect for designers and developers building consistent products.
Create Account
ActivePendingInactive