Scrape Styleguide
curl --request GET \
--url https://api.context.dev/v1/web/styleguide \
--header 'Authorization: Bearer <token>'import requests
url = "https://api.context.dev/v1/web/styleguide"
headers = {"Authorization": "Bearer <token>"}
response = requests.get(url, headers=headers)
print(response.text)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));<?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;
}package 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))
}HttpResponse<String> response = Unirest.get("https://api.context.dev/v1/web/styleguide")
.header("Authorization", "Bearer <token>")
.asString();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_body{
"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 Intelligence
Extract Styleguide
Extract colors, typography, spacing, shadows, and UI cues from any site to build on-brand experiences faster.
GET
/
web
/
styleguide
Scrape Styleguide
curl --request GET \
--url https://api.context.dev/v1/web/styleguide \
--header 'Authorization: Bearer <token>'import requests
url = "https://api.context.dev/v1/web/styleguide"
headers = {"Authorization": "Bearer <token>"}
response = requests.get(url, headers=headers)
print(response.text)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));<?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;
}package 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))
}HttpResponse<String> response = Unirest.get("https://api.context.dev/v1/web/styleguide")
.header("Authorization", "Bearer <token>")
.asString();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_body{
"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
Authorizations
Bearer authentication header of the form Bearer <API_KEY>. Keys have full access by default.
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:
3A 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.
Maximum age in milliseconds for cached brand data before the API performs a hard refresh. Defaults to 3 months (7776000000 ms). Set to 0 to always perform a hard refresh. Negative values are clamped to 0; values above 1 year (31536000000 ms) are clamped to 1 year.
Optional request deadline and behavior on timeout. For GET requests, use timeoutOpts[milliseconds]=30000&timeoutOpts[behavior]=fail or a JSON-encoded timeoutOpts object.
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 Comma-separated tags for tracking request usage. Up to 20 tags, each 1-50 characters. Optional tags for tracking usage. Up to 20 tags, each 1 to 50 characters.
Maximum array length:
20Required string length:
1 - 50Example:
["production", "team-alpha"]
Response
Successful response
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.
Show child attributes
Show child attributes
Unique id of this API call, also sent in the X-Request-Id response header. Quote it when contacting support about a failed request.
Example:
"3f1c2a6e-8b4d-4c1e-9f0a-2d7b5e6c8a91"
How complete the returned content is. loaded means the page finished the waits the request asked for. still-loading only occurs with timeoutOpts.behavior=return-partial: the timeoutOpts.milliseconds deadline was reached first, so the content reflects the DOM at that moment and late-rendering parts may be missing. Partial results are billed at the base request cost.
Available options:
loaded, still-loading Status of the response, e.g., 'ok'
The normalized domain that was processed
Comprehensive styleguide data extracted from the website
Show child attributes
Show child attributes
HTTP status code
Credit usage, included whenever a valid API key is provided.
Show child attributes
Show child attributes
Was this page helpful?