What is a Design Token?

A design token is a named value holding one design decision, such as a colour or spacing step, so it can be reused across design tools and code.

Definition

A design token is a named value that stores a single design decision, such as a colour, a spacing step or a font size, so that the decision can be reused across design tools and code instead of being written out by hand in each place.

Also written as: Design tokens

Why name a value at all

Consider a colour used for primary buttons. Written directly, it appears as #2563EB in a stylesheet, as a hex field in a Figma fill, and as a string in whatever a developer typed last week. Three copies, no relationship between them.

As a token it appears once, under a name:

--color-action-primary: #2563EB;

Everything else refers to the name. Change the value once and every use changes. That indirection is the entire idea, and everything else about tokens follows from it.

What tokens usually cover

  • Colour - palettes, scales, and semantic roles like background, border, text and status
  • Typography - families, sizes, weights, line heights, letter spacing
  • Spacing - a consistent scale, usually built on a 4px or 8px base
  • Border radius and border width
  • Shadow and elevation
  • Motion - durations and easing curves
  • Breakpoints and layout dimensions

Tokens are not variables

The distinction matters. A CSS variable is a mechanism. A design token is a decision that happens to be expressed through one.

The practical difference is portability. A token exists independently of any one technology, which is why the same token set can be emitted as CSS custom properties, a Tailwind configuration, Figma variables, Swift or Kotlin. If it only exists as a line of CSS, it is a variable.

Formats

The Design Tokens Community Group, under the W3C, publishes a JSON format intended as a common interchange between tools. It gives every token a $value and a $type:

{
  "color": {
    "action": {
      "primary": { "$value": "#2563EB", "$type": "color" }
    }
  }
}

Adoption is uneven but growing, and it is the closest thing to a neutral exchange format between design tools and build pipelines.

Where this fits with Flash DSM

Flash DSM generates a full token set from a prompt, a website URL, a Figma file or a screenshot, then exports it as CSS custom properties, a Tailwind config, Tokens Studio JSON or Figma variables.

Related terms

  • https://flashdsm.com/glossary/semantic-token
  • https://flashdsm.com/glossary/design-system
  • https://flashdsm.com/glossary/token-drift