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 primary, secondary, and neutral base colors. The builder automatically generates a 9-step shade scale (50–900) for each color with proper lightness distribution.
- 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 base unit and scale. The builder creates a consistent spacing system from 2xs to 3xl that you can apply to margins, paddings, and gaps.
- Adjust shadows and radii — Choose from shadow presets (subtle, medium, dramatic) and border radius styles (sharp, rounded, pill). Each preset generates multiple elevation levels.
- 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
- → Start with the AI Design Assistant. Generate a baseline token set with the AI Design Assistant, export as JSON, then import it here for manual fine-tuning. This gives you a strong starting point.
- → Name tokens semantically. Use names like
--color-primaryrather than--blue. When your brand color changes, semantic names still make sense. - → Check contrast as you design. The builder shows WCAG contrast ratios for text/background combinations. Aim for AA compliance (4.5:1 for body text, 3:1 for large text) at minimum.
- → 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. JSON tokens work with Style Dictionary, Tokens Studio, and most design-to-code pipelines. Even if you use CSS custom properties in production, keep a JSON source of truth.
Built by Derek Giordano · Part of Ultimate Design Tools