# 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.

- Source: https://flashdsm.com/glossary/design-token
- Site: Flash DS (https://flashdsm.com)
- Updated: 2026-08-06

---

## 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`:

```json
{
  "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 DS

Flash DS 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