Extract design tokens from any website

Design Snap is a free Chrome extension that extracts design tokens — colors, typography, shadows and CSS variables — from any website, and exports them as Tailwind config, shadcn/ui theme, Style Dictionary JSON or Figma tokens.

Add to Chrome — it's free See PRO plans

Free plan · No account · 100% local analysis

PRO Extract
#0f172a #6366f1 #f8fafc #f59e0b #10b981 #64748b
0 colors · 0 fonts · 0 CSS variables
  • 5.0 rating · 800+ users on Chrome Web Store
  • Full design system extracted in ~1 second
  • 100% local — zero tracking
  • 0 dependencies · Manifest V3
  • 4 export formats, ready to paste
  • English & French interface
Features

What Design Snap extracts

Design Snap turns any live website into a structured design system: colors ranked by real usage, custom typography, unique radii and shadows with previews, and every CSS custom property declared on :root — captured in one click, organized in tabs, ready to export.

One click extracts a full design system

Press Extract and Design Snap reads the computed styles of the entire page — not one element at a time.

  • Colors ranked by actual frequency of use on the page, with hex values
  • Typography: custom families only (generic fallbacks are filtered out), sizes, weights, line-heights
  • Unique border-radii and box-shadows, each with a live preview
  • Every CSS custom property declared on :root
stripe.com
Design Snap popup on stripe.com showing the Colors tab: extracted color swatches with hex values, ranked by usage

Inspect any element's CSS on hover

The built-in inspector shows the computed styles of whatever you hover — selector, colors with swatches, font, size, radius and shadow — in a floating panel.

  • Hover to inspect, click to pin the panel
  • Copy element CSS gives you a clean, paste-ready CSS block
  • Press Esc to close — no DevTools digging
stripe.com
Design Snap inspector panel pinned on a button element, showing its selector, colors, font, size and radius with a Copy element CSS button

Turn any site into a shadcn/ui, Tailwind v4 or Style Dictionary theme PRO

Design Snap maps the extracted palette to semantic color roles — background, foreground, primary, secondary, muted, border — and generates production-ready theme files.

  • shadcn/ui variables ready to paste into globals.css
  • Tailwind v4 @theme block
  • Standard Style Dictionary v3 tokens ({ value, type }) for color, dimension, fontFamily, fontWeight, boxShadow and typography — ready for a Style Dictionary build pipeline
  • The site's real dark mode, extracted automatically — or a coherent generated one if the site has none
stripe.com
Design Snap Theme tab listing shadcn/ui color roles — background, foreground, primary, secondary, muted — each with its hex value

Preview the theme live, keep every snapshot

A live preview rebuilds a mini interface with the exact colors, typography and radii extracted from the page — so you see the design system, not just a list of values.

  • Light and dark preview with the site's real typefaces
  • 1 snapshot saved locally on the free plan
  • Unlimited snapshots with PRO: a library of every design system you've analyzed
stripe.com
Design Snap live theme preview: buttons, card and accent styles rebuilt from the colors, typography and radius extracted from stripe.com

Live theme preview

See the extracted design system applied to real UI components before you export anything.

Real dark modePRO

The site's actual dark variant, extracted — or generated coherently when the site doesn't have one.

Design DNA cardPRO

A downloadable visual card that sums up a site's design system — made to be shared.

Unlimited snapshotsPRO

Every extraction saved locally. Reopen the design system of any site you've already analyzed.

Bilingual interface

The extension and this site exist fully in English and French. Switch anytime.

Private by design

100% vanilla JS, 0 dependencies, no backend. Analysis never leaves your browser.

Exports

Export design tokens as Tailwind, shadcn/ui, Style Dictionary or Figma

Every extraction can be copied in 4 formats on the free plan — Style Dictionary JSON, CSS variables, tailwind.config.js and Figma (Tokens Studio) — plus shadcn/ui, Tailwind v4 @theme and a standard Style Dictionary v3 export with PRO. Each export is generated ready to paste, no cleanup needed.

tokens.json Style Dictionary
{
  "color": {
    "primary":    { "value": "#6366f1" },
    "background": { "value": "#f8fafc" }
  },
  "font": {
    "sans": { "value": "Inter" }
  },
  "radius": {
    "md": { "value": "8px" }
  }
}
variables.css CSS Variables
:root {
  --color-primary: #6366f1;
  --color-background: #f8fafc;
  --font-sans: 'Inter', sans-serif;
  --radius-md: 8px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.1);
}
tailwind.config.js Tailwind
theme: {
  extend: {
    colors: {
      primary: '#6366f1',
      surface: '#f8fafc',
    },
    fontFamily: { sans: ['Inter'] },
    borderRadius: { md: '8px' },
  },
}
figma-tokens.json Tokens Studio
{
  "global": {
    "color-primary": {
      "value": "#6366f1",
      "type": "color"
    },
    "font-sans": {
      "value": "Inter",
      "type": "fontFamilies"
    }
  }
}
globals.css shadcn/uiPRO
:root {
  --background: 0 0% 98%;
  --foreground: 222 47% 11%;
  --primary: 239 84% 67%;
  --primary-foreground: 0 0% 100%;
  --muted: 215 20% 65%;
  --radius: 0.5rem;
}
theme.css Tailwind v4PRO
@theme {
  --color-primary: #6366f1;
  --color-surface: #f8fafc;
  --font-sans: 'Inter', sans-serif;
  --radius-md: 8px;
  --shadow-sm: 0 1px 3px rgb(0 0 0 / .1);
}
tokens.json Style Dictionary v3PRO
{
  "color": {
    "color-01": { "value": "#6366f1", "type": "color" }
  },
  "fontFamily": {
    "family-1": { "value": "Inter", "type": "fontFamily" }
  },
  "typography": {
    "heading-1": {
      "value": { "fontFamily": "Inter", "fontSize": "32px", "fontWeight": "600" },
      "type": "typography"
    }
  }
}

