Brand Token Studio
Free
Client-Side
Try an Example
Midnight SaaS
Warm Editorial
Neon Startup
Projects
Save
Share
Brand Name
Brand name (optional)
Colors
Edit dark mode
Primary
Secondary
Accent
Neutral base
Success
Warning
Error
Info
Primary (dark)
Secondary (dark)
Accent (dark)
Neutral base (dark)
Success (dark)
Warning (dark)
Error (dark)
Info (dark)
Auto-generate dark from light
Typography
Font family
Inter
Roboto
Poppins
Lora
Playfair Display
Space Grotesk
JetBrains Mono
Source Sans 3
Merriweather
DM Sans
Type scale ratio
Minor Third (1.200)
Major Third (1.250)
Perfect Fourth (1.333)
Augmented Fourth (1.414)
Perfect Fifth (1.500)
Base font size (px)
Font weights
300
400
500
600
700
900
Spacing
Base unit (px)
Stops: xs=1x, sm=2x, md=4x, lg=6x, xl=8x, 2xl=12x, 3xl=16x
Border Radii
sm (px)
md (px)
lg (px)
xl (px)
Shadows
sm
md
lg
xl
Preview light mode
Export
CSS
JSON
Tailwind
Copy
Download
Open in UI Kit Generator