How to Extract Design Tokens from Any Website: 5 Methods Compared

It depends on what you need. For one colour or one font size, DevTools is quickest. For a full system (colour roles, a type scale, a spacing scale, radii, shadows and motion) you want a method that looks at the whole page and counts how often each value is used.

A design token is a named design decision: a colour, a size, a duration. A website doesn't ship its tokens as a file. You recover them from the CSS it sends or from what the browser renders, and each method below does one of those.

• Browser DevTools: computed styles per element, and Chrome's CSS Overview for the whole page.
• CSS custom properties: the variables the site's authors defined, read from the console.
• Browser extensions: point-and-click inspectors that list colours, fonts and assets.
• Figma import: the page rebuilt as Figma layers, with styles you can browse.
• Automated measurement: a tool renders the page and measures every visible element.

Use the Computed tab for exact values on one element, and the CSS Overview panel for a summary of the whole page. Both are built into Chrome and free.

Inspect an element, then open the Computed tab in the Elements panel. Chrome's documentation says to "use the Computed tab to view only the CSS that's actually being applied to an element." In the Styles tab you can hover a custom property to see its value in a tooltip.

For a page-wide view, open CSS Overview:

1. 1Open DevTools on the page.
2. 2Open Customize and control DevTools (the three-dot menu), then More tools > CSS Overview. You can also run the CSS Overview command from the Command Menu.
3. 3Click Capture overview.
4. 4Read the Colors section (colours grouped by type, such as background and text, plus text with low contrast) and Font info (fonts grouped by size, weight and line height). Click a value to see the elements that use it.

CSS Overview arrived as a preview feature in Chrome 96. It gives you the raw ingredients, but it doesn't tell you which colour is the background and which is the accent, or which sizes form the type scale. You still assign roles by hand.

Run a short script in the DevTools Console that collects every --name from the page's stylesheets and reads its value on :root. If the site defines its tokens as CSS variables, this is the closest you'll get to its own token file, names included.

MDN describes the reading part: custom properties are read "just like standard properties", with getComputedStyle(element).getPropertyValue("--my-var"). The common practice is to declare them on :root "so that it can be referenced globally". The browser doesn't list custom property names for you, so the script walks the stylesheets to find them:

// Lists every CSS custom property that resolves on :root, with its value.
{
  const names = new Set();
  const walk = (rules) => {
    for (const rule of rules) {
      if (rule.style) for (const prop of rule.style) if (prop.startsWith("--")) names.add(prop);
      if (rule.cssRules) walk(rule.cssRules); // @media, @supports, @layer, nesting
      if (rule.styleSheet) walk(rule.styleSheet.cssRules); // @import
    }
  };
  for (const sheet of document.styleSheets) {
    try {
      walk(sheet.cssRules);
    } catch {
      console.warn("Can't read a stylesheet from another origin:", sheet.href);
    }
  }
  const root = getComputedStyle(document.documentElement);
  const rows = [...names].sort().map((name) => ({ name, value: root.getPropertyValue(name).trim() }));
  console.table(rows.filter((row) => row.value));
}

Two limits. First, stylesheets served from another origin without CORS can't be read: the CSSOM spec says the cssRules getter must "throw a SecurityError exception" for them, so the script skips those and warns. Second, many sites don't use variables, or use them only for a few values, so an empty or short table is common. Sites themed with shadcn/ui usually expose roles such as --background, --primary and --radius on :root.

CSS Peeper is a well-known option: a Chrome extension that lists a page's colours, typography and assets, with contrast checks. Its site offers a free version and paid plans, and says you can export the palette "with just one click".

Extensions are quicker than DevTools for a first look, since they gather colours and fonts into one panel. Like CSS Overview, they report what is on the page rather than what each value is for, so you still turn the list into roles and scales yourself.

The Livery browser extension does something different: it measures pages behind your login (dashboards, settings screens) into a private kit.

Yes. Plugins such as html.to.design rebuild a web page as editable Figma layers, and can create local styles from it. That's useful when the next step is design work rather than code.

html.to.design's documentation lists URL import, a browser extension for pages behind a login, multi-viewport and dark and light imports, and local styles among its free features, with unlimited imports on its PRO plan (under a fair-use limit of 1,000 imports a month). On each import you can create Figma styles from the page or apply your existing local styles.

Livery for Figma takes the same route for whole sites: the extension copies each page, with its text, images, videos and fonts, into Figma. A Figma copy gives you every layer; it doesn't give you a ranked token set or the rules behind it.

A tool loads the page in a real browser, reads the computed style of every visible element and counts the values, so the most used ones become the tokens. It's the only method here that assigns roles and shares for you.

Livery works this way. Paste a public website, or put livery.site/ in front of its address, and it renders the page at desktop, tablet and phone widths, then measures colours (with roles such as background, surface, text, border and accent, for each theme it finds), the type scale, the spacing base and scale, radii with how often each is used, shadows, breakpoints and motion timing. No AI model writes the values. It writes tokens.json alongside rules.md, components.md, layout.md, motion.md and a SKILL.md, so an AI coding agent can apply the design, not only read the numbers.

Measured tokens are style, and free to reuse. A site's logo, photos, copy and paid fonts belong to its owner.

Use DevTools or the console to check a few exact values, a Figma plugin when a designer will work on the result, and automated measurement when you want a whole token set that an agent or a developer can apply.