Styleguide API - Extract a Website Design System from Any Domain

What You Get

Each API call returns a complete design system extracted from the target website.

Color palette

Primary, secondary, background, and text colors

Typography system

Fonts, sizes, weights, and line heights

Spacing scale

XS to XL spacing values

Component styles

Buttons, cards, shadows, and borders

How It Works

We analyze the website's CSS and visual elements to build a structured design system.

— step 01 —

Pass a domain

Like stripe.com or any company website

— step 02 —

We analyze the site

CSS, inline styles, and component patterns extracted

— step 03 —

Design system built

Colors, typography, spacing, and components organized

— step 04 —

JSON returned

Complete styleguide ready for your UI

API Response

Extracted design system for stripe.com

GET /v1/styleguide?domain=stripe.com

Try in API Playground

{
  "status": "ok",
  "styleguide": {
    "colors": {
      "primary": "#635bff",
      "background": "#ffffff",
      "text": "#0a2540"
    },
    "typography": {
      "h1": { "fontFamily": "Inter", "fontSize": "48px" },
      "body": { "fontFamily": "Inter", "fontSize": "16px" }
    },
    "spacing": { "sm": "8px", "md": "16px", "lg": "24px" }
  },
  "code": 200
}

Frequently asked questions

Common questions about the Context.dev Styleguide API.

Am I billed for failed requests?

No. You are not billed for failed requests or requests where we are blocked (rarely happens). Credits are only consumed on successful responses.

How do I extract design tokens from any website?

Send a GET request to /v1/styleguide?domain=example.com. The API renders the page in a real browser, computes styles for every key element, deduplicates patterns, and returns a clean tokens-style JSON. No manual inspect, no CSS-archaeology.

Can I use this to theme a white-label app or AI agent UI?

Yes — that's the headline use case. Pass any customer's domain at signup and instantly render their UI in their brand: brand-correct buttons, colors, typography, and spacing without a single design ticket.

Does it work for sites built with Tailwind or CSS-in-JS?

Yes. Because extraction happens after the browser computes styles, it's framework-agnostic — works for Tailwind, styled-components, Emotion, CSS Modules, vanilla CSS, and inline styles alike.

What is a styleguide API and what does it return?

A styleguide API extracts a website's entire design system — colors, typography, spacing scale, border radii, shadows, and component patterns — from a single URL. Context.dev returns a structured JSON document of design tokens that you can drop straight into Figma, Tailwind config, CSS variables, or theming code.

What design system elements are extracted?

Colors (primary, secondary, background, text), typography for headings and body (family, size, weight, line-height), the full spacing scale, common shadows, border radii, and high-level component styles like buttons, cards, and inputs. The shape mirrors the design-token formats used in popular design systems.

How accurate is the styleguide extraction?

We compute styles from the rendered DOM, not the raw CSS, so vendor prefixes, cascade overrides, and dynamic classes resolve correctly. Patterns are clustered to dedupe near-identical declarations, leaving you with the canonical tokens the design team actually uses.