How to Extract Design Tokens (Colors, Fonts, Spacing) from Any Website

You're auditing a competitor. Or rebuilding an old site. Or just curious how your favorite SaaS picked their color palette. Whatever the reason, you need the design tokens — the colors, fonts, spacing scale, and shadows — that make a website feel the way it feels.

Here's how to extract them quickly, without screenshots and without manual eyedropping.

What are design tokens?

Design tokens are the atomic values that define a design system:

Color tokens — primary, secondary, neutral, semantic (success, warning, error)
Typography tokens — font families, weights, sizes, line heights
Spacing tokens — the rhythm of paddings, margins, gaps
Radius tokens — corner roundness across components
Shadow tokens — elevation, blur, color of shadows
Border tokens — width, color, style

Every modern design system runs on tokens, and every webpage you visit has them — even if the team that built it didn't formalize them.

Why extract design tokens from a website?

Competitive audits. Understand a competitor's visual system at a glance.
Brand consistency checks. Verify your own site is using the tokens it should be.
Design inspiration. Adopt a palette or type scale you love as the starting point for your own.
Migration work. You're rebuilding an old site and need to capture its tokens before you redesign.
Learning. Reverse-engineer how mature design systems use color and spacing.

The traditional ways (and why they're slow)

The old workflow for token extraction is painful:

DevTools eyedropper — open DevTools, click each element, copy the color/font/size, paste into a doc. Repeat for every element on the page. Hours.
Browser extensions like ColorZilla — fast for colors, useless for spacing, fonts, and structure.
Manual screenshot + Figma eyedropper — lossy, and you still don't get exact values.
"What font is this?" lookups — works for fonts, but you do it one element at a time.

None of these capture a system. They capture isolated values.

A faster way: capture the whole component

Modern token extraction works by capturing a full element — say a hero section or a card — and pulling all its design values at once. Instead of inspecting one property at a time, you get the entire token sheet in a single action.

This is what Pluck does. Pluck reads the rendered DOM and computed CSS of any element on any webpage, and outputs a structured prompt with every design value the element uses — colors, fonts, spacing, radii, shadows, the lot.

How to extract design tokens with Pluck

1. Install Pluck

Add the Pluck Chrome extension to your browser.

2. Open the site you want to audit

Any public webpage. Login-walled apps and dynamic SPAs work too — Pluck reads what your browser renders.

3. Pluck a representative component

For a token audit, pluck a component that uses a lot of the design system. A pricing card, a hero section, or a feature grid usually exposes most of the brand's tokens at once.

Click the Pluck icon, hover the component, click to capture.

4. Copy as LLM Prompt

Pluck's default copy mode packages the captured element's full computed style data into a prompt. Click copy.

5. Ask an AI to extract tokens

Paste into Claude or ChatGPT with a prompt like:

"From this captured component, extract a design token sheet: all unique colors (with hex values), font families and weights, font sizes, line heights, spacing scale, border radii, and shadows. Format as a JSON token file."

The AI parses the CSS, deduplicates values, and gives you a clean token file you can drop into Tailwind, CSS variables, Style Dictionary, or Figma variables.

Example output

Here's a typical token sheet extracted this way:

{
  "colors": {
    "background": "#0A0A0F",
    "foreground": "#FFFFFF",
    "primary": "#5B21B6",
    "primaryForeground": "#FFFFFF",
    "muted": "#27272A",
    "border": "#27272A"
  },
  "typography": {
    "fontFamily": "'Inter', system-ui, sans-serif",
    "heading": { "size": "48px", "weight": 700, "lineHeight": "1.1" },
    "body": { "size": "16px", "weight": 400, "lineHeight": "1.6" }
  },
  "spacing": {
    "xs": "8px",
    "sm": "12px",
    "md": "16px",
    "lg": "24px",
    "xl": "32px"
  },
  "radii": { "sm": "6px", "md": "8px", "lg": "12px" },
  "shadows": {
    "elevation1": "0 1px 2px rgba(0,0,0,0.05)",
    "elevation2": "0 4px 6px rgba(0,0,0,0.1)"
  }
}

You went from "I want to know how this site is styled" to a structured, machine-readable token file in under two minutes.

What to do with extracted tokens

Drop them into your codebase. Tailwind, CSS variables, Sass, Style Dictionary — all accept token files.
Import into Figma. Figma Variables and the Token Studio plugin both accept JSON tokens.
Compare your site to a benchmark. Run the same extraction on your own site and diff the token sheets to spot inconsistencies.
Build a moodboard with structure. Instead of pasting screenshots, paste actual token sheets from sites you admire.

A note on intent

Design tokens themselves aren't copyrightable. Specific color combinations and brand identities are. Extract tokens to learn, audit, and study — not to clone a brand wholesale.

Bottom line

Eyedropping a website one element at a time is a 2015 workflow. Capture the whole component, let an AI pull the token sheet, and move on with your day.

Try Pluck free — 50 plucks/month on the free plan, unlimited for $10/month.