Design Token Generator
Configure a colour palette, a modular type scale and a spacing system in one place. The tool emits design tokens as CSS custom properties, a Tailwind config snippet or a JSON file — copy whichever format your stack expects.
How to use
- 1
Add your colours
Use the colour squares and name fields to build a semantic palette (primary, success, danger…). Names are slugified for use as CSS variable and Tailwind keys.
- 2
Configure typography
Set the base size, ratio and number of steps above/below base. Names follow the Tailwind convention (xs, sm, base, lg, xl, 2xl…).
- 3
Configure spacing
Choose a 4 px or 8 px base and how many steps you want. The Tailwind-style multipliers (0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8…) are applied to your base unit.
- 4
Copy in your format
Switch tabs between CSS custom properties, Tailwind config and JSON. Each is ready to paste directly into your project.
Common use cases
- Bootstrap a new design system from a single source of truth.
- Hand off design tokens to engineers in CSS, Tailwind or JSON form.
- Document your colour, type and spacing decisions in one tool.
- Migrate a Figma palette to a Tailwind theme extension.
Limitations
- Only solid colours are supported — gradients and alpha colours are not generated.
- Typography tokens do not include line-heights or letter-spacing; pair them manually in your design system.
- Spacing uses Tailwind’s standard multiplier set; custom multipliers aren’t supported.
Frequently asked questions
Related tools
View allColor Palette Generator
Generate harmonious colour palettes from a base colour.
Typography Scale Generator
Generate a modular typography scale.
Color Shade Generator
Generate lighter and darker shades of a colour.
Border Radius Playground
Visually design complex border-radius values.