How to Extract Design Tokens (Colors, Type, Spacing) from a Live Website Without Figma

October 7, 2026

5 min readIncludes interactive demos

If you have ever audited a live site by hand, you know the routine: inspect an element, copy a hex value into a spreadsheet, inspect the next one, notice that the same grey appears in four slightly different forms, and lose an hour before you have even reached the type scale. Designers and agencies do this constantly — for competitor reviews, for client sites that never had a design file, for “make the new page match the old one” briefs — and almost none of them enjoy it. You can skip most of it without opening Figma.

What a design token actually is

A token is a named, reusable decision: a colour, a font size, a gap. The point is not the value but the naming and the limit. A site with a coherent system uses a small set of values over and over (a handful of colours, a type scale of six or seven sizes, spacing in steps of four or eight pixels). Extraction is therefore a sorting problem: out of every value the page uses, which ones are the system, and which are accidents?

Why the stylesheet is the wrong place to look

The obvious approach is to open the CSS file and read it. On a modern site that usually fails for three reasons.

• The CSS is generated. Tailwind, CSS-in-JS and CSS modules produce class names like .x7f2a and thousands of utility rules. The file tells you what could apply, not what does.
• JavaScript changes it afterwards. Themes, dark mode and animations write inline styles after load. The final look is not in the source stylesheet.
• Variables hide the answer. A colour defined as var(--c-accent) in one place and #7c5cff in another is one token, but a text search will not tell you that.

What you want is the computed style: what the browser resolved after scripts ran, for the elements actually on screen. That is the difference between reading the recipe and tasting the dish.

Pulling tokens with extract_design_system

Enrichr’s extract_design_system loads the page in a real browser and reports the colours, type scale, spacing and radii that applied, rather than what the stylesheet declares. A few details make it practical:

• Colours come back as the resolved values used for text, backgrounds, borders and accents, so you can see which handful carry the brand and which are incidental.
• Type shows the font families, sizes, weights and line heights in use, which is where the scale becomes visible.
• Spacing and radii reveal the underlying rhythm: whether the layout sits on a 4px or 8px grid, and which corner radii repeat.

If you only need the palette, extract_color_palette is the narrower and cheaper call. We follow a simple rule for every Enrichr tool: the narrowest one that answers the question. Our walkthrough of a real session shows where each fits.

From raw values to real tokens

Extraction gives you values. Turning them into a system takes four small steps, and the judgement in them is yours, not the tool’s.

1. Collapse near-duplicates. If you find #111, #121212 and #101010, that is almost certainly one “ink” colour with drift. Pick one and note where the others occur.
2. Rank by frequency. A value used across dozens of elements is a token. A value used once is a one-off. Keep the first group, flag the second.
3. Name by role, not by hue. --color-accent survives a rebrand; --color-purple does not. The same goes for --space-md over --space-16.
4. Check the scale. Do the font sizes follow a ratio? Do the spacing values step evenly? Where the scale breaks, you have found either a deliberate exception or a bug in the original.

The result is a block you can drop straight into a project:

:root {
  /* colour */
  --color-ink:      #111111;
  --color-paper:    #f6f4ef;
  --color-accent:   #7c5cff;
  --color-muted:    #6b6b6b;

  /* type */
  --font-display:   "Instrument Serif", serif;
  --font-body:      "Inter", system-ui, sans-serif;
  --text-sm:        0.875rem;
  --text-md:        1rem;
  --text-lg:        1.5rem;
  --text-xl:        3rem;

  /* space + shape */
  --space-sm:       0.5rem;
  --space-md:       1rem;
  --space-lg:       2rem;
  --radius-card:    1.25rem;
}

Those values are illustrative; yours will come from the site you extract. The structure is what to copy.

Tokens change with context

A single extraction describes one page at one viewport in one theme, and a real system is rarely that simple. Before you call the list finished, repeat the capture where the design is likely to differ:

• Mobile and desktop. Type usually scales with the viewport, often through clamp(), and spacing tightens on small screens. Capture at two or three widths and record the range, not a single number.
• Light and dark. If the site supports both, the colour tokens map to different values. Name them by role so one token can hold two values, rather than recording two disconnected palettes.
• States. Hover, focus and disabled styles are tokens too. A button’s resting colour is only a third of its definition.
• Different page types. A marketing page, a blog post and an app screen on the same site can use different density. Extract at least one of each if you plan to match the whole product.

It also helps to know what a token list will not tell you. It will not say why a spacing value was chosen, whether two greys were meant to be the same, or how components are composed. It gives you the measurements; the design decisions around them are still yours.

Check the result against the page

A token list that looks plausible can still be wrong, so verify it. Rebuild one component — a card, a button, a nav bar — using only your tokens and put it next to the original at the same width. If it looks off, the miss is usually in one of three places: a font that fell back because the web font did not load, a line height that was inherited rather than set, or a colour with an alpha channel that you recorded as opaque. The same care applies when you open a saved copy of a page; we explain why in why a captured site looks broken until you stop opening it as a file.

When you want more than tokens

Tokens tell you the vocabulary. They do not tell you how the page moves. If the motion is what you are after, the next step is identifying the animation stack, and for the bigger question of why some sites feel considered while others feel templated, read what actually makes a site Awwwards-worthy. For real extractions you can inspect without running anything, browse the Enrichr gallery.