StyleGrab

Extract design tokens from any URL. Track changes. Get notified.

StyleGrab is a high-performance design token extraction and monitoring API built with Rust. Connect to any webpage via a headless browser, extract structured design tokens, and monitor for design drift over time.

Key Features

🎨 Live CSS Extraction

Connect to any URL via CDP protocol, extract computed styles, and produce structured design tokens — colors, typography, spacing, and assets — in a single API call.

📸 Snapshot Diffing

Every extraction creates a versioned snapshot. Compare any two snapshots to get a precise diff of what changed. Catch design drift before it ships.

🔔 Webhook Notifications

Subscribe to events and receive HMAC-SHA256 signed payloads. Integrate with Slack, CI pipelines, or any automation tool.

Quick Example

# Extract design tokens from a URL
curl -X POST https://api.stylegrab.dev/api/extractions \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"url": "https://example.com"}'

Response:

{
  "id": "ext_abc123",
  "status": "completed",
  "tokens": {
    "colors": [
      {"name": "primary", "value": "#3b82f6", "usage": 42},
      {"name": "background", "value": "#ffffff", "usage": 156}
    ],
    "typography": [
      {"family": "Inter", "weights": ["400", "600", "700"]}
    ],
    "spacing": ["4px", "8px", "16px", "24px", "32px"]
  }
}

Architecture

┌─────────────────────────────────────────────────────────────┐
│                         Clients                             │
│              (Dashboard / CLI / CI Pipelines)               │
└──────────────────────────┬──────────────────────────────────┘
                           │ HTTPS
┌──────────────────────────▼──────────────────────────────────┐
│                      Axum API Server                        │
│  ┌──────────┐ ┌────────────┐ ┌───────┐ ┌────────────────┐  │
│  │   Auth   │ │ Extraction │ │ Teams │ │    Payments    │  │
│  │  Module  │ │   Engine   │ │Module │ │   (Stripe)     │  │
│  └──────────┘ └─────┬──────┘ └───────┘ └────────────────┘  │
│                     │                                       │
│  ┌──────────────────▼───────────────────────────────────┐  │
│  │              Webhooks Dispatch                        │  │
│  │   HMAC-SHA256 signing · 3x retry · exp backoff       │  │
│  └──────────────────────────────────────────────────────┘  │
└──────────────────────────┬──────────────────────────────────┘
                           │
          ┌────────────────┼────────────────┐
          ▼                ▼                ▼
   ┌────────────┐  ┌────────────┐  ┌────────────┐
   │ PostgreSQL │  │   Redis    │  │  Headless  │
   │  (Data)    │  │  (Cache)   │  │  Browser   │
   └────────────┘  └────────────┘  └────────────┘

Next Steps

• Quick Start — Get up and running in 5 minutes
• API Reference — Full endpoint documentation
• Guides — Step-by-step tutorials