Extract a design system

The Styleguide API renders a website and returns an observed design system. Use it to seed a theme, create a reviewable brand brief, or compare a site’s visual treatment over time. The result describes the rendered page, including any cached observations. Review the extracted values before adopting them as product tokens.

Extract a styleguide

Pass either a domain or one exact URL. A domain lookup resolves the site’s representative page; directUrl analyzes only the URL you provide.

export CONTEXT_DEV_API_KEY="ctxt_secret_..."

curl --get https://api.context.dev/v1/web/styleguide \
  --header "Authorization: Bearer $CONTEXT_DEV_API_KEY" \
  --data-urlencode "domain=example.com" \
  --data-urlencode "colorScheme=light"

import ContextDev from "context.dev";

const client = new ContextDev({
  apiKey: process.env.CONTEXT_DEV_API_KEY,
});

const response = await client.web.extractStyleguide({
  domain: "example.com",
  colorScheme: "light",
});

console.log(response.styleguide?.colors);
console.log(response.styleguide?.typography.headings.h1);

import os
from context.dev import ContextDev

client = ContextDev(api_key=os.environ["CONTEXT_DEV_API_KEY"])

response = client.web.extract_styleguide(
    domain="example.com",
    color_scheme="light",
)

print(response.styleguide.colors)
print(response.styleguide.typography.headings.h1)

require "cgi/core"
require "context_dev"

client = ContextDev::Client.new(
  api_key: ENV.fetch("CONTEXT_DEV_API_KEY")
)

response = client.web.extract_styleguide(
  domain: "example.com",
  color_scheme: :light
)

puts response.styleguide.colors.inspect
puts response.styleguide.typography.headings.h1.inspect

package main

import (
    "context"
    "fmt"
    "os"

    contextdev "github.com/context-dot-dev/context-go-sdk/v2"
    "github.com/context-dot-dev/context-go-sdk/v2/option"
)

func main() {
    client := contextdev.NewClient(
        option.WithAPIKey(os.Getenv("CONTEXT_DEV_API_KEY")),
    )

    response, err := client.Web.ExtractStyleguide(
        context.Background(),
        contextdev.WebExtractStyleguideParams{
            Domain: contextdev.String("example.com"),
            ColorScheme: contextdev.WebExtractStyleguideParamsColorSchemeLight,
        },
    )
    if err != nil {
        panic(err)
    }

    fmt.Println(response.Styleguide.Colors)
    fmt.Println(response.Styleguide.Typography.Headings.H1)
}

<?php

require __DIR__.'/vendor/autoload.php';

use ContextDev\Client;

$client = new Client(apiKey: getenv('CONTEXT_DEV_API_KEY'));

$response = $client->web->extractStyleguide(
    domain: 'example.com',
    colorScheme: 'light',
);

var_dump($response->styleguide->colors);
var_dump($response->styleguide->typography->headings->h1);

Styleguide extraction costs 10 credits.

Understand the result

Field	What it represents
`mode`	The page’s observed primary `light` or `dark` mode.
`colors`	Accent, background, and text colors.
`typography`	Computed font family, fallbacks, size, weight, line height, and letter spacing for headings and body text.
`elementSpacing`	A normalized `xs` through `xl` spacing scale.
`shadows`	Small through extra-large and inner shadow values.
`components.button`	Observed primary, secondary, and link-button properties, including CSS declarations.
`fontLinks`	Discovered Google or custom font-file URLs keyed by family.

Use the API reference for the exact nested schema. Do not duplicate that full schema in application code; generate or import types from the current SDK or OpenAPI contract.

Choose a page and theme

Analyze an exact design-system or campaign page with directUrl:

curl --get https://api.context.dev/v1/web/styleguide \
  --header "Authorization: Bearer $CONTEXT_DEV_API_KEY" \
  --data-urlencode "directUrl=https://example.com/design-system" \
  --data-urlencode "colorScheme=dark"

import ContextDev from "context.dev";

const client = new ContextDev({
  apiKey: process.env.CONTEXT_DEV_API_KEY,
});

const response = await client.web.extractStyleguide({
  directUrl: "https://example.com/design-system",
  colorScheme: "dark",
});

console.log(response.styleguide?.colors);

import os
from context.dev import ContextDev

client = ContextDev(api_key=os.environ["CONTEXT_DEV_API_KEY"])

response = client.web.extract_styleguide(
    direct_url="https://example.com/design-system",
    color_scheme="dark",
)

print(response.styleguide.colors)

require "cgi/core"
require "context_dev"

client = ContextDev::Client.new(
  api_key: ENV.fetch("CONTEXT_DEV_API_KEY")
)

response = client.web.extract_styleguide(
  direct_url: "https://example.com/design-system",
  color_scheme: :dark
)

puts response.styleguide.colors.inspect

package main

import (
    "context"
    "fmt"
    "os"

    contextdev "github.com/context-dot-dev/context-go-sdk/v2"
    "github.com/context-dot-dev/context-go-sdk/v2/option"
)

func main() {
    client := contextdev.NewClient(
        option.WithAPIKey(os.Getenv("CONTEXT_DEV_API_KEY")),
    )

    response, err := client.Web.ExtractStyleguide(
        context.Background(),
        contextdev.WebExtractStyleguideParams{
            DirectURL: contextdev.String("https://example.com/design-system"),
            ColorScheme: contextdev.WebExtractStyleguideParamsColorSchemeDark,
        },
    )
    if err != nil {
        panic(err)
    }

    fmt.Println(response.Styleguide.Colors)
}

