Back to Blog
Advanced

Extract Design Tokens From Any Website

January 25, 202610 min read

Design tokens are the atomic building blocks of design systems—colors, typography, spacing, and effects stored in a portable format. Instead of building tokens from scratch, what if you could extract them from any existing website?

What Are Design Tokens?

Design tokens are named entities that store design decisions. Instead of hardcoding #4F46E5 everywhere, you define color.brand.primary once.

Token categories:

🎨 Color — Brand, semantic, neutral
✏️ Typography — Fonts, sizes, weights
📏 Spacing — Margins, padding, gaps
🔲 Border — Radius, width, style
💫 Shadow — Elevation levels
⚡ Motion — Duration, easing

The Design Tokens Standard

The Design Tokens Community Group defines a standard format for design tokens. The latest spec defines:

  • • $value — The actual token value
  • • $type — Token type (color, dimension, fontFamily, etc.)
  • • $description — Human-readable description
  • • Nested groups for organization
{
  "color": {
    "brand": {
      "primary": {
        "$value": "#4F46E5",
        "$type": "color",
        "$description": "Primary brand color"
      }
    }
  },
  "spacing": {
    "sm": {
      "$value": "8px",
      "$type": "dimension"
    }
  }
}

Why Extract Tokens From Websites?

  • 🚀
    Skip the Setup — Start with a proven token structure instead of building from scratch
  • 📚
    Learn from Leaders — See how Stripe, Linear, or Vercel structure their tokens
  • 🔄
    Migration — Convert legacy CSS codebases to modern token systems
  • 🎯
    Client Matching — Extract client's existing brand into portable tokens

Where Design Tokens Go

🎨 CSS Variables & Tailwind

Import JSON directly. Sync design ↔ code.

⚙️ Style Dictionary

Transform tokens to any platform (CSS, iOS, Android).

🌬️ Tailwind CSS

Generate tailwind.config.js theme extensions.

📄 CSS Variables

Native custom properties for any framework.

How BrandSpy Extracts Tokens

BrandSpy crawls websites and generates design tokens automatically:

Tokens extracted:

Color tokens (with semantic naming)
Typography tokens (family, size, weight)
Spacing tokens (padding/margin scale)
Border radius tokens
Shadow tokens (elevation levels)
Animation tokens (duration, easing)
Gradient tokens
Z-index tokens

Sample Token Output

{
  "$schema": "https://design-tokens.github.io/community-group/format/",
  "color": {
    "brand": {
      "primary": { "$value": "#4F46E5", "$type": "color" },
      "secondary": { "$value": "#10B981", "$type": "color" }
    },
    "neutral": {
      "100": { "$value": "#F3F4F6", "$type": "color" },
      "900": { "$value": "#111827", "$type": "color" }
    }
  },
  "typography": {
    "fontFamily": {
      "sans": { "$value": "Inter, system-ui, sans-serif", "$type": "fontFamily" },
      "display": { "$value": "Cal Sans, Inter, sans-serif", "$type": "fontFamily" }
    },
    "fontSize": {
      "sm": { "$value": "14px", "$type": "dimension" },
      "base": { "$value": "16px", "$type": "dimension" },
      "lg": { "$value": "18px", "$type": "dimension" }
    }
  },
  "spacing": {
    "xs": { "$value": "4px", "$type": "dimension" },
    "sm": { "$value": "8px", "$type": "dimension" },
    "md": { "$value": "16px", "$type": "dimension" },
    "lg": { "$value": "24px", "$type": "dimension" }
  }
}

Manual vs Automated Extraction

AspectManualBrandSpy
Time4+ hours10 seconds
Standard format
CSS Variables compatibleRequires conversion
Semantic naming

Frequently Asked Questions

What's the difference between design tokens and CSS variables?

CSS variables are one implementation of design tokens. Tokens are platform-agnostic—they can be transformed to CSS, iOS Swift, Android XML, or any other format.

Does BrandSpy output Tokens Studio format?

Yes! The standard format is compatible with many design tools. You can also export directly to CSS Variables and Tailwind config.

Can I customize token names after extraction?

Absolutely. BrandSpy generates semantic names automatically, but you can edit the JSON before importing to your tools.

Related Guides

Generate Design Tokens in Seconds

Stop building token systems from scratch. Extract design tokens from any website—export to CSS Variables and Tailwind.

Try Design Tokens Generator →

Advanced 2026 Analysis 🚀

Beyond basic extraction, BrandSpy now features an advanced mathematical heuristic engine:

  • • APCA Contrast: Checks colors against the new WCAG 3.0 advanced perceptual contrast algorithm.
  • • Color Blindness Simulation: Verifies palettes against Protanopia and Deuteranopia matrices.
  • • Typography Scales: Mathematically detects geometric growth ratios (e.g., Major Third, Golden Ratio).
  • • Grid Compliance: Calculates the percentage of margins/paddings that obey strict 8-point grid rules.

You can analyze any website for free to see the math behind the design.