> ## Documentation Index
> Fetch the complete documentation index at: https://docs.context.dev/llms.txt
> Use this file to discover all available pages before exploring further.
# Extract Styleguide
> Extract colors, typography, spacing, shadows, and UI cues from any site to build on-brand experiences faster.
10 Credits
## OpenAPI
````yaml GET /web/styleguide
openapi: 3.1.0
info:
title: Context API
description: API for retrieving context data from any website
version: 1.0.0
servers:
- url: https://api.context.dev/v1
security: []
tags:
- name: Batch
description: Scrape many pages or crawl a site asynchronously.
- name: Monitors
description: >-
Monitor pages, sitemaps, and extracted website data for exact or semantic
changes. Webhook payloads are documented by the
MonitorsChangeDetectedWebhookPayload and
MonitorsRunCompletedWebhookPayload schemas.
- name: WebDBs
description: Create structured tables from web pages and keep them up to date.
- name: News
description: >-
Search live first-party RSS and free historical news data by company
identity.
paths:
/web/styleguide:
get:
tags:
- Web Extraction
summary: Scrape Styleguide
description: >-
Extract a comprehensive design system from a website including colors,
typography, spacing, shadows, and UI components.
parameters:
- schema:
type: string
minLength: 3
description: >-
Domain name to extract styleguide from (e.g., 'example.com',
'google.com'). The domain will be automatically normalized and
validated. You must provide either 'domain' or 'directUrl', but
not both.
required: false
description: >-
Domain name to extract styleguide from (e.g., 'example.com',
'google.com'). The domain will be automatically normalized and
validated. You must provide either 'domain' or 'directUrl', but not
both.
name: domain
in: query
- schema:
type: string
format: uri
description: >-
A specific URL to fetch the styleguide from directly, bypassing
domain resolution (e.g., 'https://example.com/design-system').
When provided, the styleguide is extracted from this exact URL.
You must provide either 'domain' or 'directUrl', but not both.
required: false
description: >-
A specific URL to fetch the styleguide from directly, bypassing
domain resolution (e.g., 'https://example.com/design-system'). When
provided, the styleguide is extracted from this exact URL. You must
provide either 'domain' or 'directUrl', but not both.
name: directUrl
in: query
- schema:
type:
- integer
- 'null'
default: 7776000000
description: >-
Maximum age in milliseconds for cached brand data before the API
performs a hard refresh. Defaults to 3 months (7776000000 ms).
Values below 1 day (86400000 ms) are clamped to 1 day; values
above 1 year (31536000000 ms) are clamped to 1 year.
required: false
description: >-
Maximum age in milliseconds for cached brand data before the API
performs a hard refresh. Defaults to 3 months (7776000000 ms).
Values below 1 day (86400000 ms) are clamped to 1 day; values above
1 year (31536000000 ms) are clamped to 1 year.
name: maxAgeMs
in: query
- schema:
$ref: '#/components/schemas/TimeoutMS'
required: false
description: >-
Optional timeout in milliseconds for the request. If the request
takes longer than this value, it will be aborted with a 408 status
code. Maximum allowed value is 300000ms (5 minutes).
name: timeoutMS
in: query
- schema:
type: string
enum:
- light
- dark
description: >-
Optional browser color scheme to emulate for websites that respond
to prefers-color-scheme. This value is part of the styleguide
cache key.
required: false
description: >-
Optional browser color scheme to emulate for websites that respond
to prefers-color-scheme. This value is part of the styleguide cache
key.
name: colorScheme
in: query
- $ref: '#/components/parameters/RequestTags'
responses:
'200':
description: Successful response
headers:
X-RateLimit-Limit:
$ref: '#/components/headers/RateLimitLimit'
X-RateLimit-Remaining:
$ref: '#/components/headers/RateLimitRemaining'
X-RateLimit-Reset:
$ref: '#/components/headers/RateLimitReset'
content:
application/json:
schema:
type: object
properties:
status:
type: string
description: Status of the response, e.g., 'ok'
domain:
type: string
description: The normalized domain that was processed
styleguide:
type: object
description: Comprehensive styleguide data extracted from the website
required:
- mode
- colors
- typography
- elementSpacing
- shadows
- components
- fontLinks
properties:
mode:
type: string
enum:
- light
- dark
description: The primary color mode of the website design
colors:
type: object
description: Primary colors used on the website
required:
- accent
- background
- text
properties:
accent:
type: string
description: Accent color (hex format)
background:
type: string
description: Background color (hex format)
text:
type: string
description: Text color (hex format)
typography:
type: object
description: Typography styles used on the website
required:
- headings
properties:
headings:
type: object
description: Heading styles
properties:
h1:
type: object
required:
- fontFamily
- fontFallbacks
- fontSize
- fontWeight
- lineHeight
- letterSpacing
properties:
fontFamily:
type: string
description: >-
Primary face (first family in the computed
stack)
fontFallbacks:
type: array
items:
type: string
description: >-
Full ordered font list from resolved
computed font-family
fontSize:
type: string
fontWeight:
type: number
lineHeight:
type: string
letterSpacing:
type: string
h2:
type: object
required:
- fontFamily
- fontFallbacks
- fontSize
- fontWeight
- lineHeight
- letterSpacing
properties:
fontFamily:
type: string
description: >-
Primary face (first family in the computed
stack)
fontFallbacks:
type: array
items:
type: string
description: >-
Full ordered font list from resolved
computed font-family
fontSize:
type: string
fontWeight:
type: number
lineHeight:
type: string
letterSpacing:
type: string
h3:
type: object
required:
- fontFamily
- fontFallbacks
- fontSize
- fontWeight
- lineHeight
- letterSpacing
properties:
fontFamily:
type: string
description: >-
Primary face (first family in the computed
stack)
fontFallbacks:
type: array
items:
type: string
description: >-
Full ordered font list from resolved
computed font-family
fontSize:
type: string
fontWeight:
type: number
lineHeight:
type: string
letterSpacing:
type: string
h4:
type: object
required:
- fontFamily
- fontFallbacks
- fontSize
- fontWeight
- lineHeight
- letterSpacing
properties:
fontFamily:
type: string
description: >-
Primary face (first family in the computed
stack)
fontFallbacks:
type: array
items:
type: string
description: >-
Full ordered font list from resolved
computed font-family
fontSize:
type: string
fontWeight:
type: number
lineHeight:
type: string
letterSpacing:
type: string
p:
type: object
required:
- fontFamily
- fontFallbacks
- fontSize
- fontWeight
- lineHeight
- letterSpacing
properties:
fontFamily:
type: string
description: >-
Primary face (first family in the computed
stack)
fontFallbacks:
type: array
items:
type: string
description: >-
Full ordered font list from resolved computed
font-family
fontSize:
type: string
fontWeight:
type: number
lineHeight:
type: string
letterSpacing:
type: string
elementSpacing:
type: object
description: Spacing system used on the website
required:
- xs
- sm
- md
- lg
- xl
properties:
xs:
type: string
sm:
type: string
md:
type: string
lg:
type: string
xl:
type: string
shadows:
type: object
description: Shadow styles used on the website
required:
- sm
- md
- lg
- xl
- inner
properties:
sm:
type: string
md:
type: string
lg:
type: string
xl:
type: string
inner:
type: string
fontLinks:
type: object
description: >-
Font assets keyed by family name as it appears in
fontFamily/fontFallbacks (non-generic names only).
Clients match typography.fontFamily / fontWeight or
button styles to pick a file URL from files.
additionalProperties:
type: object
required:
- type
- files
properties:
type:
type: string
enum:
- google
- custom
files:
type: object
additionalProperties:
type: string
description: >-
Upright font files keyed by weight string (e.g.
"400" for regular, "500", "700"). Values are
absolute URLs.
category:
type: string
description: >-
Google Fonts category when type is google (e.g.
sans-serif, serif, monospace, display,
handwriting). Omitted for custom fonts when
unknown.
displayName:
type: string
description: >-
Present when type is custom: human-readable name
derived from the fontLinks key (strip build/hash
suffixes, split camelCase / PascalCase,
normalize separators). Google entries omit this.
components:
type: object
description: UI component styles
required:
- button
properties:
button:
type: object
description: Button component styles
properties:
primary:
type: object
required:
- backgroundColor
- color
- borderColor
- borderRadius
- borderWidth
- borderStyle
- padding
- minWidth
- minHeight
- fontSize
- fontWeight
- textDecoration
- boxShadow
- css
properties:
backgroundColor:
type: string
color:
type: string
borderColor:
type: string
description: >-
Border color as CSS hex (#RRGGBB or
#RRGGBBAA when computed border-color has
alpha)
borderRadius:
type: string
borderWidth:
type: string
borderStyle:
type: string
padding:
type: string
minWidth:
type: string
description: >-
Sampled minimum width of the button box
(typically px)
minHeight:
type: string
description: >-
Sampled minimum height of the button box
(typically px)
fontSize:
type: string
fontWeight:
type: number
fontFamily:
type: string
description: >-
Primary button typeface (first in
fontFallbacks)
fontFallbacks:
type: array
items:
type: string
description: >-
Full ordered font list from computed
font-family
textDecoration:
type: string
textDecorationColor:
type: string
description: >-
Hex color of the underline when it differs
from the text color
boxShadow:
type: string
description: >-
Computed box-shadow (comma-separated
layers when present)
css:
type: string
description: >-
Ready-to-use CSS declaration block for
this component style
secondary:
type: object
required:
- backgroundColor
- color
- borderColor
- borderRadius
- borderWidth
- borderStyle
- padding
- minWidth
- minHeight
- fontSize
- fontWeight
- textDecoration
- boxShadow
- css
properties:
backgroundColor:
type: string
color:
type: string
borderColor:
type: string
description: >-
Border color as CSS hex (#RRGGBB or
#RRGGBBAA when computed border-color has
alpha)
borderRadius:
type: string
borderWidth:
type: string
borderStyle:
type: string
padding:
type: string
minWidth:
type: string
description: >-
Sampled minimum width of the button box
(typically px)
minHeight:
type: string
description: >-
Sampled minimum height of the button box
(typically px)
fontSize:
type: string
fontWeight:
type: number
fontFamily:
type: string
description: >-
Primary button typeface (first in
fontFallbacks)
fontFallbacks:
type: array
items:
type: string
description: >-
Full ordered font list from computed
font-family
textDecoration:
type: string
textDecorationColor:
type: string
description: >-
Hex color of the underline when it differs
from the text color
boxShadow:
type: string
description: >-
Computed box-shadow (comma-separated
layers when present)
css:
type: string
description: >-
Ready-to-use CSS declaration block for
this component style
link:
type: object
required:
- backgroundColor
- color
- borderColor
- borderRadius
- borderWidth
- borderStyle
- padding
- minWidth
- minHeight
- fontSize
- fontWeight
- textDecoration
- boxShadow
- css
properties:
backgroundColor:
type: string
color:
type: string
borderColor:
type: string
description: >-
Border color as CSS hex (#RRGGBB or
#RRGGBBAA when computed border-color has
alpha)
borderRadius:
type: string
borderWidth:
type: string
borderStyle:
type: string
padding:
type: string
minWidth:
type: string
description: >-
Sampled minimum width of the button box
(typically px)
minHeight:
type: string
description: >-
Sampled minimum height of the button box
(typically px)
fontSize:
type: string
fontWeight:
type: number
fontFamily:
type: string
description: >-
Primary button typeface (first in
fontFallbacks)
fontFallbacks:
type: array
items:
type: string
description: >-
Full ordered font list from computed
font-family
textDecoration:
type: string
textDecorationColor:
type: string
description: >-
Hex color of the underline when it differs
from the text color
boxShadow:
type: string
description: >-
Computed box-shadow (comma-separated
layers when present)
css:
type: string
description: >-
Ready-to-use CSS declaration block for
this component style
card:
type: object
description: Card component style
required:
- backgroundColor
- borderColor
- borderRadius
- borderWidth
- borderStyle
- padding
- boxShadow
- textColor
- css
properties:
backgroundColor:
type: string
borderColor:
type: string
description: >-
Border color as CSS hex (#RRGGBB or #RRGGBBAA
when computed border-color has alpha)
borderRadius:
type: string
borderWidth:
type: string
borderStyle:
type: string
padding:
type: string
boxShadow:
type: string
textColor:
type: string
css:
type: string
description: >-
Ready-to-use CSS declaration block for this
component style
code:
type: integer
description: HTTP status code
cache_metadata:
$ref: '#/components/schemas/CacheMetadata'
key_metadata:
$ref: '#/components/schemas/KeyMetadata'
required:
- cache_metadata
'400':
description: Bad Request
headers:
X-RateLimit-Limit:
$ref: '#/components/headers/RateLimitLimit'
X-RateLimit-Remaining:
$ref: '#/components/headers/RateLimitRemaining'
X-RateLimit-Reset:
$ref: '#/components/headers/RateLimitReset'
content:
application/json:
schema:
type: object
properties:
message:
type: string
description: Error message
error_code:
type: string
enum:
- INTERNAL_ERROR
- VALID
- NOT_FOUND
- FORBIDDEN
- USAGE_EXCEEDED
- RATE_LIMITED
- UNAUTHORIZED
- DISABLED
- INSUFFICIENT_PERMISSIONS
- TIMEOUT_EXCEEDS_MAXIMUM
- WEBSITE_ACCESS_ERROR
- WEBSITE_BLOCKED
- WEBSITE_NOT_FOUND
- INPUT_VALIDATION_ERROR
description: >-
Error code indicating the type of error. WEBSITE_BLOCKED
means the site answered with an anti-bot challenge or
blocked automated access instead of the page — the request
is not billed, and retrying later sometimes succeeds.
WEBSITE_NOT_FOUND means the target page returned or
fingerprinted as a 404.
key_metadata:
$ref: '#/components/schemas/KeyMetadata'
'401':
description: Unauthorized
headers:
X-RateLimit-Limit:
$ref: '#/components/headers/RateLimitLimit'
X-RateLimit-Remaining:
$ref: '#/components/headers/RateLimitRemaining'
X-RateLimit-Reset:
$ref: '#/components/headers/RateLimitReset'
content:
application/json:
schema:
type: object
properties:
error_code:
type: string
enum:
- INTERNAL_ERROR
- VALID
- NOT_FOUND
- FORBIDDEN
- USAGE_EXCEEDED
- RATE_LIMITED
- UNAUTHORIZED
- DISABLED
- INSUFFICIENT_PERMISSIONS
- TIMEOUT_EXCEEDS_MAXIMUM
- WEBSITE_ACCESS_ERROR
- INPUT_VALIDATION_ERROR
description: Error code indicating the type of error
key_metadata:
$ref: '#/components/schemas/KeyMetadata'
'408':
description: Request Timeout
headers:
X-RateLimit-Limit:
$ref: '#/components/headers/RateLimitLimit'
X-RateLimit-Remaining:
$ref: '#/components/headers/RateLimitRemaining'
X-RateLimit-Reset:
$ref: '#/components/headers/RateLimitReset'
content:
application/json:
schema:
type: object
properties:
message:
type: string
description: Timeout error message
error_code:
type: string
enum:
- REQUEST_TIMEOUT
description: Error code indicating request timeout
key_metadata:
$ref: '#/components/schemas/KeyMetadata'
'429':
$ref: '#/components/responses/RateLimited'
'500':
description: Internal server error
headers:
X-RateLimit-Limit:
$ref: '#/components/headers/RateLimitLimit'
X-RateLimit-Remaining:
$ref: '#/components/headers/RateLimitRemaining'
X-RateLimit-Reset:
$ref: '#/components/headers/RateLimitReset'
content:
application/json:
schema:
type: object
properties:
message:
type: string
description: Error message
error_code:
type: string
enum:
- INTERNAL_ERROR
description: Error code indicating internal server error
key_metadata:
$ref: '#/components/schemas/KeyMetadata'
security:
- bearerAuth: []
x-codeSamples:
- lang: JavaScript
source: |-
import ContextDev from 'context.dev';
const client = new ContextDev({
apiKey: process.env['CONTEXT_DEV_API_KEY'], // This is the default and can be omitted
});
const response = await client.web.extractStyleguide();
console.log(response.styleguide);
- lang: Python
source: |-
import os
from context.dev import ContextDev
client = ContextDev(
api_key=os.environ.get("CONTEXT_DEV_API_KEY"), # This is the default and can be omitted
)
response = client.web.extract_styleguide()
print(response.styleguide)
- lang: Go
source: "package main\n\nimport (\n\t\"context\"\n\t\"fmt\"\n\n\t\"github.com/context-dot-dev/context-go-sdk\"\n\t\"github.com/context-dot-dev/context-go-sdk/option\"\n)\n\nfunc main() {\n\tclient := contextdev.NewClient(\n\t\toption.WithAPIKey(\"My API Key\"),\n\t)\n\tresponse, err := client.Web.ExtractStyleguide(context.TODO(), contextdev.WebExtractStyleguideParams{})\n\tif err != nil {\n\t\tpanic(err.Error())\n\t}\n\tfmt.Printf(\"%+v\\n\", response.Styleguide)\n}\n"
- lang: Ruby
source: |-
require "context_dev"
context_dev = ContextDev::Client.new(api_key: "My API Key")
response = context_dev.web.extract_styleguide
puts(response)
- lang: PHP
source: >-
web->extractStyleguide(
colorScheme: 'light',
directURL: 'https://example.com',
domain: 'xxx',
maxAgeMs: 0,
tags: ['production', 'team-alpha'],
timeoutMs: 1000,
);
var_dump($response);
} catch (APIException $e) {
echo $e->getMessage();
}
- lang: CLI
source: |-
context-dev web extract-styleguide \
--api-key 'My API Key'
components:
schemas:
TimeoutMS:
type: integer
minimum: 1000
maximum: 300000
description: >-
Optional timeout in milliseconds for the request. If the request takes
longer than this value, it will be aborted with a 408 status code.
Maximum allowed value is 300000ms (5 minutes).
CacheMetadata:
type: object
properties:
status:
type: string
enum:
- hit
- miss
- zdr
description: >-
Whether the response was served from cache, required fresh work, or
honored zero-data-retention cache bypass.
age_ms:
type: integer
minimum: 0
description: >-
Age of the cached data in milliseconds. Zero for miss and zdr
responses.
required:
- status
- age_ms
additionalProperties: false
description: >-
Cache outcome for this response. Composite responses are hits only when
every cache-controlled fetch contributing to the output was a hit;
age_ms is the oldest contributing hit.
KeyMetadata:
type: object
properties:
credits_consumed:
type: integer
description: The number of credits consumed by this request.
credits_remaining:
type: integer
description: >-
The number of credits remaining for your organization after this
request.
required:
- credits_consumed
- credits_remaining
description: >-
Metadata about the API key used for the request. Included in every
response whenever a valid API key is provided, even when the response
status is not 200.
RequestTags:
type: array
items:
type: string
minLength: 1
maxLength: 50
maxItems: 20
description: >-
Optional tags for tracking usage. Up to 20 tags, each 1 to 50
characters.
example:
- production
- team-alpha
parameters:
RequestTags:
name: tags
in: query
required: false
style: form
explode: false
schema:
$ref: '#/components/schemas/RequestTags'
description: >-
Optional comma-separated caller-defined tags for tracking this request.
Tags are recorded on the request's usage log and can be used to filter
usage on the dashboard usage page. Up to 20 tags, each 1-50 characters.
example: production,team-alpha
headers:
RateLimitLimit:
description: >-
Maximum requests allowed in the current fixed one-minute window.
Returned when the authenticated API key has a per-minute rate limit.
schema:
type: integer
minimum: 1
RateLimitRemaining:
description: >-
Requests remaining in the current fixed one-minute window. Returned when
the authenticated API key has a per-minute rate limit.
schema:
type: integer
minimum: 0
RateLimitReset:
description: >-
Unix timestamp in seconds when the current rate-limit window resets.
Returned when the authenticated API key has a per-minute rate limit.
schema:
type: integer
responses:
RateLimited:
description: Rate limit exceeded
headers:
X-RateLimit-Limit:
$ref: '#/components/headers/RateLimitLimit'
X-RateLimit-Remaining:
$ref: '#/components/headers/RateLimitRemaining'
X-RateLimit-Reset:
$ref: '#/components/headers/RateLimitReset'
Retry-After:
description: Seconds until the per-minute rate limit window resets
schema:
type: integer
minimum: 1
maximum: 60
content:
application/json:
schema:
type: object
properties:
message:
type: string
description: Error message
error_code:
type: string
enum:
- RATE_LIMITED
description: Error code indicating the rate limit was exceeded
key_metadata:
$ref: '#/components/schemas/KeyMetadata'
required:
- message
- error_code
securitySchemes:
bearerAuth:
type: http
scheme: bearer
description: >-
Bearer authentication header of the form `Bearer `, where
`` is your api key.
````