<?php

require __DIR__.'/vendor/autoload.php';

use ContextDev\Client;

$client = new Client(apiKey: getenv('CONTEXT_DEV_API_KEY'));

$response = $client->web->extractStyleguide(
    directURL: 'https://example.com/design-system',
    colorScheme: 'dark',
);

var_dump($response->styleguide->colors);

colorScheme emulates prefers-color-scheme and is part of the cache key. Extract light and dark separately when the site supports both; one response is not a combined dual-theme token set. Pass only one of domain and directUrl. The request is rejected if you provide both or neither.

Control freshness

The styleguide cache window defaults to three months. Set maxAgeMs=0 to fetch fresh data, or use a positive value to accept cached data up to that age, including values below one day. Negative values clamp to zero; values above one year clamp to one year. Different pages can render different campaigns, modes, components, fonts, and A/B variants. Use directUrl when page-level fidelity matters, and record the analyzed URL, color scheme, cache metadata, and extraction time with your stored theme.

Extract fonts

Use the Fonts endpoint when you need family usage and discovered files. It costs 5 credits.

curl --get https://api.context.dev/v1/web/fonts \
  --header "Authorization: Bearer $CONTEXT_DEV_API_KEY" \
  --data-urlencode "domain=example.com"

import ContextDev from "context.dev";

const client = new ContextDev({
  apiKey: process.env.CONTEXT_DEV_API_KEY,
});

const response = await client.web.extractFonts({ domain: "example.com" });

for (const font of response.fonts) {
  console.log(font.font, font.percent_words, font.fallbacks);
}

import os
from context.dev import ContextDev

client = ContextDev(api_key=os.environ["CONTEXT_DEV_API_KEY"])

response = client.web.extract_fonts(domain="example.com")

for font in response.fonts:
    print(font.font, font.percent_words, font.fallbacks)

require "cgi/core"
require "context_dev"

client = ContextDev::Client.new(
  api_key: ENV.fetch("CONTEXT_DEV_API_KEY")
)

response = client.web.extract_fonts(domain: "example.com")

response.fonts.each do |font|
  puts [font.font, font.percent_words, font.fallbacks].inspect
end

package main

import (
    "context"
    "fmt"
    "os"

    contextdev "github.com/context-dot-dev/context-go-sdk/v2"
    "github.com/context-dot-dev/context-go-sdk/v2/option"
)

func main() {
    client := contextdev.NewClient(
        option.WithAPIKey(os.Getenv("CONTEXT_DEV_API_KEY")),
    )

    response, err := client.Web.ExtractFonts(
        context.Background(),
        contextdev.WebExtractFontsParams{
            Domain: contextdev.String("example.com"),
        },
    )
    if err != nil {
        panic(err)
    }

    for _, font := range response.Fonts {
        fmt.Println(font.Font, font.PercentWords, font.Fallbacks)
    }
}

<?php

require __DIR__.'/vendor/autoload.php';

use ContextDev\Client;

$client = new Client(apiKey: getenv('CONTEXT_DEV_API_KEY'));

$response = $client->web->extractFonts(domain: 'example.com');

foreach ($response->fonts as $font) {
    var_dump($font->font, $font->percentWords, $font->fallbacks);
}

fontLinks can be absent when no font family resolves to a discovered Google or custom @font-face URL.

Create product tokens

Do not copy the response directly into a global theme. Add a review layer:

Validate text/background contrast and interactive states.
Collapse near-duplicate colors into named semantic roles.
Confirm which font weights exist and whether you may host or use them.
Add system fallbacks and loading behavior.
Map sampled spacing and shadows to your product’s token scale.
Test the extracted button CSS in isolation before reusing it.
Store reviewer overrides separately so a refresh cannot erase them.

For multi-tenant products, version the approved theme by tenant and source extraction. A new extraction should produce a diff and review request, not silently restyle existing customer interfaces.

Common failures

Symptom	What to check
`400`	Provide exactly one valid `domain` or `directUrl`.
`408`	Increase `timeoutOpts.milliseconds` within your request budget or retry asynchronously.
`429`	Honor `Retry-After` and reduce concurrency.
Unexpected theme	Set `colorScheme` explicitly and use `directUrl` for the intended page.
Missing font files	The page may use generic, embedded, blocked, or undiscovered font sources.

Next steps

Use the extracted context in a generated website or branded document, with approved tokens and a versioned preview.

Branded onboarding

Use reviewed brand data in a customer onboarding flow.

Branded email templates

Apply company logos and colors to email templates.

Styleguide API reference

Review the full visual-token extraction contract.

Get started

Web data

Brand data

Automation

Account and billing

Production

Extract a design system

Extract a styleguide

Understand the result

Choose a page and theme

Control freshness

Extract fonts

Create product tokens

Common failures

Next steps

Branded onboarding

Branded email templates

Styleguide API reference

​Extract a styleguide

​Understand the result

​Choose a page and theme

​Control freshness

​Extract fonts

​Create product tokens

​Common failures

​Next steps

Branded onboarding

Branded email templates

Styleguide API reference

Extract a styleguide

Understand the result

Choose a page and theme

Control freshness

Extract fonts

Create product tokens

Common failures

Next steps