Design Tokens Generator

Build multi-color design token scales and export as CSS variables, Tailwind config, SCSS, JSON, or Figma tokens.

Color Scales

brand

100

200

300

400

500

600

700

800

900

950

:root {
  --brand-50: #f7f5ff;
  --brand-100: #ede8fe;
  --brand-200: #dad2fc;
  --brand-300: #beb3fa;
  --brand-400: #998ff6;
  --brand-500: #6366f1;
  --brand-600: #4e52bc;
  --brand-700: #3c408d;
  --brand-800: #2d3269;
  --brand-900: #21264a;
  --brand-950: #191f38;
}

Frequently Asked Questions

What are design tokens?

Design tokens are named color values that form the foundation of a design system. Instead of hardcoding #6366f1 everywhere, you use --primary-500, making it easy to update colors across an entire product.

Can I add multiple color scales?

Yes — click 'Add' to add more color scales (e.g. primary, success, danger, warning). Each gets its own 11-step scale from 50 to 950, all exported together.

What is the Figma tokens format?

The Figma format outputs a JSON structure compatible with the Figma Tokens plugin. Import it to sync your design tokens directly into Figma and keep design and code in sync.