How to extract design tokens from any website

Every value that makes a page look the way it does is sitting in the browser, already computed. You don't have to estimate anything from a picture. There are several good ways to get those values out, and for a one-off the free ones are often enough.

1. By hand, in devtools

Open the console on the page and run this. It counts the computed values across every visible element, most used first, and needs nothing installed.

const count = (m, k) => k && m.set(k, (m.get(k) || 0) + 1);
const type = new Map(), color = new Map(), bg = new Map(), radius = new Map();
for (const el of document.querySelectorAll("body *")) {
  if (!el.offsetWidth) continue;
  const s = getComputedStyle(el);
  if (el.innerText?.trim()) {
    count(type, `${s.fontFamily.split(",")[0]} ${s.fontSize}/${s.lineHeight} ${s.fontWeight}`);
    count(color, s.color);
  }
  if (s.backgroundColor !== "rgba(0, 0, 0, 0)") count(bg, s.backgroundColor);
  if (s.borderRadius !== "0px") count(radius, s.borderRadius);
}
const top = (m) => [...m].sort((a, b) => b[1] - a[1]).slice(0, 8);
console.table(top(type)); console.table(top(color));
console.table(top(bg)); console.table(top(radius));

Good for a quick look. It won't give you hover states or motion, and it counts how often a value appears rather than how much of the page it covers.

2. A free extractor: Dembrandt

Dembrandt is an MIT-licensed tool that pulls colours, typography, spacing, borders, shadows, motion and components in one command, by running npx dembrandt example.com. It also runs as an MCP server for clients such as Cursor, Windsurf and Claude Code, and can write a DESIGN.md. Its own README lists the limits: hover and focus come from the CSS rather than from interacting, and canvas or WebGL sites can't be read.

If you want tokens and don't mind running a tool yourself, try this first. Others in the same space include extract-design-system and design.md, which we haven't tested.

3. A ready-made DESIGN.md

DESIGN.md is a format from Google Labs: tokens in YAML, followed by prose explaining how to use them, in a single file your agent can read. It's still marked alpha, so expect changes. It comes with a CLI that checks token references and contrast, and exports to Tailwind or W3C DTCG.

There are community collections of these files for well-known brands. They're quick to start from, but check how recently one was updated, since a site can change after someone wrote its file down.

4. From inside your agent: plagio

plagio is ours. Your agent names a public page, and it opens in a real browser on our side and returns the tokens, weighted by how much of the page they cover, along with the markup, the hover states it measured and the motion. It costs money and the options above don't, so it makes sense when you do this often or need more than the tokens.

Which to use

What you can do with them

Learning from how a page is built is how design has always been learned. Reusing someone's logo, photos, words or their whole brand identity isn't okay, and Dembrandt's README says much the same. Use a reference to understand what works, then choose your own values. We're not lawyers, so if it matters, ask one.