Design System Builder

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

1. 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.
2. 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.
3. 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.
4. 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).
5. 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.

Tips and Best Practices

• → Name tokens semantically. Use names like --color-primary rather than --blue. When your brand color changes, semantic names still make sense.
• → Check contrast as you design. Each colour card shows its contrast ratio against white and against black. Aim for at least WCAG AA: 4.5:1 for body text, 3:1 for large text.
• → Use the Preview tab early and often. Token values in isolation can be misleading — a spacing scale that looks right in numbers might feel too tight or too loose in actual UI. Preview reveals these issues.
• → Export to JSON for portability. The JSON export uses nested {value, type} tokens, the layout Style Dictionary reads; other tools may need the type names mapped. Even if you use CSS custom properties in production, keep a JSON source of truth.

Frequently Asked Questions

Built by Derek Giordano · Part of Ultimate Design Tools

Privacy Policy · Terms of Service