Design Token Generator
Generate a design token JSON file from your brand colors, fonts, and spacing.
Result
Design Tokens (JSON)
{
"color": {
"primary": {
"value": "#3b82f6",
"type": "color"
},
"secondary": {
"value": "#8b5cf6",
"type": "color"
},
"neutral": {
"value": "#64748b",
"type": "color"
},
"background": {
"value": "#ffffff",
"type": "color"
},
"surface": {
"value": "#f8fafc",
"type": "color"
},
"text": {
"value": "#0f172a",
"type": "color"
},
"text-muted": {
"value": "#64748b",
"type": "color"
}
},
"typography": {
"fontFamily": {
"value": "Inter, system-ui, sans-serif",
"type": "fontFamily"
},
"fontSize": {
"xs": {
"value": "12px",
"type": "fontSize"
},
"sm": {
"value": "14px",
"type": "fontSize"
},
"base": {
"value": "16px",
"type": "fontSize"
},
"lg": {
"value": "18px",
"type": "fontSize"
},
"xl": {
"value": "20px",
"type": "fontSize"
},
"2xl": {
"value": "24px",
"type": "fontSize"
},
"3xl": {
"value": "30px",
"type": "fontSize"
}
}
},
"spacing": {
"0": {
"value": "0px",
"type": "spacing"
},
"1": {
"value": "4px",
"type": "spacing"
},
"2": {
"value": "8px",
"type": "spacing"
},
"3": {
"value": "12px",
"type": "spacing"
},
"4": {
"value": "16px",
"type": "spacing"
},
"6": {
"value": "24px",
"type": "spacing"
},
"8": {
"value": "32px",
"type": "spacing"
},
"12": {
"value": "48px",
"type": "spacing"
},
"16": {
"value": "64px",
"type": "spacing"
}
},
"borderRadius": {
"none": {
"value": "0px",
"type": "borderRadius"
},
"sm": {
"value": "4px",
"type": "borderRadius"
},
"md": {
"value": "8px",
"type": "borderRadius"
},
"lg": {
"value": "12px",
"type": "borderRadius"
},
"full": {
"value": "9999px",
"type": "borderRadius"
}
}
}CSS Variables
:root {
--color-primary: #3b82f6;
--color-secondary: #8b5cf6;
--color-neutral: #64748b;
--font-family: Inter, system-ui, sans-serif;
--font-size-base: 16px;
--radius: 8px;
}Summary7 colors, 7 sizes, 9 spacings