Extract a styleguide
const options = {method: 'GET', headers: {Authorization: 'Bearer <token>'}};
fetch('https://api.context.dev/v1/web/styleguide', options)
.then(res => res.json())
.then(res => console.log(res))
.catch(err => console.error(err));import requests
url = "https://api.context.dev/v1/web/styleguide"
headers = {"Authorization": "Bearer <token>"}
response = requests.get(url, headers=headers)
print(response.text)require 'uri'
require 'net/http'
url = URI("https://api.context.dev/v1/web/styleguide")
http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true
request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'
response = http.request(request)
puts response.read_bodypackage main
import (
"fmt"
"net/http"
"io"
)
func main() {
url := "https://api.context.dev/v1/web/styleguide"
req, _ := http.NewRequest("GET", url, nil)
req.Header.Add("Authorization", "Bearer <token>")
res, _ := http.DefaultClient.Do(req)
defer res.Body.Close()
body, _ := io.ReadAll(res.Body)
fmt.Println(string(body))
}<?php
$curl = curl_init();
curl_setopt_array($curl, [
CURLOPT_URL => "https://api.context.dev/v1/web/styleguide",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "GET",
CURLOPT_HTTPHEADER => [
"Authorization: Bearer <token>"
],
]);
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if ($err) {
echo "cURL Error #:" . $err;
} else {
echo $response;
}curl --request GET \
--url https://api.context.dev/v1/web/styleguide \
--header 'Authorization: Bearer <token>'{
"cache_metadata": {
"status": "hit",
"age_ms": 1
},
"request_id": "3f1c2a6e-8b4d-4c1e-9f0a-2d7b5e6c8a91",
"finalDOMState": "loaded",
"status": "<string>",
"domain": "<string>",
"styleguide": {
"mode": "light",
"colors": {
"accent": "<string>",
"background": "<string>",
"text": "<string>"
},
"typography": {
"headings": {
"h1": {
"fontFamily": "<string>",
"fontFallbacks": [
"<string>"
],
"fontSize": "<string>",
"fontWeight": 123,
"lineHeight": "<string>",
"letterSpacing": "<string>"
},
"h2": {
"fontFamily": "<string>",
"fontFallbacks": [
"<string>"
],
"fontSize": "<string>",
"fontWeight": 123,
"lineHeight": "<string>",
"letterSpacing": "<string>"
},
"h3": {
"fontFamily": "<string>",
"fontFallbacks": [
"<string>"
],
"fontSize": "<string>",
"fontWeight": 123,
"lineHeight": "<string>",
"letterSpacing": "<string>"
},
"h4": {
"fontFamily": "<string>",
"fontFallbacks": [
"<string>"
],
"fontSize": "<string>",
"fontWeight": 123,
"lineHeight": "<string>",
"letterSpacing": "<string>"
}
},
"p": {
"fontFamily": "<string>",
"fontFallbacks": [
"<string>"
],
"fontSize": "<string>",
"fontWeight": 123,
"lineHeight": "<string>",
"letterSpacing": "<string>"
}
},
"elementSpacing": {
"xs": "<string>",
"sm": "<string>",
"md": "<string>",
"lg": "<string>",
"xl": "<string>"
},
"shadows": {
"sm": "<string>",
"md": "<string>",
"lg": "<string>",
"xl": "<string>",
"inner": "<string>"
},
"fontLinks": {},
"components": {
"button": {
"primary": {
"backgroundColor": "<string>",
"color": "<string>",
"borderColor": "<string>",
"borderRadius": "<string>",
"borderWidth": "<string>",
"borderStyle": "<string>",
"padding": "<string>",
"minWidth": "<string>",
"minHeight": "<string>",
"fontSize": "<string>",
"fontWeight": 123,
"textDecoration": "<string>",
"boxShadow": "<string>",
"css": "<string>",
"fontFamily": "<string>",
"fontFallbacks": [
"<string>"
],
"textDecorationColor": "<string>"
},
"secondary": {
"backgroundColor": "<string>",
"color": "<string>",
"borderColor": "<string>",
"borderRadius": "<string>",
"borderWidth": "<string>",
"borderStyle": "<string>",
"padding": "<string>",
"minWidth": "<string>",
"minHeight": "<string>",
"fontSize": "<string>",
"fontWeight": 123,
"textDecoration": "<string>",
"boxShadow": "<string>",
"css": "<string>",
"fontFamily": "<string>",
"fontFallbacks": [
"<string>"
],
"textDecorationColor": "<string>"
},
"link": {
"backgroundColor": "<string>",
"color": "<string>",
"borderColor": "<string>",
"borderRadius": "<string>",
"borderWidth": "<string>",
"borderStyle": "<string>",
"padding": "<string>",
"minWidth": "<string>",
"minHeight": "<string>",
"fontSize": "<string>",
"fontWeight": 123,
"textDecoration": "<string>",
"boxShadow": "<string>",
"css": "<string>",
"fontFamily": "<string>",
"fontFallbacks": [
"<string>"
],
"textDecorationColor": "<string>"
}
},
"card": {
"backgroundColor": "<string>",
"borderColor": "<string>",
"borderRadius": "<string>",
"borderWidth": "<string>",
"borderStyle": "<string>",
"padding": "<string>",
"boxShadow": "<string>",
"textColor": "<string>",
"css": "<string>"
}
}
},
"code": 123,
"key_metadata": {
"credits_consumed": 123,
"credits_remaining": 123
}
}{
"request_id": "3f1c2a6e-8b4d-4c1e-9f0a-2d7b5e6c8a91",
"message": "<string>",
"error_code": "INTERNAL_ERROR",
"key_metadata": {
"credits_consumed": 123,
"credits_remaining": 123
}
}{
"request_id": "3f1c2a6e-8b4d-4c1e-9f0a-2d7b5e6c8a91",
"error_code": "INTERNAL_ERROR",
"key_metadata": {
"credits_consumed": 123,
"credits_remaining": 123
}
}{
"request_id": "3f1c2a6e-8b4d-4c1e-9f0a-2d7b5e6c8a91",
"message": "<string>",
"error_code": "REQUEST_TIMEOUT",
"key_metadata": {
"credits_consumed": 123,
"credits_remaining": 123
}
}{
"message": "<string>",
"error_code": "RATE_LIMITED",
"request_id": "3f1c2a6e-8b4d-4c1e-9f0a-2d7b5e6c8a91",
"key_metadata": {
"credits_consumed": 123,
"credits_remaining": 123
}
}{
"request_id": "3f1c2a6e-8b4d-4c1e-9f0a-2d7b5e6c8a91",
"message": "<string>",
"error_code": "INTERNAL_ERROR",
"key_metadata": {
"credits_consumed": 123,
"credits_remaining": 123
}
}Brand Data
Extract a styleguide
Extract colors, typography, spacing, and component styles from a website.
GET
/
web
/
styleguide
Extract a styleguide
const options = {method: 'GET', headers: {Authorization: 'Bearer <token>'}};
fetch('https://api.context.dev/v1/web/styleguide', options)
.then(res => res.json())
.then(res => console.log(res))
.catch(err => console.error(err));import requests
url = "https://api.context.dev/v1/web/styleguide"
headers = {"Authorization": "Bearer <token>"}
response = requests.get(url, headers=headers)
print(response.text)require 'uri'
require 'net/http'
url = URI("https://api.context.dev/v1/web/styleguide")
http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true
request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'
response = http.request(request)
puts response.read_bodypackage main
import (
"fmt"
"net/http"
"io"
)
func main() {
url := "https://api.context.dev/v1/web/styleguide"
req, _ := http.NewRequest("GET", url, nil)
req.Header.Add("Authorization", "Bearer <token>")
res, _ := http.DefaultClient.Do(req)
defer res.Body.Close()
body, _ := io.ReadAll(res.Body)
fmt.Println(string(body))
}<?php
$curl = curl_init();
curl_setopt_array($curl, [
CURLOPT_URL => "https://api.context.dev/v1/web/styleguide",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "GET",
CURLOPT_HTTPHEADER => [
"Authorization: Bearer <token>"
],
]);
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if ($err) {
echo "cURL Error #:" . $err;
} else {
echo $response;
}curl --request GET \
--url https://api.context.dev/v1/web/styleguide \
--header 'Authorization: Bearer <token>'{
"cache_metadata": {
"status": "hit",
"age_ms": 1
},
"request_id": "3f1c2a6e-8b4d-4c1e-9f0a-2d7b5e6c8a91",
"finalDOMState": "loaded",
"status": "<string>",
"domain": "<string>",
"styleguide": {
"mode": "light",
"colors": {
"accent": "<string>",
"background": "<string>",
"text": "<string>"
},
"typography": {
"headings": {
"h1": {
"fontFamily": "<string>",
"fontFallbacks": [
"<string>"
],
"fontSize": "<string>",
"fontWeight": 123,
"lineHeight": "<string>",
"letterSpacing": "<string>"
},
"h2": {
"fontFamily": "<string>",
"fontFallbacks": [
"<string>"
],
"fontSize": "<string>",
"fontWeight": 123,
"lineHeight": "<string>",
"letterSpacing": "<string>"
},
"h3": {
"fontFamily": "<string>",
"fontFallbacks": [
"<string>"
],
"fontSize": "<string>",
"fontWeight": 123,
"lineHeight": "<string>",
"letterSpacing": "<string>"
},
"h4": {
"fontFamily": "<string>",
"fontFallbacks": [
"<string>"
],
"fontSize": "<string>",
"fontWeight": 123,
"lineHeight": "<string>",
"letterSpacing": "<string>"
}
},
"p": {
"fontFamily": "<string>",
"fontFallbacks": [
"<string>"
],
"fontSize": "<string>",
"fontWeight": 123,
"lineHeight": "<string>",
"letterSpacing": "<string>"
}
},
"elementSpacing": {
"xs": "<string>",
"sm": "<string>",
"md": "<string>",
"lg": "<string>",
"xl": "<string>"
},
"shadows": {
"sm": "<string>",
"md": "<string>",
"lg": "<string>",
"xl": "<string>",
"inner": "<string>"
},
"fontLinks": {},
"components": {
"button": {
"primary": {
"backgroundColor": "<string>",
"color": "<string>",
"borderColor": "<string>",
"borderRadius": "<string>",
"borderWidth": "<string>",
"borderStyle": "<string>",
"padding": "<string>",
"minWidth": "<string>",
"minHeight": "<string>",
"fontSize": "<string>",
"fontWeight": 123,
"textDecoration": "<string>",
"boxShadow": "<string>",
"css": "<string>",
"fontFamily": "<string>",
"fontFallbacks": [
"<string>"
],
"textDecorationColor": "<string>"
},
"secondary": {
"backgroundColor": "<string>",
"color": "<string>",
"borderColor": "<string>",
"borderRadius": "<string>",
"borderWidth": "<string>",
"borderStyle": "<string>",
"padding": "<string>",
"minWidth": "<string>",
"minHeight": "<string>",
"fontSize": "<string>",
"fontWeight": 123,
"textDecoration": "<string>",
"boxShadow": "<string>",
"css": "<string>",
"fontFamily": "<string>",
"fontFallbacks": [
"<string>"
],
"textDecorationColor": "<string>"
},
"link": {
"backgroundColor": "<string>",
"color": "<string>",
"borderColor": "<string>",
"borderRadius": "<string>",
"borderWidth": "<string>",
"borderStyle": "<string>",
"padding": "<string>",
"minWidth": "<string>",
"minHeight": "<string>",
"fontSize": "<string>",
"fontWeight": 123,
"textDecoration": "<string>",
"boxShadow": "<string>",
"css": "<string>",
"fontFamily": "<string>",
"fontFallbacks": [
"<string>"
],
"textDecorationColor": "<string>"
}
},
"card": {
"backgroundColor": "<string>",
"borderColor": "<string>",
"borderRadius": "<string>",
"borderWidth": "<string>",
"borderStyle": "<string>",
"padding": "<string>",
"boxShadow": "<string>",
"textColor": "<string>",
"css": "<string>"
}
}
},
"code": 123,
"key_metadata": {
"credits_consumed": 123,
"credits_remaining": 123
}
}{
"request_id": "3f1c2a6e-8b4d-4c1e-9f0a-2d7b5e6c8a91",
"message": "<string>",
"error_code": "INTERNAL_ERROR",
"key_metadata": {
"credits_consumed": 123,
"credits_remaining": 123
}
}{
"request_id": "3f1c2a6e-8b4d-4c1e-9f0a-2d7b5e6c8a91",
"error_code": "INTERNAL_ERROR",
"key_metadata": {
"credits_consumed": 123,
"credits_remaining": 123
}
}{
"request_id": "3f1c2a6e-8b4d-4c1e-9f0a-2d7b5e6c8a91",
"message": "<string>",
"error_code": "REQUEST_TIMEOUT",
"key_metadata": {
"credits_consumed": 123,
"credits_remaining": 123
}
}{
"message": "<string>",
"error_code": "RATE_LIMITED",
"request_id": "3f1c2a6e-8b4d-4c1e-9f0a-2d7b5e6c8a91",
"key_metadata": {
"credits_consumed": 123,
"credits_remaining": 123
}
}{
"request_id": "3f1c2a6e-8b4d-4c1e-9f0a-2d7b5e6c8a91",
"message": "<string>",
"error_code": "INTERNAL_ERROR",
"key_metadata": {
"credits_consumed": 123,
"credits_remaining": 123
}
}10 credits
See the guide for examples and usage.
Authorizations
Send Authorization: Bearer <API_KEY>. Keys have full access unless restricted to scopes.
Query Parameters
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.
Minimum string length:
3Exact URL to inspect. Provide either domain or directUrl, not both.
Maximum age of cached brand data in ms. Defaults to 3 months; clamped to 0–1 year. 0 refreshes.
Request deadline and what to return when it passes.
Show child attributes
Show child attributes
Optional browser color scheme to emulate for websites that respond to prefers-color-scheme. This value is part of the styleguide cache key.
Available options:
light, dark enabled turns on zero data retention. Returns 403 ZDR_NOT_ENABLED unless your organization has ZDR.
Available options:
enabled, disabled Comma-separated labels for filtering usage, e.g. production,team-alpha.
Labels for filtering usage in the dashboard.
Maximum array length:
20Required string length:
1 - 50Example:
["production", "team-alpha"]
Response
Successful response
Whether this response came from cache.
Show child attributes
Show child attributes
Unique ID of this request, also in X-Request-Id. Include it when contacting support.
Example:
"3f1c2a6e-8b4d-4c1e-9f0a-2d7b5e6c8a91"
loaded, or still-loading when capture ended before the page finished loading.
Available options:
loaded, still-loading Always ok on success.
The normalized domain that was processed
Comprehensive styleguide data extracted from the website
Show child attributes
Show child attributes
HTTP status code
Credits this request used and your remaining balance.
Show child attributes
Show child attributes
Was this page helpful?