Your First Extraction

This guide walks through extracting design tokens from a real website.

Prerequisites

• A StyleGrab account (sign up here)
• An API key (create one in Dashboard → Settings → API Keys)

Step 1: Pick a Target URL

For this example, we’ll extract tokens from Stripe’s website—they have a well-designed system with clear color and typography choices.

https://stripe.com

Step 2: Start the Extraction

curl -X POST https://api.stylegrab.dev/api/extractions \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://stripe.com",
    "options": {
      "wait_for": "networkidle"
    }
  }'

Response:

{
  "id": "ext_h3k9x2m1",
  "url": "https://stripe.com",
  "status": "pending",
  "created_at": "2024-01-15T10:30:00Z"
}

Save the id—you’ll need it to fetch results.

Step 3: Check Status

Extractions run asynchronously. Poll until status is completed:

curl https://api.stylegrab.dev/api/extractions/ext_h3k9x2m1 \
  -H "Authorization: Bearer YOUR_API_KEY"

Or set up a webhook to get notified automatically.

Step 4: Review the Tokens

Once complete, the response includes extracted tokens:

{
  "id": "ext_h3k9x2m1",
  "url": "https://stripe.com",
  "status": "completed",
  "tokens": {
    "colors": [
      {"name": "stripe-purple", "value": "#635bff", "usage": 89},
      {"name": "text-dark", "value": "#0a2540", "usage": 342},
      {"name": "text-gray", "value": "#425466", "usage": 156},
      {"name": "background", "value": "#ffffff", "usage": 78}
    ],
    "typography": [
      {
        "family": "system-ui, -apple-system, BlinkMacSystemFont",
        "weights": ["400", "500", "600", "700"],
        "sizes": ["14px", "16px", "18px", "24px", "32px", "48px"]
      }
    ],
    "spacing": [
      "4px", "8px", "12px", "16px", "24px", "32px", "48px", "64px", "96px"
    ]
  },
  "metadata": {
    "title": "Stripe | Financial Infrastructure for the Internet",
    "duration_ms": 3240,
    "elements_analyzed": 1247
  }
}

Step 5: Export to Your Format

Use the extracted tokens in your project:

CSS Custom Properties

:root {
  --color-primary: #635bff;
  --color-text: #0a2540;
  --color-text-muted: #425466;
  
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 32px;
  --spacing-xl: 64px;
}

Tailwind Config

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#635bff',
        text: '#0a2540',
        'text-muted': '#425466',
      }
    }
  }
}

Design Tokens JSON

{
  "color": {
    "primary": { "value": "#635bff" },
    "text": { "value": "#0a2540" }
  },
  "spacing": {
    "xs": { "value": "4px" },
    "sm": { "value": "8px" }
  }
}

What’s Next?

• Set up webhooks to get notified when extractions complete
• Monitor for design drift by comparing snapshots over time
• Integrate with CI/CD to catch design changes before they ship