Design Tokens Generator
Define design tokens for colors, spacing, typography, borders, and shadows. Export as CSS custom properties, JSON, SCSS variables, or Tailwind config.
About This Tool
The Design Tokens Generator is a free browser-based tool for
creating and managing design tokens across five core categories:
colors, spacing, typography, borders, and shadows. Design tokens
are the atomic building blocks of a design system — named values
that capture visual decisions like primary: #3b82f6 or
spacing-md: 1rem and make them reusable across platforms and
codebases.
Instead of scattering magic numbers throughout your stylesheets,
this tool lets you define every token in one place, then export
the result in whichever format your project needs: CSS custom
properties (:root { --colors-primary: #3b82f6; }), JSON
for design system tooling, SCSS variables for Sass projects,
or a Tailwind CSS config object ready to paste into
tailwind.config.js.
Three built-in presets — Material Design, Minimal Dark, and Bootstrap-like — give you a head start. Each preset includes tokens for all five categories so you can see how a complete token system is structured. Load a preset, tweak the values, add or remove tokens, and export the final result.
The live preview panel shows your color swatches, spacing scale bars, typography samples, border radius shapes, and shadow elevations updating in real time as you edit. This immediate feedback loop makes it easy to iterate on your design system without switching between tools.
If you need deeper color theming with shade generation and semantic mappings, pair this tool with the CSS Variable Generator. For Tailwind-specific configuration, the Tailwind Config Builder offers a visual editor tailored to Tailwind’s config format. And for general color format conversions, the Color Converter handles HEX, RGB, and HSL translations.
All processing runs entirely in your browser. No token data, theme configurations, or generated output is ever sent to a server. Your design decisions stay private on your machine.
How to Use
- Choose a Preset from the dropdown to start with a pre-configured token set, or begin from scratch.
- Use the category tabs (Colors, Spacing, Typography, Borders, Shadows) to navigate between token types.
- Click Add Token to create a new token in the active category. Give it a descriptive name and value.
- For color tokens, use the color picker to visually select a color or type a hex value directly.
- Select an output format (CSS Custom Properties, JSON, SCSS Variables, or Tailwind Config) from the Format dropdown.
- Review the Live Preview panel to verify your tokens look correct — color swatches, spacing bars, and shadow previews update in real time.
- Click Copy or press Ctrl+Shift+C to copy the generated output to your clipboard, or click Download to save it as a file.
Popular Design Token Examples
FAQ
What are design tokens?
Design tokens are named values that represent visual design decisions — things like colors, spacing, typography, border radii, and shadows. They serve as the single source of truth for a design system, ensuring consistency across components, platforms, and teams. Instead of hardcoding #3b82f6 in fifty places, you define a token called 'primary' and reference it everywhere.
What output formats are supported?
Four formats are available: CSS Custom Properties (:root { --colors-primary: #3b82f6; }), JSON (for design system tooling like Style Dictionary or Figma plugins), SCSS Variables ($colors-primary: #3b82f6;), and Tailwind Config (a theme.extend object ready to paste into tailwind.config.js). Choose whichever matches your project's tech stack.
What token categories are available?
The tool supports five categories: Colors (hex values, brand colors, semantic colors), Spacing (margin and padding scale values), Typography (font families, sizes, weights, line heights), Borders (border radii and widths), and Shadows (box-shadow elevation values). Together these cover the most common design system primitives.
Can I use this with Style Dictionary?
Yes. Export your tokens as JSON, then use the JSON output as input for Style Dictionary, Theo, or any other token transformation tool. The JSON format uses a nested structure with categories as top-level keys, which is compatible with most design token pipelines.
How do the presets work?
Three presets are included: Material Design (Google's design system tokens), Minimal Dark (a dark-mode-first minimal setup), and Bootstrap-like (tokens matching Bootstrap's default variables). Loading a preset replaces all current tokens with the preset's values. You can then customize, add, or remove tokens as needed.
Is my data safe?
Yes. All token definitions, formatting, and output generation happen entirely in your browser using JavaScript. No data is sent to any server. You can verify this by checking the Network tab in your browser's developer tools while using the tool.
How many tokens can I add?
There is no hard limit. You can add as many tokens as your project requires across all five categories. For most design systems, 20-50 tokens provide a solid foundation. Larger systems with multiple themes or platforms may have 100+ tokens.
Related Tools
CSS Variable Generator
Design color theme systems with CSS custom properties. Auto-generate shade scales, semantic tokens, and dark mode variants.
Tailwind Config Builder
Build tailwind.config.js visually with custom colors, spacing, fonts, and breakpoints.
Color Converter
Convert colors between HEX, RGB, HSL formats with contrast checker and palette generator.
CSS Gradient Generator
Create linear, radial, and conic CSS gradients visually with color stops, angle control, and live preview.
Font Stack Builder
Build CSS font-family stacks with drag-and-drop reordering, live preview, and popular presets for system, serif, sans-serif, and monospace fonts.
Google Fonts Pair Finder
Find and preview complementary Google Fonts pairings for headings and body text.