07 · Design tokens
Design tokens generator for your whole stack.
Token tree
color
radius
spacing
shadow
typography.size
Rendered
Weekly revenue
Last 7 days · updated 2m ago
Output
{
"color": {
"primary": "#845EC2",
"primaryHover": "#6E44B3",
"primaryActive": "#5C3996",
"secondary": "#B366BB",
"accent": "#B9CD5E",
"background": "#F8F7FA",
"surface": "#FFFFFF",
"surfaceElevated": "#FCFCFD",
"border": "#E5E2E9",
"text": "#201C26",
"mutedText": "#716B7A",
"success": "#397F5E",
"warning": "#B18943",
"error": "#BE5855",
"info": "#4977AC",
"dark": {
"background": "#16141A",
"surface": "#201D25",
"surfaceElevated": "#2A2730",
"border": "#3C3843",
"text": "#EFEEF1",
"mutedText": "#9D99A3",
"primary": "#9B7CCD",
"primaryHover": "#AC92D6",
"primaryActive": "#BDA8DE"
}
},
"radius": {
"none": "0px",
"small": "4px",
"medium": "8px",
"large": "16px",
"xlarge": "24px",
"full": "9999px"
},
"spacing": {
"xsmall": "4px",
"small": "8px",
"medium": "16px",
"large": "24px",
"xlarge": "40px",
"xxlarge": "64px"
},
"shadow": {
"small": "0 1px 2px rgba(16, 16, 20, 0.06), 0 2px 6px rgba(16, 16, 20, 0.08)",
"medium": "0 4px 8px rgba(16, 16, 20, 0.05), 0 8px 20px rgba(16, 16, 20, 0.12)",
"large": "0 8px 16px rgba(16, 16, 20, 0.08), 0 20px 44px rgba(16, 16, 20, 0.16)"
},
"typography": {
"familySans": "Inter Tight, ui-sans-serif, system-ui, sans-serif",
"familyMono": "JetBrains Mono, ui-monospace, monospace",
"size": {
"xs": "0.75rem",
"sm": "0.875rem",
"base": "1rem",
"lg": "1.25rem",
"xl": "1.563rem",
"xxl": "1.953rem",
"display": "2.441rem"
},
"weight": {
"regular": "400",
"medium": "500",
"semibold": "600"
},
"lineHeight": {
"tight": "1.2",
"normal": "1.5",
"relaxed": "1.7"
}
}
}Guide
What are design tokens?
Design tokens are the named values behind every design decision: color.primary instead of a hex, radius.md instead of 8px, space.3 instead of a magic 24, shadow.sm instead of a copied box-shadow. They sit between design and code as the single source of truth, so a change made once propagates to Figma, CSS, iOS and Android instead of being chased down in a dozen files.
Tokens group naturally into namespaces — color, radius, spacing, shadow, typography — each with a small scale of meaningfully different steps. The convention that scales best is semantic naming over raw values: surface-elevated means the same thing in every theme, while gray-200 quietly changes meaning the moment your palette does.
Generating design tokens from one base color
Start from your base color: Swatchboard derives the full semantic color set, including the dark-theme namespace, exactly as the brand tool does. Then set the structural primitives — radius base, spacing base and a modular type ratio such as 1.250 (major third) or 1.333 (perfect fourth) — and the generator expands each into a complete step scale ready for a token file.
The token tree on the left shows every generated value grouped by namespace; the preview on the right renders them through real components so you can judge the scale before exporting. Output comes as a tokens JSON file suitable for Style Dictionary pipelines, CSS custom properties, SCSS variables or a Tailwind config extension — pick the one your stack already speaks.
Frequently asked questions
- What is a design token?
- A design token is a named, platform-agnostic value for a design decision — for example color.primary: #845EC2 or space.3: 24px. Tools and pipelines resolve the name into platform code, so the value can change everywhere at once.
- What is the difference between a design token and a theme?
- Tokens are the vocabulary: the names and their values. A theme is one complete assignment of those tokens — light and dark are two themes over the same token names. Generate tokens once, then map them per theme.
- Which format should design tokens use?
- JSON is the safest interchange format and the input Style Dictionary expects; CSS custom properties are best consumed directly by web stylesheets; SCSS and Tailwind configs fit those build systems. This generator emits all four from the same tree.