Open menu

Design Tokens Generator

Start a design system in minutes. Enter a primary, secondary and neutral color, a base font size, type scale ratio, spacing unit, corner radius and shadow strength, and get a complete token set. It includes three 50–950 color scales built in OKLCH, semantic aliases such as text, surface, border and accent, a spacing scale, type sizes, radii and shadows. Preview them in a sample card, and export CSS custom properties, W3C design-token JSON, SCSS, a Tailwind v4 theme or a JavaScript object.

Preset gallery

Design tokens

Every value here comes from a token.

Primary action

Accessibility checks

  • Pass A 16px base keeps body text comfortable.
  • Pass Sizes use rem, so they follow the visitor's text size setting.
  • Pass 68 tokens generated across colors, spacing, type, radii and shadows.

Export code

:root {
  --color-primary-50: #F2F4FF;
  --color-primary-100: #E4E8FF;
  --color-primary-200: #CDD5FF;
  --color-primary-300: #B1BCFF;
  --color-primary-400: #8A96FF;
  --color-primary-500: #6C71FF;
  --color-primary-600: #5654E9;
  --color-primary-700: #443FC1;
  --color-primary-800: #35319A;
  --color-primary-900: #28267A;
  --color-primary-950: #16144F;
  --color-secondary-50: #FFF1F4;
  --color-secondary-100: #FFE0E8;
  --color-secondary-200: #FFC5D5;
  --color-secondary-300: #FFA0BD;
  --color-secondary-400: #FF609B;
  --color-secondary-500: #E5347F;
  --color-secondary-600: #C51868;
  --color-secondary-700: #A10253;
  --color-secondary-800: #810141;
  --color-secondary-900: #650332;
  --color-secondary-950: #40001D;
  --color-neutral-50: #F3F5F9;
  --color-neutral-100: #E4EAF2;
  --color-neutral-200: #CED8E7;
  --color-neutral-300: #B4C2D6;
  --color-neutral-400: #93A3BA;
  --color-neutral-500: #77879F;
  --color-neutral-600: #617085;
  --color-neutral-700: #4C596C;
  --color-neutral-800: #3B4655;
  --color-neutral-900: #2E3642;
  --color-neutral-950: #1A2028;
  --color-text: var(--color-neutral-900);
  --color-text-muted: var(--color-neutral-600);
  --color-surface: #FFFFFF;
  --color-surface-muted: var(--color-neutral-50);
  --color-border: var(--color-neutral-200);
  --color-accent: var(--color-primary-600);
  --color-accent-hover: var(--color-primary-700);
  --color-on-accent: #FFFFFF;
  --color-highlight: var(--color-secondary-500);
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --text-xs: 0.64rem;
  --text-sm: 0.8rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5625rem;
  --text-2xl: 1.9531rem;
  --text-3xl: 2.4414rem;
  --text-4xl: 3.0518rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 2px 4px rgba(15, 23, 42, 0.06), 0 8px 16px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 4px 8px rgba(15, 23, 42, 0.06), 0 16px 32px rgba(15, 23, 42, 0.12);
}
Favourites on this device (0)

No favourites yet.

Brand colors
Primary
Secondary
Neutral
Scales
Spacing unit

How to use the design tokens generator

  1. Pick a starting theme: SaaS, fintech, health, developer tool, editorial, e-commerce, luxury and more.
  2. Set the brand colors: primary, secondary and a neutral (usually a slightly tinted grey).
  3. Tune the scales: base font size, type ratio, 4px or 8px spacing, radius and shadow strength.
  4. Add a prefix if your tokens must not clash with others (for example ds).
  5. Check the preview card, built entirely from your tokens.
  6. Export CSS variables, JSON tokens, SCSS, Tailwind v4 or JavaScript.

What’s in the set

  • Color: primary, secondary and neutral scales, 50–950 (33 tokens).
  • Semantic color: text, text-muted, surface, surface-muted, border, accent, accent-hover, on-accent and highlight.
  • Space: 0 to 16 steps on your spacing unit, in rem.
  • Text: xs to 4xl from your base size and ratio.
  • Radius: sm, md, lg and full.
  • Shadow: sm, md and lg, scaled by strength.

How it works

You choose three brand colors. Each one is turned into an 11-step shade scale (50–950) in OKLCH, so lightness steps look even across hues. Semantic aliases such as text, surface, border and accent then point at specific shades, which keeps contrast predictable. Spacing, type sizes, radii and shadows follow simple scales from your base values. The same token set is written out as CSS custom properties, DTCG JSON, SCSS, a Tailwind theme or a JavaScript object.

Worked examples

Example 1: a new SaaS product

Load SaaS, export CSS variables and build components with var(--color-accent), var(--space-4) and var(--radius-md). When marketing changes the brand color, update one token.

Example 2: handing tokens to designers

Export JSON and import it with a token plugin into your design tool, so design and code share the same values.

Example 3: Tailwind v4

Export Tailwind v4. The @theme block creates utilities like bg-primary-600, text-2xl and rounded-md from your tokens automatically.

Common mistakes

  • Using raw scale colors in components. Prefer semantic tokens so themes are easy to swap.
  • Too many tokens. Start small; add tokens when a real need appears.
  • Pixel-based sizes. rem keeps the system accessible.

Naming tokens well

Good names last longer than good values. Name raw tokens by scale position (primary-600, space-4) and semantic tokens by job (color-text-muted, color-surface). Avoid names tied to appearance, such as blue or big, for semantic tokens, because the value will change with the next rebrand while the job stays the same.

Keep tokens in one source of truth and generate every format from it. If designers and developers edit separate copies, the values drift apart within weeks. The exports here are generated from the same settings, so a CSS file, a JSON file and a Tailwind theme always agree.

Frequently asked questions

What are design tokens?

Design tokens are named values, such as colors, spacing, font sizes, radii and shadows, stored in one place and used everywhere. Changing a token updates every component that uses it, which keeps a product consistent and makes theming easy.

What are semantic tokens?

Semantic tokens describe purpose instead of appearance: color-text, color-surface, color-accent. They point to raw tokens such as primary-600. Components use the semantic names, so switching to dark mode or a new brand only means re-pointing the aliases.

Which JSON format is used?

The JSON export follows the W3C Design Tokens Community Group format, with $type and $value, and aliases written as {color.primary-600}. Tools such as Style Dictionary and many design plugins can read it.

Why are sizes in rem?

rem values follow the visitor's browser text size, so a token-based layout scales for people who need larger text.

Can I use the tokens with Tailwind?

Yes. Export them as CSS custom properties and reference them in your Tailwind theme, such as colors: { brand: 'var(--color-brand-500)' }, so both use the same values.

Sources