What Is a Design Token and How Do Websites Use Them

A design token is a named value for one design decision, such as a color, a font size, a spacing step or a corner radius. Instead of typing #0071e3 in fifty places, a team defines a token like color-action-primary and uses that name everywhere. Change the token once and every button updates.

Where the idea came from

Design tokens were popularized by Salesforce's Lightning Design System team in the mid-2010s, to keep web, iOS and Android apps consistent. A W3C community group has since worked on a standard file format, so design tools and code can share tokens.

What tokens cover

• Colors: brand, text, background, borders, status.
• Typography: font families, sizes, weights, line heights.
• Spacing: a scale such as 4, 8, 12, 16, 24, 32 pixels. See spacing systems.
• Corner radius, shadows, borders.
• Motion: animation durations and easing.

The three tiers

1. Primitive tokens: raw values with plain names, such as blue-600.
2. Semantic tokens: what a value is for, such as color-action-primary, pointing at a primitive. Dark mode swaps these.
3. Component tokens: values for one component, such as button-background.

How websites use them

On the web, tokens usually become CSS custom properties (variables):

:root {
  --color-action-primary: #0071e3;
  --space-4: 16px;
}
.button { background: var(--color-action-primary); padding: var(--space-4); }

Tools such as Style Dictionary turn one token file into CSS, iOS and Android formats, and Figma variables let designers use the same names.

Shopify design tokens

Shopify's Polaris design system, used for the Shopify admin and apps, publishes its tokens as CSS variables that start with --p-, for colors, spacing, type and more. Online Store themes work similarly: theme settings for colors and fonts are turned into CSS variables that the theme's styles use.

How to see a site's tokens

1. Open DevTools and select the html element.
2. In the Styles pane, look for the :root rule and its list of -- variables.
3. Names like --color-primary or --space-md reveal the token system.

See extracting a site's CSS variables and reverse-engineering a design system.

See the values in use

Font Detector shows the font, size, weight and line height of any text you click, and Color Palette Extractor lists a page's most-used colors. They show the final values rather than token names, which helps when a site doesn't use variables at all.