What's the fastest way to extract design tokens from a competitor's website?

Capture the site to Figma using Export to Figma (a free Chrome extension), then sample tokens directly from the captured Figma layers. Each text layer shows its font/size/weight in the right panel. Each shape shows its fill, stroke, effects as exact values. Measuring spacing between elements is one click in Figma. Way faster than the alternative of running automated audits and reading reports.

How do I find what font a website uses?

Right-click any text and Inspect — the Computed tab shows `font-family`. Or use a browser extension like WhatFont. Or capture the site to Figma with Export to Figma, where the captured text layers show the actual font name. The last method is fastest if you want multiple values at once.

Can I extract design tokens automatically across a whole site?

Yes — automated tools like CSS Stats and Project Wallace crawl a public URL and produce a token report listing every color, font size, and spacing value in use, with frequency counts. The output is a report rather than a Figma file. Capturing to Figma gives you working layers you can sample from interactively, which is often more useful for design work than a static report.

Is extracting another brand's design tokens legal?

Studying tokens for learning purposes — finding inspiration, understanding patterns — is generally fine. Cloning a brand's full token set and using it commercially in a way that competes with them gets into trademark territory. The line is roughly: use tokens as inspiration, not as copy-paste replication of someone else's design system.

What's the value of extracting tokens vs. just looking at a screenshot?

Screenshots show you the rendered result but no underlying values. You can't tell from a screenshot whether the spacing rhythm is 8px-grid or 5px-grid, what the exact color hex is, or which font weight is used where. Tokens are the system underneath the screenshot. Extracting them reveals decisions you can apply to your own work.

Why are some sites better for token extraction than others?

Sites with a deliberate design system (Stripe, Linear, Vercel, Anthropic) have a small, consistent token set — you can extract the design language in 20 minutes of inspection. Sites with hundreds of one-off inline styles, decades of design drift, or no design system at all produce noisier token sets that aren't useful as references.

Extract Design Tokens From Any Website (Colors, Fonts, Spacing)

What are design tokens?

Design tokens are the atomic values of a design system: the brand colors, the typography scale, the spacing rhythm, the shadow vocabulary, the border radius palette. Strong design systems have 5–15 tokens per category. Weak ones have hundreds of one-off values.

When you study a competitor or admired brand, the design tokens tell you more about their design philosophy than any individual page. Extracting them is a useful exercise for learning, auditing, or building your own design system informed by examples you respect.

Five methods to extract design tokens from a live site

Each has tradeoffs. The right method depends on whether you want a comprehensive audit, a quick sample, or a working Figma file you can sample from interactively.

1. Manual: Chrome DevTools

Right-click any element → Inspect. Look at the Computed Styles panel. You'll see the resolved color, font-size, padding, etc.

