How to Extract Design Tokens from Any Website in Under 5 Minutes
You see a beautiful product website. Nice colors. Great spacing. Interesting button styles. You want to match that aesthetic for your own app.
You could manually inspect the live site, hunt through CSS, and record every color value. That takes 30-45 minutes per page. You could use a CLI tool to automatically extract the values. That takes 5 minutes. Or you could paste the URL into Matchkit and get a structured design system in under 2 minutes.
This guide shows all three approaches, ranked by speed and effort. Pick the one that matches your time budget and design goals.
Method 1: Manual Extraction with DevTools (30-45 Minutes)
This is the slowest approach, but it requires no tools. Just a browser and patience.
Open the website in your browser. Right-click on a button. Select "Inspect" or "Inspect Element." The browser DevTools open, showing the HTML and CSS for that element.
Look at the Computed styles tab. This shows all the CSS properties actually applied to the element (not just what's in the stylesheet, but the final computed result).
Record these values:
For colors: Look for color, background-color, border-color. Copy the hex, RGB, or color name value.
For spacing: Look for padding, margin, gap, width, height. These are usually in pixels or rems.
For radius: Look for border-radius. Record the value.
For shadows: Look for box-shadow. These are complex values, so copy exactly.
For fonts: Look for font-family, font-size, font-weight, line-height. Record all of them.
Here's a concrete example. Inspecting a button on Stripe.com:
Button element computed styles:
- background-color: rgb(0, 102, 255)
- color: rgb(255, 255, 255)
- border: none
- border-radius: 4px
- padding: 8px 16px
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
- font-size: 14px
- font-weight: 500
- cursor: pointer
Now repeat this for every key component on the site: buttons, cards, headings, inputs, links, navigation items. You need at least 5-8 components to establish a pattern.
Create a spreadsheet or a text file and compile all the values:
COLORS:
- Primary blue: #0066FF
- Secondary gray: #F5F5F5
- Text dark: #1A1A1A
- Text light: #666666
SPACING:
- Button padding: 8px 16px
- Card padding: 16px
- Section margin: 32px
- Gap (items): 12px
RADIUS:
- Button: 4px
- Card: 8px
- Large modal: 12px
FONTS:
- Family: Segoe UI, system-ui, sans-serif
- Body size: 14px
- Heading size: 24px
- Font weight (normal): 400
- Font weight (bold): 600
This method is tedious, but it teaches you what to look for. Use it if you want to understand the site's design decisions deeply.
Method 2: Automated Extraction with CLI Tools (5 Minutes)
CLI tools automate the manual inspection process. They run a headless browser, visit every page, extract computed styles from key elements, and output a report.
Dembrandt
Dembrandt is a Node.js tool that scans a website and extracts design tokens automatically.
Install it:
npm install -D dembrandt
Run it:
npx dembrandt https://example.com
Dembrandt opens the site in a headless Chrome browser, inspects key elements (buttons, headings, cards, inputs), and outputs a JSON file with extracted tokens:
{
"colors": {
"primary": "#0066FF",
"secondary": "#F5F5F5",
"text": "#1A1A1A",
"textLight": "#666666"
},
"spacing": {
"xs": "8px",
"sm": "12px",
"md": "16px",
"lg": "24px"
},
"typography": {
"fontSize": {
"sm": "14px",
"base": "16px",
"lg": "20px"
},
"fontFamily": "system-ui, -apple-system, Segoe UI, sans-serif",
"fontWeight": {
"normal": 400,
"bold": 600
}
},
"radius": {
"sm": "4px",
"md": "8px",
"lg": "12px"
}
}
Convert this JSON into CSS custom properties in your globals.css:
@theme {
--color-primary: #0066FF;
--color-secondary: #F5F5F5;
--color-text: #1A1A1A;
--color-text-light: #666666;
--spacing-xs: 8px;
--spacing-sm: 12px;
--spacing-md: 16px;
--spacing-lg: 24px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--font-family-sans: system-ui, -apple-system, Segoe UI, sans-serif;
--font-size-sm: 14px;
--font-size-base: 16px;
--font-size-lg: 20px;
--font-weight-normal: 400;
--font-weight-bold: 600;
}
That's it. Total time: 5 minutes.
Yoink (Chrome Extension)
Yoink is a Chrome extension that lets you click elements on a live site and extracts their styles to a clipboard-friendly format.
Install from Chrome Web Store, then click the Yoink icon, click elements you want to inspect, and copy the computed styles.
Less automated than Dembrandt, but faster if you only need a few specific components.
StyleSniff
StyleSniff is a browser-based tool that scans a site and generates a design token report. Paste the URL, wait 30 seconds, and get a structured token list.
Use it at https://stylesniff.com/
Output includes colors, fonts, spacing, shadows, all organized by frequency (which values appear most often on the site).
Method 3: Matchkit URL Extraction (Under 2 Minutes)
Matchkit's new URL extraction feature is the fastest approach. Paste your website or app URL, Matchkit scans it, extracts components, and stores them in a structured library.
Go to Matchkit. Log in or sign up (free).
Click "Extract from URL." Paste your website URL. Wait 10-15 seconds while Matchkit scans the site.
Matchkit displays your extracted design tokens in a visual configurator:
- Colors extracted and organized into a palette
- Spacing scale calculated from observed values
- Border radius and shadow values detected
- Typography (font family, sizes, weights) extracted
- Button styles, card styles, input styles identified
Now you can:
- Adjust the extracted values if they're off (e.g., tweak a color that's slightly wrong)
- Export as a ZIP file with complete design system (globals.css, component library, rules files)
- Download with all three rules files (SKILL.md for Claude Code, .cursor/rules/design.mdc for Cursor, copilot-instructions.md for Copilot)
Your extracted design system is now AI-ready. Every token is stored as a CSS custom property. Every component is pre-built. Every rules file is already written.
The Pro plan (€9/month) includes URL extraction with live sync, meaning you can update the source website and pull the latest design changes into your design system automatically.
From Raw Values to an AI-Ready Design System
Once you've extracted tokens from a website, you need to organize them into a proper design system that AI tools can follow.
The Mapping Process
Raw extracted values look like this:
Button background: #0066FF
Button padding: 8px 16px
Button border-radius: 4px
Card background: #FFFFFF
Card padding: 16px
Card box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)
Map these to semantic token names:
#0066FF → --color-primary
#FFFFFF → --color-surface
8px → --spacing-sm
16px → --spacing-md
4px → --radius-sm
0 1px 3px rgba(0, 0, 0, 0.1) → --shadow-sm
Extracted CSS Value → Design System Axis
This is where Matchkit's extraction is powerful. It doesn't just grab raw values. It identifies the design decisions behind them.
For example:
Extracted color #0066FF
Matchkit analyzes this color:
- What's the lightness? (0.64 in OKLCH space)
- What's the chroma? (0.25)
- What's the hue? (260 degrees)
Matchkit recognizes this as a brand primary color and assigns it to the "color-primary" axis.
Extracted spacing 8px, 12px, 16px, 24px, 32px
Matchkit recognizes this as a consistent spacing scale and assigns values to --spacing-xs, --spacing-sm, --spacing-md, --spacing-lg, --spacing-xl.
Extracted border-radius values 4px, 8px, 12px
Matchkit assigns these to --radius-sm, --radius-md, --radius-lg.
The mapping is intelligent. It doesn't just extract raw numbers. It organizes them into your 11 design axes so Claude Code and Cursor understand the meaning behind each token.
Legal Considerations
Extracting design tokens (colors, spacing, fonts, shadows) for inspiration is generally legal. These are functional CSS values, not copyrightable creative expression.
However, pixel-perfect recreation of another site's distinctive visual identity could raise trade dress concerns. Design tokens are the foundation, but the overall composition, layout, and unique styling elements belong to the original creator.
Use extracted tokens as a starting point and adjust to make the design your own. Change colors slightly. Adjust spacing. Mix in your own brand elements. The extracted tokens are a reference, not a blueprint for copying.
When in doubt about your specific use case, consult a lawyer. But extracting and using design tokens is a standard practice in the design community.
Frequently Asked Questions
Q: How do I extract design tokens from a website?
A: Three methods ranked by speed: (1) Manually inspect key elements (buttons, cards, headings) in browser DevTools and record computed styles for colors, radius, shadows, fonts, and spacing (30-45 minutes). (2) Use a CLI tool like Dembrandt (npx dembrandt https://example.com) that automates the extraction via headless browser (5 minutes). (3) Paste the URL in Matchkit's configurator for automatic extraction and axis mapping (under 2 minutes).
Q: Is it legal to copy design tokens from another website?
A: Extracting design values (colors, border-radius, font choices, spacing) for inspiration is generally fine. Design tokens are functional CSS values, not copyrightable creative expression. However, pixel-perfect recreation of another site's distinctive visual identity could raise trade dress concerns. Use extracted tokens as a starting point and adjust to make the design your own. When in doubt, consult a lawyer for your specific situation.
Q: Can I extract design tokens from a website built with React or a SPA?
A: Yes, but SPAs require a headless browser for extraction since the styles are rendered client-side. Dembrandt uses Playwright to fully render pages before extracting computed styles. The manual DevTools approach also works since the browser renders everything. CSS-only tools like Project Wallace may miss styles that are injected via JavaScript.
Once you've extracted design tokens from a reference site, the next step is turning those tokens into an AI-readable design system. Read "How to Build a Design System Your AI Coding Tool Actually Follows" to learn how to organize extracted tokens into globals.css, component libraries, and rules files that Claude Code and Cursor understand.
Or use Matchkit's URL extraction to skip the manual work entirely. Extract, adjust, and download a complete, AI-ready design system in seconds.