Book a 30-min callBook a call
MenuClose
ServicesMVP developmentAI agents & automationWeb appsMobile appsUI/UX designWebsite developmentAll servicesHow we workAboutBook a 30-min call

What are design tokens? One source for colors, type and spacing

Design tokens store a product’s design decisions, such as colors, type, spacing and radii, as named values shared by design files and code. How to set them up.

A small set of named color, spacing and type chips feeding both a design file and a code editor.
Written by
BYD Tech
Updated
Topic
Design
Reading time
2 min read

The short answer

Design tokens are named values for a product’s design decisions, such as color-text-primary, space-4 or radius-card, stored in one place and used by both design files and code. Changing a token changes it everywhere, so the product stays consistent and themes such as dark mode become a matter of swapping values. The W3C Design Tokens Community Group published the first stable version of a shared token format in October 2025, so tools can exchange them.

Key points

  • Tokens name design decisions instead of hard-coding values.
  • Base tokens hold raw values; semantic tokens say what they are for.
  • Code and design files read the same tokens.
  • Themes and dark mode swap token values, not components.
  • A shared standard format now exists for exchanging tokens.

Base and semantic tokens

LayerExamplePurpose
Baseteal-600 = #007B67The raw palette and scales
Semanticcolor-action = teal-600What a value is for
Component (optional)button-primary-bg = color-actionFine control per component

Components should use semantic tokens. Then a rebrand changes which base color color-action points to, and dark mode gives color-text-primary a different value, without touching any component. Material Design 3 layers its tokens in a similar way.

What to turn into tokens

  • Colors: backgrounds, surfaces, text, borders, actions, status.
  • Typography: font families, sizes, weights, line heights.
  • Spacing: a small scale, such as 4, 8, 12, 16, 24, 32.
  • Radii, shadows and borders.
  • Motion: durations and easing curves.

Setting them up

  1. Collect the values already in use, and reduce near-duplicates.
  2. Name semantic tokens by purpose, not appearance: color-danger, not color-red.
  3. Store tokens in one file in the repository, ideally in the standard JSON format.
  4. Generate CSS custom properties, and platform files for iOS and Android, from that file.
  5. Use the same tokens as variables in your design tool.
  6. Review token changes like code changes.

Tokens are the foundation of a design system. See What is a design system?, Dark mode design and Figma to code. Design systems and tokens are part of our UI/UX design work.

Sources

Checked when this guide was written.

Questions people ask

What are design tokens?

Named values for design decisions, such as colors, font sizes and spacing, stored in one place and shared by design files and code.

What is the difference between base and semantic tokens?

Base tokens hold raw values, such as a specific teal. Semantic tokens say what a value is used for, such as the color for primary actions.

Is there a standard format for design tokens?

Yes. The W3C Design Tokens Community Group published the first stable version of its format specification in October 2025.

Do small products need design tokens?

A simple set helps even small products: a few colors, a type scale and a spacing scale keep screens consistent and make dark mode much easier.

Keep reading

DesignWhat is a UX audit? What it covers, and when you need oneGuidesDesignWhat is a design system? What goes in one, and when to build itGuidesDesignWireframe vs mockup vs prototype: what each one is forGuides

All guides

Building something like this?

Book a 30-min callOr send a brief