What Is the Design System Builder?
Build a complete design token set with visual editors for colors, typography, spacing, shadows, and border radii. Export as CSS, Tailwind, SCSS, or JSON.
Why Use This Tool?
A design system needs consistent, well-organized tokens. This tool provides structured editors for every token category, with live previews and one-click export to multiple formats.
How to Use the Design System Builder
- Define your color palette — Set your base colours (primary, secondary, accent and neutral to start; add or remove as needed). The builder generates a 10-step scale (50–900) for each colour in OKLCH: every step keeps your colour's hue and chroma at a set lightness, and your exact colour takes the step closest to its own lightness.
- Configure typography — Choose heading, body, and monospace fonts. Set your base font size and select a modular type scale (Major Third, Perfect Fourth, etc.) to generate a harmonious size hierarchy.
- Set spacing and layout tokens — Pick a spacing scale: 4px base (Tailwind-style), 8px base (Material-style) or Fibonacci. The builder writes it as numbered tokens (space-0, space-1 and up) for margins, paddings and gaps.
- Adjust shadows and radii — Choose a shadow preset (Subtle, Elevated or Sharp) and a radius preset (Sharp, Rounded, Soft or Pill). Each shadow preset gives five levels (xs to xl); each radius preset gives six (none to full).
- Preview and export — Switch to the Preview tab to see your tokens applied to real UI components. Then select your export format (CSS, Tailwind, SCSS, JSON) and copy or download the output.
Worked example: the Tailwind export, compiled
The Tailwind config used to put each spacing step under its position in the list (0, 1, 2 …), which replaced Tailwind's own keys: with the "4px Base" scale, p-4 became 6 px and p-8 20 px, so every existing class in a project changed size. On October 13, 2026 we exported the config for the default system (DM Sans and Space Mono, 16 px base, 1.25 scale) with each spacing scale, compiled it with tailwindcss 3.4.17 and read the generated CSS:
| Spacing scale | p-4 before (v219) | p-4 now | p-3.25 now |
|---|---|---|---|
| 4px Base (Tailwind) | 6px | 1rem | — |
| 8px Base (Material) | 12px | 1rem | — |
| Fibonacci | 5px | 1rem | 0.8125rem |
- Keys are now Tailwind units. A step is keyed by its size divided by 4 px (one Tailwind unit), so values that Tailwind already has keep their usual class and new ones get their own: the Fibonacci scale's 13 px and 21 px become
p-3.25andp-5.25. - Font sizes are in rem (16 px = 1 rem), so text follows the reader's browser font-size setting;
text-basecompiled to 1rem andtext-xlto 1.5625rem with the Major Third scale. - Fonts must be loaded separately. The config only names the families; the export now starts with a Google Fonts
<link>for the heading, body and mono families you picked. - CSS, SCSS and JSON exports carry the same values as custom properties, Sass variables and a token object; the CSS custom properties version is the safest to paste because it changes nothing until you use the variables.
- Your system is saved in this browser (localStorage) and can be sent to My Workspace; clearing site data removes it, so export the JSON as a backup.
Sources
Checked on .
- Tailwind CSS v3 docs: theme.extend and the default spacing scale (1 unit = 0.25rem)
- Tailwind CSS v3 docs: fontSize configuration
- MDN: @font-face / loading web fonts
- Tailwind CSS v3: Customizing spacing (theme.extend.spacing)
- Tailwind CSS v3: Theme configuration (extend vs override)
- MDN: rem unit
- W3C: Understanding WCAG 2.2 SC 1.4.4 Resize Text
Frequently Asked Questions
Built by Derek Giordano · Part of Ultimate Design Tools