What are design tokens on a website?

Design tokens are the named, reusable values behind an interface: colors, font sizes, font families, spacing steps, corner radii, and shadows. On a live site they often show up as CSS variables like --color-primary. Sites without a design system still have de facto tokens: the handful of values that repeat everywhere.

Can I extract design tokens from a website without any tools?

Yes. Chrome DevTools is enough. Select the html element in the Elements panel and look for a :root rule full of -- properties in the Styles pane. If there is none, click individual elements and copy their computed colors and font sizes. The values that repeat most often are the site's real tokens.

How does Sitegeist extract design tokens from a page?

Sitegeist is a free Chrome extension that analyzes the page locally in your browser and gives you a one-click teardown: the color palette with usage counts and source selectors, the type scale and loaded fonts, real button styles with hover, focus, and active states, and the spacing scale. Nothing leaves your browser.

Is exporting design tokens from a website free in Sitegeist?

The CSS variables export is free, along with the full teardown view. The JSON token export and the Tailwind config export are part of Sitegeist Pro, a one-time $19.99 purchase. There is no subscription.

Extract Design Tokens from a Website: Complete Guide

To extract design tokens from a website, you find the named values behind its design (the colors, font sizes, and spacing steps that repeat everywhere) and write them down under names you can reuse. You can do it by hand with Chrome DevTools, or in one click with a free teardown extension like Sitegeist. This guide walks through both, manual first, so you know what the shortcut is actually doing.

What are design tokens?

Design tokens are a design's values with names attached. Instead of "that blue" living as a raw hex code in fifty places, it lives once as color-primary, and everything points at the name. Same idea for font sizes, spacing steps, corner radii, and shadows.

Why you should care, in one sentence: names are what make a palette portable. If you pull ten hex codes off a site you admire, you have a pile of values. If you pull them as tokens, you have a system you can drop into your own project and adjust later without hunting through files.

On a live site, tokens show up in two ways. Sites with a real design system declare them as CSS variables (the --something properties you may have seen in DevTools). Sites without one still have de facto tokens: the same six colors and five font sizes repeated across the whole page. Extracting means recovering both.

How to extract design tokens manually with DevTools

Everything here ships with Chrome. No installs, just some clicking.

Step 1: Check whether the site hands you its tokens

Many well-built sites keep all their tokens in one tidy block, and you can just read it. This is the first thing to check because it can save you the rest of the process.

Right-click anywhere on the page and choose Inspect to open DevTools on the Elements panel.
Click the <html> element at the very top of the tree.
In the Styles pane, look for a :root rule full of properties starting with --. Names like --color-primary and --space-4. If it exists, that block is the site's token file, sitting in plain view. Copy what you need.
Also glance at body and wrappers with names like theme-light. Some frameworks tuck tokens there instead.

If the list is long and scattered across several rules, one small console trick collects it all. Paste this in the Console panel; it lists every CSS variable the site defines, with its final value, in one table you can copy from:

const out = {};
for (const sheet of document.styleSheets) {
  let rules;
  try { rules = sheet.cssRules; } catch { continue; }
  for (const rule of rules) {
    if (!rule.style) continue;
    for (const prop of rule.style) {
      if (prop.startsWith('--')) {
        out[prop] = getComputedStyle(document.documentElement)
          .getPropertyValue(prop).trim();
      }
    }
  }
}
console.table(out);

That is the only code in this guide, promise.

Step 2: If there are no variables, sample by hand

Plenty of sites compile their tokens away before the page ever loads, so there is nothing neat to read. Then you sample: click the elements that matter and write down what you see. This is the tedious part, and it is honest work.

Colors: click a heading, a paragraph, a button, and a link. In the Computed tab (next to Styles), read off color and background-color. The little color swatches are clickable and show the hex value. A handful of elements usually reveals the whole palette, because good sites reuse relentlessly.
Type: do the same for font-family and font-size on the h1, h2, body text, and captions. Those four or five sizes are the type scale.
Spacing: hover elements in the Elements tree and watch the orange (margin) and green (padding) overlays on the page. If most gaps land on multiples of 4px or 8px, you have found the base unit.
Button states: a static click misses hover and focus styles. With a button selected, click :hov in the Styles pane and tick :hover to force the state on, then read the changed values. Repeat for :focus and :active.

One small gotcha: DevTools reports computed colors as rgb() values. Click the swatch and it will let you flip to hex.

How to name and organize extracted tokens

A pile of hex codes is not a token set until it has names, and naming is where most extractions stall. Two layers cover almost every case:

Value names describe what a thing is: blue-600, gray-100, space-4. Number color shades from light to dark, like paint swatches.
Role names describe what a thing is for, and point at a value name: color-primary is blue-600, color-text-muted is gray-500. Your components should use the role names, so you can swap the underlying value later without touching them.

When you are reverse-engineering someone else's site, work backwards from usage. First merge near-duplicates: three grays within a hair of each other are almost always one token plus rendering noise. Then let frequency tell you the roles. The color on all the body text is color-text. The saturated one on every primary button is color-primary. Keep the result in one flat file so it is easy to paste into whatever you build next.

The fast way: extract design tokens with Sitegeist

The manual method works, and it is worth doing once so you trust the output. But it can eat 20 minutes per site, and if you tear down sites for inspiration regularly, that adds up fast. Sitegeist is a free Chrome extension that does the whole survey in one click, locally in your browser. Nothing you look at leaves your machine.

Open the page you want to study, click the extension, and you get a teardown already organized the way a token file is:

Colors: the full palette with usage counts and the selectors each color comes from. The frequency analysis from Step 2, done for you, with receipts.
Typography: the type scale plus every loaded font with its individual weights, and variable fonts flagged so you know before you go font shopping.
Buttons: real button styles recreated with their hover, focus, and active states. This is the part manual sampling most often misses.
Spacing: the page's spacing scale, base unit and all.
Inspect overlay: click any element on the page for a curated style summary when you want to spot-check one specific component.

All of that is free. If you currently use another peek-under-the-hood tool, see how Sitegeist compares with CSS Scan, CSS Peeper, and Hoverify.

Exporting tokens: CSS variables, JSON, and Tailwind

Extraction only pays off when the tokens land in your project in a format you can actually use. Sitegeist exports three:

CSS variables (free): the extracted palette and scales as ready-made CSS custom properties. Paste them into your stylesheet and start referencing them immediately.
JSON tokens (Pro): a structured token file for design-system tools and build pipelines that consume tokens as data.
Tailwind config (Pro): the same tokens shaped as a Tailwind configuration, so the extracted colors, type scale, and spacing become your utility classes directly.

Sitegeist Pro is a one-time $19.99 purchase, not a subscription, and it also adds batch asset download, full-page screenshots, and full authored CSS and HTML copy. Since the whole teardown view and the CSS variables export are free, you can check the extraction quality on a real site before spending anything.

How to extract design tokens from a website