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
},
"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
}
}{
"message": "<string>",
"error_code": "INTERNAL_ERROR",
"key_metadata": {
"credits_consumed": 123,
"credits_remaining": 123
}
}{
"error_code": "INTERNAL_ERROR",
"key_metadata": {
"credits_consumed": 123,
"credits_remaining": 123
}
}{
"message": "<string>",
"error_code": "REQUEST_TIMEOUT",
"key_metadata": {
"credits_consumed": 123,
"credits_remaining": 123
}
}{
"message": "<string>",
"error_code": "RATE_LIMITED",
"key_metadata": {
"credits_consumed": 123,
"credits_remaining": 123
}
}{
"message": "<string>",
"error_code": "INTERNAL_ERROR",
"key_metadata": {
"credits_consumed": 123,
"credits_remaining": 123
}
}Extract Styleguide
Extract colors, typography, spacing, shadows, and UI cues from any site to build on-brand experiences faster.
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
},
"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
}
}{
"message": "<string>",
"error_code": "INTERNAL_ERROR",
"key_metadata": {
"credits_consumed": 123,
"credits_remaining": 123
}
}{
"error_code": "INTERNAL_ERROR",
"key_metadata": {
"credits_consumed": 123,
"credits_remaining": 123
}
}{
"message": "<string>",
"error_code": "REQUEST_TIMEOUT",
"key_metadata": {
"credits_consumed": 123,
"credits_remaining": 123
}
}{
"message": "<string>",
"error_code": "RATE_LIMITED",
"key_metadata": {
"credits_consumed": 123,
"credits_remaining": 123
}
}{
"message": "<string>",
"error_code": "INTERNAL_ERROR",
"key_metadata": {
"credits_consumed": 123,
"credits_remaining": 123
}
}Authorizations
Bearer authentication header of the form Bearer <API_KEY>, where <API_KEY> is your api key.
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.
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). Values below 1 day (86400000 ms) are clamped to 1 day; values above 1 year (31536000000 ms) are clamped to 1 year.
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).
1000 <= x <= 300000Optional browser color scheme to emulate for websites that respond to prefers-color-scheme. This value is part of the styleguide cache key.
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.
201 - 50["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
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?