# CSS Extraction Playbook
After scraping the raw HTML, extract the design tokens systematically. Work through these layers in order.
## Layer 1: CSS Custom Properties (The Jackpot)
Search the HTML for `:root` blocks — these are design systems that have done your work for you:
```html
:root {
--color-bg: #0a0a0f;
--color-primary: #7c3aed;
--font-sans: 'Inter', sans-serif;
--radius: 12px;
}
```
Grab every `--variable` and classify it: color, font, spacing, shadow, radius, animation.
## Layer 2: Font Imports
Look for `@import` at the top of `` blocks and in `` tags:
```html
```
Or within CSS:
```css
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;700&display=swap');
```
Record the font families and the weights loaded — the weights tell you what's used (e.g., 300 = light body, 700 = bold headings).
## Layer 3: Tailwind Config (if site uses Tailwind)
Signs it's Tailwind: classes like `bg-purple-600`, `text-gray-200`, `rounded-xl`, `shadow-lg`, `backdrop-blur-md`.
If there's a custom Tailwind theme, it may appear as an inline script:
```html
tailwind.config = {
theme: {
extend: {
colors: { brand: '#7c3aed' }
}
}
}
```
For standard Tailwind sites without custom config, use the visual screenshot to identify which Tailwind colors they're using, then replicate with the same class names.
## Layer 4: Repeated Class Patterns
Scan the HTML for repeated class combinations on similar elements. The pattern reveals the design system:
```html