What does BrandSpy do?

BrandSpy extracts colors, fonts, typography, spacing, and CSS variables from any website and generates production-ready Tailwind configs, CSS exports, and Figma tokens.

Is it legal to analyze other websites?

Yes — BrandSpy extracts publicly available CSS and styles for learning and prototyping purposes. Always follow copyright and licensing guidelines for any assets you use.

What formats can I export?

BrandSpy supports multiple export formats including Tailwind CSS config, raw CSS variables, Figma design tokens, and PDF design system documentation.

Do I need to install anything?

No installation required. BrandSpy is a web-based tool that works entirely in your browser. Subscribe to PRO, paste a URL, and start analyzing.

Generate Tailwind Config From Any Website

You've found a website with a beautiful design system. Instead of manually extracting every color, font, and spacing value, what if you could generate a complete tailwind.config.js in one click? Here's how.

Why Generate Tailwind Configs?

⚡
Speed — Skip manual config creation, start building immediately
🎯
Accuracy — No guessing hex codes or spacing values
📚
Learning — Study how top sites structure their design tokens
🔄
Prototyping — Quickly match a reference design for client demos

What a Complete Tailwind Config Includes

Colors

Primary, secondary, accent, neutral scales

Typography

Font families, sizes, weights, line-heights

Spacing

Margins, paddings, gaps in px/rem

Shadows

All box-shadow values as Tailwind utilities

Border Radius

All rounded values used on the site

Animations

Keyframes and transition durations

The Manual Way (Don't Do This)

The old workflow:

1. Open DevTools, inspect every element
2. Collect colors, fonts, spacing manually
3. Convert values to Tailwind format
4. Write tailwind.config.js by hand
5. Realize you missed 20 colors...
6. Repeat for 2+ hours

The Automated Way (10 Seconds)

BrandSpy generates production-ready Tailwind configs automatically:

1
Enter any URL
2
BrandSpy crawls the entire stylesheet
3
AI filters out framework presets (Tailwind/Bootstrap defaults)
4
Generates semantic Tailwind config with proper naming
5
Copy-paste into your project

Sample Output

Here's what a generated config looks like:

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-primary': '#4F46E5',
        'brand-secondary': '#10B981',
        'brand-accent': '#F59E0B',
        'neutral-100': '#F3F4F6',
        'neutral-900': '#111827',
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        display: ['Cal Sans', 'Inter', 'sans-serif'],
      },
      fontSize: {
        'xs': ['12px', { lineHeight: '16px' }],
        'sm': ['14px', { lineHeight: '20px' }],
        'base': ['16px', { lineHeight: '24px' }],
        'lg': ['18px', { lineHeight: '28px' }],
        'xl': ['20px', { lineHeight: '28px' }],
        '2xl': ['24px', { lineHeight: '32px' }],
        '3xl': ['30px', { lineHeight: '36px' }],
      },
      spacing: {
        '18': '72px',
        '22': '88px',
      },
      borderRadius: {
        'xl': '12px',
        '2xl': '16px',
      },
      boxShadow: {
        'card': '0 4px 6px -1px rgb(0 0 0 / 0.1)',
        'elevated': '0 10px 15px -3px rgb(0 0 0 / 0.1)',
      },
    },
  },
}

Full Extraction Capabilities

BrandSpy's Tailwind export includes:

Color palette (filtered)

Font families

Font sizes with line-heights

Font weights

Spacing scale (margin/padding)

Gap values

Border radius

Border widths

Box shadows

Text shadows

Keyframe animations

Transition durations

Breakpoints

Z-index scale

Real Use Cases

🎯 Client Match

Client says "make it look like Linear.app" — extract their config, customize colors, done.

📚 Learning Tool

See how Stripe structures their spacing scale, or how Vercel handles typography.

⚡ Rapid Prototyping

Start a new project with a proven design system foundation instead of defaults.

🔄 Migration

Converting a legacy CSS codebase to Tailwind? Extract the existing design tokens first.

Manual vs Automated

Aspect	Manual	BrandSpy
Time	2+ hours	10 seconds
Completeness	Miss 30% of values	100% extracted
Framework filtering
Semantic naming
Animations included

Frequently Asked Questions

Does it work with Tailwind v4?

Yes! BrandSpy outputs both v3 (JavaScript config) and v4 (CSS-based config) formats.

What if the site already uses Tailwind?

BrandSpy filters out default Tailwind colors so you only get the custom theme extensions—the actual brand design tokens.

Can I export to other formats?

Yes! BrandSpy also exports to CSS Variables, Tailwind config, and PDF style guides.

Is this legal?

Yes. CSS values are publicly accessible. You're not copying code—you're extracting design tokens for learning and prototyping.

Related Guides

🎨 Extract Colors From Any Website
✏️ Find Fonts Used on Any Website
🔧 Extract Design Tokens from Tailwind Sites

Generate Your First Config

Stop spending hours on manual extraction. Get production-ready Tailwind configs from any website in seconds.

Try Tailwind Generator →