Values above come from a real extraction. Design Snap fills each format with the tokens of the site you analyze.

Deep dives: Tailwind theme generator · shadcn/ui theme generator · Style Dictionary export · extract CSS variables · color palette extractor · vs DevTools & CSS Peeper

How it works

How to extract design tokens from a website

Extracting a website's design tokens with Design Snap takes three steps: install the extension, click Extract on any page, and copy the tokens in the format your stack uses. No account, no configuration, and nothing ever leaves your browser.

  1. Install

    Add Design Snap to Chrome from the Chrome Web Store. Free plan, no account, no sign-up.

  2. Extract

    Open any website, click the Design Snap icon, then press Extract. Colors, fonts, radii, shadows and CSS variables appear in about a second.

  3. Export

    Copy the tokens as Tailwind config, shadcn/ui theme, Style Dictionary JSON, CSS variables or Figma tokens — and paste them into your project.

Pricing

Simple pricing, no account required

Free covers the basics, forever. PRO ships production-ready tokens straight into your codebase — €3.99/month, €19.99/year (about 7 months free) or €49 once for a lifetime license, paid through Polar and activated with a key sent by email.

Free

Everything you need to start

€0

  • One-click token extraction
  • Colors, type, radii, shadows, :root variables
  • 4 export formats (JSON, CSS, Tailwind, Figma)
  • Element inspector
  • Live theme preview
  • 3 sites/day
  • 1 saved snapshot
Install free

PRO Monthly

All PRO features, month to month

€3.99/month

  • Everything in Free
  • Paste tokens straight into shadcn/ui, Tailwind v4 or Style Dictionary — no manual conversion
  • Extract the real dark-mode palette, not a guess
  • A one-page Design DNA card to share with your team or clients
  • Unlimited snapshots — never lose a session's work
Get PRO Monthly

30-day money-back guarantee

~7 months free

PRO Yearly

€1.67/month, billed yearly

€19.99/year

  • Everything in Free
  • Paste tokens straight into shadcn/ui, Tailwind v4 or Style Dictionary — no manual conversion
  • Extract the real dark-mode palette, not a guess
  • A one-page Design DNA card to share with your team or clients
  • Unlimited snapshots — never lose a session's work
Get PRO Yearly

30-day money-back guarantee

Lifetime

Pay once, PRO forever

€49 once

  • All PRO features, forever
  • All future updates included
  • One payment, no subscription
  • Move the license between devices
Get Lifetime

30-day money-back guarantee

License key emailed after purchase · Activate/deactivate per device · Payments by Polar · No account to create · 30-day money-back guarantee on all PRO plans

FAQ

Frequently asked questions

Yes. The free plan includes one-click extraction of colors, typography, radii, shadows and CSS variables, the element inspector, a live theme preview, 4 export formats, 3 sites/day and 1 saved snapshot. PRO (€3.99/month, €19.99/year or €49 lifetime) adds shadcn/ui and Tailwind v4 exports, real dark-mode extraction, the Design DNA card and unlimited snapshots.

Design Snap reads the computed styles of the page in your active tab, entirely inside your browser. It ranks colors by how often they are actually used, keeps only custom font families, deduplicates border-radii and box-shadows, and lists every CSS custom property declared on :root. One click, about a second.

No. All analysis happens 100% locally in your browser. The only network calls the extension can make are to Google Fonts (to render the theme preview with real typefaces) and to polar.sh (to validate a PRO license key). It never transmits the pages you visit, their content or your browsing history. No analytics, no third-party libraries. Read the full privacy policy.

The free plan exports Style Dictionary JSON, CSS variables (:root block), a tailwind.config.js theme object and Figma tokens (Tokens Studio JSON). PRO adds shadcn/ui semantic variables ready for globals.css, a Tailwind v4 @theme block, and a standard Style Dictionary v3 export ({ value, type } tokens for color, dimension, fontFamily, fontWeight, boxShadow and composite typography) that plugs straight into a Style Dictionary build pipeline. Every export is generated ready to paste into your project.

PRO adds shadcn/ui and Tailwind v4 theme exports, a standard Style Dictionary v3 export, the site's real dark mode extracted automatically (or a coherent generated one if the site has none), the downloadable Design DNA card, and unlimited snapshots. The license key arrives by email after purchase and can be activated or deactivated per device — no account required.

You pay €49 once and keep every PRO feature, including future updates, forever. Your key arrives by email right after checkout through Polar and can be moved between devices at any time.

It works on any regular web page Chrome allows extensions to read: production sites, staging environments and localhost. Browser-internal pages (chrome://) and the Chrome Web Store itself are restricted by Chrome for every extension.

DevTools shows the styles of one element at a time. Design Snap analyzes the whole page at once and returns an organized design system: colors ranked by usage, deduplicated typography, radii and shadows, and every :root CSS variable — already formatted as Tailwind config, shadcn/ui theme, Style Dictionary JSON or Figma tokens.

No account, ever. The free version installs and works immediately. PRO uses a license key sent by email after purchase; snapshots and the key are stored locally in your browser with chrome.storage.local.

Yes. With PRO, Design Snap maps the extracted palette to shadcn/ui semantic roles — background, foreground, primary, secondary, muted, border and more — and outputs a block ready for globals.css, plus a Tailwind v4 @theme equivalent, each with a real or generated dark variant.

Privacy

All analysis happens locally in your browser

Nothing is ever sent to a server. No analytics, no tracking, no account, no third-party libraries — the entire extension is vanilla JavaScript running on your machine.

Read the privacy policy