Design Token Generator
Create semantic color, spacing, radius, and typography tokens with a live component preview. Export CSS custom properties or JSON, free without AI.
Design tokens
:root {
--color-accent: #c65324;
--color-background: #faf8f5;
--color-foreground: #292521;
--color-surface: #ffffff;
--color-on-accent: #000000;
--font-family: "Inter", sans-serif;
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 24px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
}Export text stays in English; your input is kept as entered.
No signup. No AI credits. This tool assembles your output in your browser.
From an idea to something useful.
- 01
Set your semantic colors and base values.
- 02
Inspect the live sample and generated spacing scale.
- 03
Copy CSS variables or export the matching JSON values.
A little context.
Semantic tokens give repeated design decisions a name. This tool builds a compact palette and spacing scale from your choices. CSS and JSON exports share the same values. The JSON is a simple key-value token document, not a claim of compliance with a particular token interchange standard.
Good questions.
Can I use this with my existing theme?
Yes. Map or rename the exported tokens to your theme’s conventions rather than replacing an established system blindly.
Does this create light and dark themes?
It exports one palette at a time. Create and download each palette separately and review contrast in every mode.