Pros: Free, built into Chrome, accurate (it's the actual rendered values). Cons: Slow — you're harvesting one value at a time. Easy to miss patterns across the site. No aggregation.

This is the "I just need one value" method. Useful when you're checking a specific element, not auditing a system.

2. Manual+: Browser extensions

Tools like ColorZilla (color picker), WhatFont (font identifier), and Pesticide (layout visualization) make manual inspection faster.

Pros: Faster than raw DevTools. Free. Visual. Cons: Still one-value-at-a-time. No pattern aggregation across the site.

This is the upgraded manual method. Better for quick sampling than DevTools, but still inspection rather than systematic extraction.

3. Automated: CSS Stats / Project Wallace

Services like cssstats.com and projectwallace.com crawl a public URL and produce comprehensive token reports. Every color in use, every font size, every spacing value, frequency counts, often with histograms.

Pros: Comprehensive, automatic, no manual work. Great for understanding the full design system, not just visible patterns. Cons: Public sites only — they can't crawl authenticated content. Output is a report, not a Figma file. Free tiers usually have limits.

This is the "I want a token audit" method. The reports reveal things you wouldn't notice through inspection (e.g., "this site uses 47 different colors but 80% of usage is concentrated in 6 of them").

4. Capture to Figma (interactive sampling)

Use a Chrome extension like Export to Figma to capture the entire site as editable Figma layers. Then sample tokens directly from the captured layers.

Once captured:

Click any text layer → font, size, weight, color, line height all shown in Figma's right panel.
Click any shape → fill, stroke, effects as exact Figma values you can copy.
Use Figma's distance measurement to read padding/margin (Option + hover).
Sample colors with the Figma eyedropper.
Group similar values to identify the design system.

Pros: Works on any site Chrome can render (including authenticated/logged-in pages, which CSS Stats can't reach). Output is a working Figma file, not just a report. Interactive — you can sample exactly the values you care about. Free tier (10 captures/mo). Cons: Manual inspection in Figma rather than auto-generated report — you need to know what you're looking for.

This is the "I want to work with the captured design tokens" method. Best for design work where you'll apply the tokens (or variants of them) to your own projects.

Install Export to Figma — free Chrome extension.

5. Custom script

For technical users: write a JavaScript snippet that runs in DevTools, walks the DOM, and extracts CSS custom properties (--color-primary, --spacing-md, etc.) plus resolved styles. Aggregate counts. Export as JSON.

Pros: Fully automated, customizable for your specific token taxonomy. Cons: Technical setup. Brittle on heavily-themed sites. Need to maintain the script as web tech evolves.

This is the "I'll write my own audit tool" method. Worth it if you do token extraction often enough to justify the script maintenance.

Recommended workflow for designers

If you do this often, the fastest practical path is:

Capture the site to Figma with Export to Figma (30 seconds).
Open the captured frames in Figma.
Sample tokens directly — color from a hero element, type scale from heading levels, spacing from the gap between sections.
Build local Figma styles from the sampled values. Right-click → "Add to styles."
Document the tokens in a Figma cover page: primary palette, type scale, spacing scale, shadow vocabulary, border radius range.

End result: a Figma styles library based on a real site's design tokens. Useful for inspiration, audits, or building on top of an existing visual identity.

What gets the cleanest tokens

Not every site is equally good as a token-extraction target. The cleanest extractions come from sites that:

Use modern CSS with custom properties (CSS variables) that have semantic names.
Have a deliberate, consistent design system (visible because most pages use the same handful of values).
Don't rely on hundreds of one-off inline styles.
Have stayed under active design system maintenance.

Sites that fit this description, as of writing: Stripe, Linear, Vercel, Anthropic, Figma itself, Notion, Tailwind UI examples. All produce clean, learnable token sets.

Sites that don't fit: old WordPress sites with decades of design drift, e-commerce stores with theme + plugin + custom CSS layering, anything where you can see at-a-glance inconsistency in spacing, color, or type. The tokens you'd extract from these are too noisy to be useful as references.

A practical example

Suppose you're designing a new SaaS product and want to study how Linear handles UI density (Linear is widely admired for compact, information-dense interfaces).

Capture linear.app to Figma with Export to Figma. (You may need to be signed in to capture the app itself; the marketing site is public.)
Open the captured file.
Sample 5 background colors — Linear uses a consistent dark palette with 4–5 distinct surface levels.
Read off the type scale — open a captured text layer, note the size/weight, repeat for each heading level. You'll find a tight scale (maybe 6 sizes total).
Measure the base spacing unit — pick a button or input, measure padding. You'll find Linear uses 8px-grid.
Document everything in a Figma cover page.

Now you have Linear's design tokens documented. Use them as a study reference, not a copy-paste. Build your own product's tokens with similar discipline — small, consistent, intentional.

Authenticated-site token extraction

This is where the Chrome extension approach pulls ahead of CSS Stats and similar crawlers. Most interesting design tokens are inside SaaS apps, not on marketing sites. If you want to understand how Linear's app (not just their marketing page) handles density, you need to be signed in.

Sign into the app in Chrome, navigate to the view you want, capture. CSS Stats can't reach behind login. Export to Figma can.

Pricing for Export to Figma

Free: 10 captures per month, forever.
Pro: $1/month (launch promo) for unlimited.