Guide · Updated September 2026

What are design tokens?

A design token is a named value that stores one design decision — a color, a font size, a spacing step, a radius, a shadow. Instead of hard-coding #2563eb in fifty places, you name it once as color-primary and reference the name everywhere. Change the value once, and every screen that references the name changes with it.

Extract tokens from any site — free Extract them from a live site

Written by the developer of Design Snap · Rated 5.0/5 on the Chrome Web Store · read the reviews

The three layers of design tokens

Almost every mature token system separates raw values from intent from usage. The layering is what turns a rebrand into a one-line change instead of a week of find-and-replace.

1 · Primitive tokens

Raw values with neutral names: blue-600: #2563eb, space-4: 16px. They describe what something is, never where it is used. A primitive layer is really just a well-named palette.

2 · Semantic tokens

Intent, pointing at primitives: color-primary → blue-600, color-danger → red-600. This is the layer components should consume — it survives a change of brand color, because only the reference underneath moves.

3 · Component tokens

A specific usage: button-background → color-primary. Optional, and worth adding only when a component genuinely needs to diverge. Too many of these and you have rebuilt the problem tokens were meant to solve.

What a design token actually looks like

The same decision — “our primary blue is #2563eb” — in the three formats you are most likely to meet.

As a CSS custom property — what the browser reads:

variables.css
:root {
  --color-primary: #2563eb;
  --radius-md: 8px;
}

As a Tailwind theme key — what your utility classes read:

tailwind.config.js
theme: {
  extend: {
    colors: { primary: '#2563eb' },
    borderRadius: { md: '8px' },
  },
}

As a Style Dictionary token — the platform-agnostic source a build step turns into all of the above:

tokens.json
{
  "color":  { "primary": { "value": "#2563eb", "type": "color" } },
  "radius": { "md":      { "value": "8px",     "type": "dimension" } }
}

Three syntaxes, one decision. That is the whole difference between a token and a hard-coded value: the token is the decision, the syntax is only how it gets delivered.

Why teams adopt design tokens

One source, every platform

A single token file builds CSS, Tailwind, iOS, Android and Figma outputs. Web and native stop drifting apart because they stop holding separate copies of the same decision.

Theming stops being a rewrite

Dark mode, a white-label client, a seasonal brand: swap the values behind the semantic layer and every component follows. No component needs to know a theme exists.

Design and code share a vocabulary

When a Figma style and a CSS variable carry the same name, a handoff becomes a lookup instead of a negotiation.

AI agents stop inventing values

Give Claude Code or Cursor a token list and it writes bg-primary instead of guessing bg-[#2664ec]. Named decisions are the context an agent needs to stay on-brand.

How to extract design tokens from an existing website

Most sites never publish a token file — but every site ships its decisions in its rendered styles. You can read them back in about a second.

  1. Extract the page

    Open any website and press Extract. Design Snap reads the computed styles inside your browser: colors ranked by how often they are actually used, custom font families, deduplicated radii and shadows, and every CSS custom property declared on :root.

  2. Read the layers

    Treat the usage-ranked palette as your primitives, and the roles Design Snap maps — background, foreground, primary, muted, border — as your semantic layer. What a page uses most is almost always what it means most.

  3. Export into your format

    Copy the result as a tailwind.config.js theme, a Tailwind v4 @theme block, shadcn/ui variables for globals.css, Style Dictionary v3 JSON, Figma tokens, or a prompt for Claude, Cursor or v0.

One honest caveat: what you extract is a snapshot of what a page renders, not the authoring intent behind it. A value the browser fills in from a fallback is still a real rendered value, but it was never a deliberate decision — Design Snap marks those rather than passing them off as brand colors.

Design tokens — FAQ

A design token is a named value that stores a single design decision — a color, a font size, a spacing step, a border-radius, a shadow. Instead of repeating #2563eb across a codebase, you define it once as color-primary and reference the name. The name is stable, the value is not, so one edit propagates everywhere the token is used.

A CSS variable is one way to implement a design token in the browser; the token itself is the decision, not the syntax. The same token can be emitted as a CSS custom property, a Tailwind theme key, a Swift constant, an Android XML resource or a JSON file. Tokens are format-agnostic by definition — that is the entire premise of tools like Style Dictionary, which take one token source and build every platform's format from it.

Three layers. Primitive tokens name raw values (blue-600: #2563eb). Semantic tokens name intent by pointing at primitives (color-primary: {blue-600}). Component tokens name a specific usage (button-background: {color-primary}). The layering is what makes a rebrand cheap: changing a brand color means editing one primitive, not hunting through every component.

Not always. For a landing page maintained by one person, CSS variables in a single :root block do the job. Tokens pay off when the same decisions must stay in sync across several surfaces — a web app plus a marketing site, light and dark themes, a component library used by more than one team, or a design file that has to match production.

You read them back from the rendered page. Every site ships its decisions in its computed styles, whether or not it calls them tokens: the colors actually used and how often, the real font families, the border-radii and shadows that repeat, and any CSS custom property declared on :root. Design Snap does that in one click and exports the result as a Tailwind config, shadcn/ui variables, Style Dictionary JSON, Figma tokens or a prompt for an AI coding agent.

No. Tokens are the vocabulary; a design system is the whole language — tokens plus components, patterns, usage rules and documentation. Tokens are usually the first layer a team formalizes, because they are the smallest useful unit and every component ends up referencing them.

Tailwind theme generator

Turn any site's real values into a ready-to-paste tailwind.config.js.

shadcn/ui theme generator

Map a palette onto shadcn/ui semantic roles, ready for globals.css.

Style Dictionary export

Get standard v3 tokens for a real build pipeline.

Best design token extractors

The tools that read tokens out of a live page, compared.