How to extract design tokens from a website

Every site has a design system, even when nobody wrote it down. Here is how to read it back out as tokens you can use.

Updated November 2026 · by the Design Toolkit team · 3 min read

What are design tokens?

Design tokens are the named values a design is built from: colors, font families and sizes, spacing steps, radii and shadows. A token such as --color-brand or space-4 means the same thing in the design file and in code, which is what keeps the two in sync.

Step 1: get the colors

Open the page palette. It lists every color the page uses, including the greys and borders that carry a design but are easy to miss with an eyedropper. Pick the ones that matter: brand, text, background, border, accent.

Export them as CSS variables, Tailwind (v4 or v3) or JSON tokens, or paste them into Figma as one editable rectangle per color. The longer walkthrough is in how to find the colors used on a website.

Step 2: get the type

Hover a heading, a paragraph and a button. Note the family, size, weight, line height and letter spacing of each. Three or four text styles usually describe the whole site. See how to find what font a website uses for the rest.

Step 3: get the spacing

Measure the gaps between a card and its title, between two sections and around a button. Sites almost always use a scale (4, 8, 12, 16, 24, 32, 48 and so on). Four or five measurements reveal it. Measuring the distance between elements shows how.

Putting the tokens to work

:root {
  --color-ink: #141218;
  --color-brand: #e8883a;
  --font-display: "Bricolage Grotesque", sans-serif;
  --space-4: 16px;
}

Paste variables into your stylesheet, a Tailwind theme into your config, or JSON into a token pipeline. As always, take the values and learn from them; replace logos, images and licensed fonts with your own.

Common questions

Read next