Design tokens are platform-agnostic, named design decisions that store visual design attributes such as colors, spacing, typography, shadows, and more. They serve as the single source of truth for your design system, ensuring consistency across design tools (Figma, Sketch) and code (CSS, iOS, Android). Think of them as the atomic building blocks of your UI — a token like --color-primary-500 defines exactly one shade of your brand color, used everywhere consistently.

Hard-coded values scatter design decisions across your codebase, making updates error-prone and time-consuming. Design tokens centralize these decisions. When you update a token (e.g., changing your primary brand color), every component using that token updates automatically. This ensures visual consistency, speeds up design iterations, simplifies dark mode implementation, and makes multi-platform design synchronization dramatically easier.

This Design Token Generator supports four major export formats: CSS Custom Properties (CSS variables for direct web use), JSON (compatible with Style Dictionary and Amazon's design token specification), SCSS (Sass variables for preprocessor-based workflows), and Tailwind Config (ready-to-paste into your tailwind.config.js file). Each format preserves the token hierarchy and naming conventions for seamless integration.

When you set a base color (the 500 level), the generator automatically creates a full 11-step scale (50–950) using perceptually-weighted color mixing. Lighter shades (50–400) are created by blending the base color with white at increasing ratios, while darker shades (600–950) blend with black. This produces smooth, usable gradients suitable for UI backgrounds, text, borders, and interactive states. You can change any base color and the entire scale regenerates instantly.

The spacing tokens are built on a modular scale system. You choose a base unit (4px, 6px, 8px, or 10px) and the number of scale steps. The generator multiplies the base unit by step indices (0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 14, 16...) to produce a comprehensive spacing scale. This follows the 8px grid system popularized by Google Material Design and is compatible with most design systems. Each spacing token is visualized as a proportional bar for easy comparison.

Export your tokens as JSON and use plugins like Tokens Studio for Figma (formerly Figma Tokens), Style Dictionary, or Specify to sync them directly into Figma. The JSON output follows the standard Design Token Community Group format, making it compatible with most token-based workflows. This bridges the gap between design and development, ensuring what you see in Figma matches what you ship in code.

Good token naming follows a hierarchical pattern: category-subcategory-variant-modifier. For example, --color-primary-500 or --font-size-heading-xl. Use semantic names (like "primary", "secondary", "neutral") rather than actual color names (like "blue", "gray") so tokens remain meaningful even when values change. Keep names consistent, use kebab-case for CSS, and document your token taxonomy for team alignment.

Absolutely! Design tokens are the foundation of robust dark mode implementation. Export as CSS variables, then override them within a [data-theme="dark"] or .dark selector. For example, you can swap --color-neutral-50 with --color-neutral-900 to invert your surface colors. The token structure remains identical; only the values change. This approach scales elegantly to multiple themes (light, dark, high-contrast, brand-specific).