Free Design Tokens Generator
Define your design tokens — colors, typography, spacing, radius, shadows — and export in 5 formats including W3C standard. No signup required.
none
sm
md
lg
xl
2xl
full
Token Tree Preview
color
primary: #6366f1
secondary: #1e293b
accent: #06b6d4
success: #22c55e
warning: #f59e0b
typography
heading: Inter
body: Inter
spacing
base: 4px
borderRadius
md: 8px
shadow
sm, md, lg, xl
Export Tokens
{
"$schema": "https://design-tokens.github.io/community-group/format/",
"color": {
"primary": {
"$value": "#6366f1",
"$type": "color"
},
"secondary": {
"$value": "#1e293b",
"$type": "color"
},
"accent": {
"$value": "#06b6d4",
"$type": "color"
},
"success": {
"$value": "#22c55e",
"$type": "color"
},
"warning": {
"$value": "#f59e0b",
"$type": "color"
}
},
"typography": {
"fontFamily": {
"heading": {
"$value": "Inter",
"$type": "fontFamily"
},
"body": {
"$value": "Inter",
"$type": "fontFamily"
}
},
"fontSize": {
"xs": {
"$value": "0.75rem",
"$type": "dimension"
},
"sm": {
"$value": "0.875rem",
"$type": "dimension"
},
"base": {
"$value": "1rem",
"$type": "dimension"
},
"lg": {
"$value": "1.125rem",
"$type": "dimension"
},
"xl": {
"$value": "1.25rem",
"$type": "dimension"
},
"2xl": {
"$value": "1.5rem",
"$type": "dimension"
},
"3xl": {
"$value": "1.875rem",
"$type": "dimension"
},
"4xl": {
"$value": "2.25rem",
"$type": "dimension"
}
}
},
"spacing": {
"0": {
"$value": "0px",
"$type": "dimension"
},
"1": {
"$value": "4px",
"$type": "dimension"
},
"2": {
"$value": "8px",
"$type": "dimension"
},
"3": {
"$value": "12px",
"$type": "dimension"
},
"4": {
"$value": "16px",
"$type": "dimension"
},
"5": {
"$value": "20px",
"$type": "dimension"
},
"6": {
"$value": "24px",
"$type": "dimension"
},
"8": {
"$value": "32px",
"$type": "dimension"
},
"10": {
"$value": "40px",
"$type": "dimension"
},
"12": {
"$value": "48px",
"$type": "dimension"
},
"16": {
"$value": "64px",
"$type": "dimension"
},
"20": {
"$value": "80px",
"$type": "dimension"
},
"24": {
"$value": "96px",
"$type": "dimension"
},
"32": {
"$value": "128px",
"$type": "dimension"
},
"40": {
"$value": "160px",
"$type": "dimension"
},
"48": {
"$value": "192px",
"$type": "dimension"
},
"64": {
"$value": "256px",
"$type": "dimension"
}
},
"borderRadius": {
"none": {
"$value": "0",
"$type": "dimension"
},
"sm": {
"$value": "4px",
"$type": "dimension"
},
"md": {
"$value": "8px",
"$type": "dimension"
},
"lg": {
"$value": "12px",
"$type": "dimension"
},
"xl": {
"$value": "16px",
"$type": "dimension"
},
"2xl": {
"$value": "24px",
"$type": "dimension"
},
"full": {
"$value": "9999px",
"$type": "dimension"
}
},
"shadow": {
"sm": {
"$value": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
"$type": "shadow"
},
"md": {
"$value": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
"$type": "shadow"
},
"lg": {
"$value": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
"$type": "shadow"
},
"xl": {
"$value": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
"$type": "shadow"
}
}
}Why Use Our Design Tokens Generator?
5 Output Formats
W3C DTCG standard, Style Dictionary, CSS custom properties, Tailwind CSS config, and Figma Tokens. One tool, every platform.
W3C Standard
Export in the W3C Design Tokens Community Group format — the emerging standard for design token interchange across tools and platforms.
Import & Convert
Already have a Tailwind config? Import it and convert to design tokens in any format. Bridge the gap between your code and design tools.
How to Generate Your Design Tokens
1
Define Tokens
Set your colors, fonts, spacing base, border radius, and shadows. Add or remove color tokens as needed.
2
Preview Structure
Review the token tree preview to verify all values are correct before exporting to your target format.
3
Export
Choose from W3C, Style Dictionary, CSS, Tailwind, or Figma Tokens format. Copy and paste into your project.
Frequently Asked Questions
What are design tokens?▼
Design tokens are the atomic design decisions of a design system — colors, typography, spacing, radius, and shadows stored as platform-agnostic key-value pairs. They bridge the gap between design tools and code.
What is the W3C Design Tokens format?▼
The W3C Design Tokens Community Group (DTCG) format is an emerging standard for design token interchange. It uses JSON with $value and $type properties, making tokens interoperable across tools.
What export formats are supported?▼
We support 5 formats: W3C DTCG (standard JSON), Style Dictionary (Amazon's token framework), CSS custom properties, Tailwind CSS config, and Figma Tokens (Tokens Studio compatible).
Can I import an existing Tailwind config?▼
Yes! Use the Import mode to paste a Tailwind config. The tool extracts color hex values and converts them into design tokens you can export in any format.
Is this compatible with Style Dictionary?▼
Yes, the Style Dictionary export follows the standard format with nested objects and value properties. Use it directly with Amazon's Style Dictionary build system.
Is this tool free?▼
Yes, completely free. No signup required, no limits. Generate and export as many token sets as you need.
Need a Complete Brand Identity?
Love this tool? We generate complete brand systems — logos, colors, typography, and design tokens — all in 60 seconds with AI.
Generate Your Brand