Free Tool
Design System Generator
Create design tokens for your brand. Customize everything, preview in real-time, and export to CSS, Tailwind, SCSS, JSON, or Figma.
Colors
Typography
px
Spacing
px
Border Radius
px
px
px
px
Shadows
SM
px
px
px
MD
px
px
px
LG
px
px
px
XL
px
px
px
Breakpoints
px
px
px
px
px
Colors
primary
50
100
200
300
400
500
600
700
800
900
950
secondary
50
100
200
300
400
500
600
700
800
900
950
neutral
50
100
200
300
400
500
600
700
800
900
950
success
warning
error
info
Typography
Heading: Inter · Body: Inter
xs10px — The quick brown fox
sm13px — The quick brown fox
base16px — The quick brown fox
lg20px — The quick brown fox
xl25px — The quick brown fox
2xl31px — The quick brown fox
3xl39px — The quick brown fox
4xl49px — The quick brown fox
5xl61px — The quick brown fox
Spacing
14px
28px
312px
416px
520px
624px
832px
1040px
1248px
Border Radius
sm (4px)
md (8px)
lg (12px)
xl (16px)
Shadows
sm
md
lg
xl
Breakpoints
sm640px
md768px
lg1024px
xl1280px
2xl1536px