Read a company's design system
curl --request GET \
--url https://api.hydrafetch.com/v1/web/styleguide \
--header 'X-API-Key: <api-key>'import requests
url = "https://api.hydrafetch.com/v1/web/styleguide"
headers = {"X-API-Key": "<api-key>"}
response = requests.get(url, headers=headers)
print(response.text)const options = {method: 'GET', headers: {'X-API-Key': '<api-key>'}};
fetch('https://api.hydrafetch.com/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.hydrafetch.com/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 => [
"X-API-Key: <api-key>"
],
]);
$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.hydrafetch.com/v1/web/styleguide"
req, _ := http.NewRequest("GET", url, nil)
req.Header.Add("X-API-Key", "<api-key>")
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.hydrafetch.com/v1/web/styleguide")
.header("X-API-Key", "<api-key>")
.asString();require 'uri'
require 'net/http'
url = URI("https://api.hydrafetch.com/v1/web/styleguide")
http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true
request = Net::HTTP::Get.new(url)
request["X-API-Key"] = '<api-key>'
response = http.request(request)
puts response.read_body{
"data": {
"domain": "stripe.com",
"colors": [
{
"hex": "#533afd",
"role": "accent",
"name": "Indigo"
}
],
"typography": [
{
"role": "body",
"family": "sohne-var",
"size": 16,
"weight": "400",
"lineHeight": 24,
"letterSpacing": "normal",
"fallbacks": [
"<string>"
]
}
],
"resolvedAt": "2026-08-22T10:14:03.000Z",
"page": "https://stripe.com/pricing",
"mode": "light",
"dark": {
"colors": [
{
"hex": "#533afd",
"role": "accent",
"name": "Indigo"
}
],
"button": {
"background": "#ededed",
"color": "#0a0a0a"
},
"contrast": {
"textOnBackground": 21,
"meetsAA": true,
"accentOnBackground": 6.19
}
},
"components": {
"panel": {
"border": {
"width": 2,
"style": "solid",
"color": "#0f172a"
},
"radius": "0px",
"background": "#f9fafc",
"shadow": "rgba(0, 0, 0, 0.1) 0px 4px 12px 0px",
"decoration": {
"kind": "pattern",
"offsetX": 8,
"offsetY": 8,
"image": "https://turbopuffer.com/dotted.svg",
"color": "#0f172a"
},
"padding": "24px 24px",
"color": "#0f172a",
"count": 5,
"css": "background-color: #f9fafc; border: 2px solid #0f172a; border-radius: 0px; padding: 24px 24px;"
},
"header": {
"background": "#0f172a",
"color": "#ffffff",
"height": 72,
"sticky": true,
"borderBottom": {
"width": 1,
"color": "rgba(255, 255, 255, 0.08)"
},
"css": "background-color: #0f172a; color: #ffffff; height: 72px; position: sticky; top: 0;"
},
"headingOnPanel": "on-border",
"tabs": {
"active": {
"color": "#0f172a",
"background": "#f9fafc",
"fontWeight": "600",
"radius": "0px",
"border": {
"width": 1,
"color": "rgba(255, 255, 255, 0.08)"
},
"borderBottom": {
"width": 1,
"color": "rgba(255, 255, 255, 0.08)"
},
"css": "background-color: #f9fafc; color: #0f172a; border: 2px solid #0f172a; border-bottom: none;"
},
"inactive": {
"color": "#0f172a",
"background": "#f9fafc",
"fontWeight": "600",
"radius": "0px",
"border": {
"width": 1,
"color": "rgba(255, 255, 255, 0.08)"
},
"borderBottom": {
"width": 1,
"color": "rgba(255, 255, 255, 0.08)"
},
"css": "background-color: #f9fafc; color: #0f172a; border: 2px solid #0f172a; border-bottom: none;"
}
},
"band": {
"background": "#0f172a",
"color": "#ffffff",
"count": 1
}
},
"webfonts": {},
"fontUsage": [
{
"family": "sohne-var",
"words": 1840,
"percentWords": 92.4
}
],
"radius": {
"default": "6px",
"card": "6px",
"button": "4px"
},
"shadows": {},
"spacing": {},
"button": {
"radius": "4px",
"background": "#533afd",
"color": "#ffffff",
"paddingX": 24,
"paddingY": 15.5,
"fontWeight": "400",
"fontSize": 16,
"minWidth": 210,
"minHeight": 48,
"border": {
"width": 1,
"style": "solid",
"color": "#533afd"
},
"shadow": "rgba(23, 23, 23, 0.08) 0px 15px 35px 0px",
"css": "background-color: #533afd; color: #ffffff; border-radius: 4px; padding: 15.5px 24px; font-size: 16px; min-height: 48px;"
},
"secondaryButton": {
"radius": "4px",
"background": "#533afd",
"color": "#ffffff",
"paddingX": 24,
"paddingY": 15.5,
"fontWeight": "400",
"fontSize": 16,
"minWidth": 210,
"minHeight": 48,
"border": {
"width": 1,
"style": "solid",
"color": "#533afd"
},
"shadow": "rgba(23, 23, 23, 0.08) 0px 15px 35px 0px",
"css": "background-color: #533afd; color: #ffffff; border-radius: 4px; padding: 15.5px 24px; font-size: 16px; min-height: 48px;"
},
"contrast": {
"textOnBackground": 21,
"meetsAA": true,
"accentOnBackground": 6.19
},
"css": "@font-face {\n font-family: \"sohne-var\";\n src: url(\"https://b.stripecdn.com/fonts/Sohne.woff2\") format(\"woff2\");\n font-weight: 400;\n font-display: swap;\n}\n\n:root {\n --color-background: #ffffff;\n --color-accent: #533afd;\n --font-body: \"sohne-var\", sans-serif;\n --radius-button: 4px;\n}",
"tailwind": "@import \"tailwindcss\";\n\n@theme {\n --color-accent: #533afd;\n --font-body: \"sohne-var\", sans-serif;\n --radius-button: 4px;\n}",
"shadcn": ":root {\n --background: #ffffff;\n --foreground: #0a2540;\n --primary: #533afd;\n --primary-foreground: #ffffff;\n --radius: 4px;\n}"
}
}{
"success": false,
"error": {
"code": "VALIDATION_ERROR",
"message": "url must be a valid URL"
},
"meta": {
"requestId": "019e8a3c-9f0b-7c12-88ab-1d2e3f4a5b6c"
}
}{
"success": false,
"error": {
"code": "UNAUTHORIZED",
"message": "Missing X-API-Key header. Agents: https://hydrafetch.com/auth.md"
},
"meta": {
"requestId": "019e8a3c-9f0b-7c12-88ab-1d2e3f4a5b6c"
}
}{
"success": false,
"error": {
"code": "INSUFFICIENT_CREDITS",
"message": "Insufficient credits"
},
"meta": {
"requestId": "019e8a3c-9f0b-7c12-88ab-1d2e3f4a5b6c"
}
}{
"success": false,
"error": {
"code": "WORKSPACE_BANNED",
"message": "This workspace has been suspended and cannot make API requests."
},
"meta": {
"requestId": "019e8a3c-9f0b-7c12-88ab-1d2e3f4a5b6c"
}
}{
"success": false,
"error": {
"code": "NOT_FOUND",
"message": "Job not found"
},
"meta": {
"requestId": "019e8a3c-9f0b-7c12-88ab-1d2e3f4a5b6c"
}
}{
"success": false,
"error": {
"code": "UPSTREAM_UNREACHABLE",
"message": "The origin did not respond to any attempt we made."
},
"meta": {
"requestId": "019e8a3c-9f0b-7c12-88ab-1d2e3f4a5b6c"
}
}{
"success": false,
"error": {
"code": "TOO_MANY_REQUESTS",
"message": "Rate limit exceeded for this workspace and plan."
},
"meta": {
"requestId": "019e8a3c-9f0b-7c12-88ab-1d2e3f4a5b6c"
}
}{
"success": false,
"error": {
"code": "INTERNAL_SERVER_ERROR",
"message": "Internal server error"
},
"meta": {
"requestId": "019e8a3c-9f0b-7c12-88ab-1d2e3f4a5b6c"
}
}{
"success": false,
"error": {
"code": "SERVICE_UNAVAILABLE",
"message": "The summary and json formats are not available."
},
"meta": {
"requestId": "019e8a3c-9f0b-7c12-88ab-1d2e3f4a5b6c"
}
}Read a company's design system
The colours, type scale, corner radius, buttons and component treatments a site actually paints, read from computed styles in a real browser, so a value defined through four layers of CSS variables comes back as the hex it resolved to. Colours are given by role (background, surface, text, accent) with contrast ratios, plus the dark theme when the site has one, so they drop into a theme without guesswork. Panels, the header bar, tabs and dark bands come back as values and as paste-ready CSS. A render every time, which is why it costs more than a brand lookup; cached for weeks after the first call unless you pass maxAge.
GET
/
v1
/
web
/
styleguide
Read a company's design system
curl --request GET \
--url https://api.hydrafetch.com/v1/web/styleguide \
--header 'X-API-Key: <api-key>'import requests
url = "https://api.hydrafetch.com/v1/web/styleguide"
headers = {"X-API-Key": "<api-key>"}
response = requests.get(url, headers=headers)
print(response.text)const options = {method: 'GET', headers: {'X-API-Key': '<api-key>'}};
fetch('https://api.hydrafetch.com/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.hydrafetch.com/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 => [
"X-API-Key: <api-key>"
],
]);
$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.hydrafetch.com/v1/web/styleguide"
req, _ := http.NewRequest("GET", url, nil)
req.Header.Add("X-API-Key", "<api-key>")
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.hydrafetch.com/v1/web/styleguide")
.header("X-API-Key", "<api-key>")
.asString();require 'uri'
require 'net/http'
url = URI("https://api.hydrafetch.com/v1/web/styleguide")
http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true
request = Net::HTTP::Get.new(url)
request["X-API-Key"] = '<api-key>'
response = http.request(request)
puts response.read_body{
"data": {
"domain": "stripe.com",
"colors": [
{
"hex": "#533afd",
"role": "accent",
"name": "Indigo"
}
],
"typography": [
{
"role": "body",
"family": "sohne-var",
"size": 16,
"weight": "400",
"lineHeight": 24,
"letterSpacing": "normal",
"fallbacks": [
"<string>"
]
}
],
"resolvedAt": "2026-08-22T10:14:03.000Z",
"page": "https://stripe.com/pricing",
"mode": "light",
"dark": {
"colors": [
{
"hex": "#533afd",
"role": "accent",
"name": "Indigo"
}
],
"button": {
"background": "#ededed",
"color": "#0a0a0a"
},
"contrast": {
"textOnBackground": 21,
"meetsAA": true,
"accentOnBackground": 6.19
}
},
"components": {
"panel": {
"border": {
"width": 2,
"style": "solid",
"color": "#0f172a"
},
"radius": "0px",
"background": "#f9fafc",
"shadow": "rgba(0, 0, 0, 0.1) 0px 4px 12px 0px",
"decoration": {
"kind": "pattern",
"offsetX": 8,
"offsetY": 8,
"image": "https://turbopuffer.com/dotted.svg",
"color": "#0f172a"
},
"padding": "24px 24px",
"color": "#0f172a",
"count": 5,
"css": "background-color: #f9fafc; border: 2px solid #0f172a; border-radius: 0px; padding: 24px 24px;"
},
"header": {
"background": "#0f172a",
"color": "#ffffff",
"height": 72,
"sticky": true,
"borderBottom": {
"width": 1,
"color": "rgba(255, 255, 255, 0.08)"
},
"css": "background-color: #0f172a; color: #ffffff; height: 72px; position: sticky; top: 0;"
},
"headingOnPanel": "on-border",
"tabs": {
"active": {
"color": "#0f172a",
"background": "#f9fafc",
"fontWeight": "600",
"radius": "0px",
"border": {
"width": 1,
"color": "rgba(255, 255, 255, 0.08)"
},
"borderBottom": {
"width": 1,
"color": "rgba(255, 255, 255, 0.08)"
},
"css": "background-color: #f9fafc; color: #0f172a; border: 2px solid #0f172a; border-bottom: none;"
},
"inactive": {
"color": "#0f172a",
"background": "#f9fafc",
"fontWeight": "600",
"radius": "0px",
"border": {
"width": 1,
"color": "rgba(255, 255, 255, 0.08)"
},
"borderBottom": {
"width": 1,
"color": "rgba(255, 255, 255, 0.08)"
},
"css": "background-color: #f9fafc; color: #0f172a; border: 2px solid #0f172a; border-bottom: none;"
}
},
"band": {
"background": "#0f172a",
"color": "#ffffff",
"count": 1
}
},
"webfonts": {},
"fontUsage": [
{
"family": "sohne-var",
"words": 1840,
"percentWords": 92.4
}
],
"radius": {
"default": "6px",
"card": "6px",
"button": "4px"
},
"shadows": {},
"spacing": {},
"button": {
"radius": "4px",
"background": "#533afd",
"color": "#ffffff",
"paddingX": 24,
"paddingY": 15.5,
"fontWeight": "400",
"fontSize": 16,
"minWidth": 210,
"minHeight": 48,
"border": {
"width": 1,
"style": "solid",
"color": "#533afd"
},
"shadow": "rgba(23, 23, 23, 0.08) 0px 15px 35px 0px",
"css": "background-color: #533afd; color: #ffffff; border-radius: 4px; padding: 15.5px 24px; font-size: 16px; min-height: 48px;"
},
"secondaryButton": {
"radius": "4px",
"background": "#533afd",
"color": "#ffffff",
"paddingX": 24,
"paddingY": 15.5,
"fontWeight": "400",
"fontSize": 16,
"minWidth": 210,
"minHeight": 48,
"border": {
"width": 1,
"style": "solid",
"color": "#533afd"
},
"shadow": "rgba(23, 23, 23, 0.08) 0px 15px 35px 0px",
"css": "background-color: #533afd; color: #ffffff; border-radius: 4px; padding: 15.5px 24px; font-size: 16px; min-height: 48px;"
},
"contrast": {
"textOnBackground": 21,
"meetsAA": true,
"accentOnBackground": 6.19
},
"css": "@font-face {\n font-family: \"sohne-var\";\n src: url(\"https://b.stripecdn.com/fonts/Sohne.woff2\") format(\"woff2\");\n font-weight: 400;\n font-display: swap;\n}\n\n:root {\n --color-background: #ffffff;\n --color-accent: #533afd;\n --font-body: \"sohne-var\", sans-serif;\n --radius-button: 4px;\n}",
"tailwind": "@import \"tailwindcss\";\n\n@theme {\n --color-accent: #533afd;\n --font-body: \"sohne-var\", sans-serif;\n --radius-button: 4px;\n}",
"shadcn": ":root {\n --background: #ffffff;\n --foreground: #0a2540;\n --primary: #533afd;\n --primary-foreground: #ffffff;\n --radius: 4px;\n}"
}
}{
"success": false,
"error": {
"code": "VALIDATION_ERROR",
"message": "url must be a valid URL"
},
"meta": {
"requestId": "019e8a3c-9f0b-7c12-88ab-1d2e3f4a5b6c"
}
}{
"success": false,
"error": {
"code": "UNAUTHORIZED",
"message": "Missing X-API-Key header. Agents: https://hydrafetch.com/auth.md"
},
"meta": {
"requestId": "019e8a3c-9f0b-7c12-88ab-1d2e3f4a5b6c"
}
}{
"success": false,
"error": {
"code": "INSUFFICIENT_CREDITS",
"message": "Insufficient credits"
},
"meta": {
"requestId": "019e8a3c-9f0b-7c12-88ab-1d2e3f4a5b6c"
}
}{
"success": false,
"error": {
"code": "WORKSPACE_BANNED",
"message": "This workspace has been suspended and cannot make API requests."
},
"meta": {
"requestId": "019e8a3c-9f0b-7c12-88ab-1d2e3f4a5b6c"
}
}{
"success": false,
"error": {
"code": "NOT_FOUND",
"message": "Job not found"
},
"meta": {
"requestId": "019e8a3c-9f0b-7c12-88ab-1d2e3f4a5b6c"
}
}{
"success": false,
"error": {
"code": "UPSTREAM_UNREACHABLE",
"message": "The origin did not respond to any attempt we made."
},
"meta": {
"requestId": "019e8a3c-9f0b-7c12-88ab-1d2e3f4a5b6c"
}
}{
"success": false,
"error": {
"code": "TOO_MANY_REQUESTS",
"message": "Rate limit exceeded for this workspace and plan."
},
"meta": {
"requestId": "019e8a3c-9f0b-7c12-88ab-1d2e3f4a5b6c"
}
}{
"success": false,
"error": {
"code": "INTERNAL_SERVER_ERROR",
"message": "Internal server error"
},
"meta": {
"requestId": "019e8a3c-9f0b-7c12-88ab-1d2e3f4a5b6c"
}
}{
"success": false,
"error": {
"code": "SERVICE_UNAVAILABLE",
"message": "The summary and json formats are not available."
},
"meta": {
"requestId": "019e8a3c-9f0b-7c12-88ab-1d2e3f4a5b6c"
}
}Authorizations
Query Parameters
Domain to read the design system from, using its homepage. Send this or url.
Example:
"stripe.com"
One page to read instead of the homepage, for a section styled differently from the rest of the site. Send this or domain.
Example:
"https://stripe.com/pricing"
Accept a stored result no older than this many milliseconds. 0 reads the page fresh. Defaults to 30 days for a domain and 7 days for a page.
Example:
0
Response
The design system.
Null when the domain could not be rendered. An unresolved domain is free.
Show child attributes
Show child attributes
Was this page helpful?