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.
Request
- Base URL: https://api.hydrafetch.com
- URL: https://api.hydrafetch.com/v1/web/styleguide
- Auth: API key in header X-API-Key
Query parameters
Domain to read the design system from, using its homepage. Send this or url.
One page to read instead of the homepage, for a section styled differently from the rest of the site. Send this or domain.
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.
Response
The design system.
Example response
{
"data": {
"domain": "stripe.com",
"page": "https://stripe.com/pricing",
"mode": "light",
"dark": {
"colors": [
{
"hex": "#533afd",
"name": "Indigo",
"role": "accent"
}
],
"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": {
"background": "#f9fafc",
"color": "#0f172a",
"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": {
"background": "#f9fafc",
"color": "#0f172a",
"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
}
},
"colors": [
{
"hex": "#533afd",
"name": "Indigo",
"role": "accent"
}
],
"typography": [
{
"role": "body",
"family": "sohne-var",
"size": 16,
"lineHeight": 24,
"letterSpacing": "normal"
}
],
"fontUsage": [
{
"family": "sohne-var",
"words": 1840,
"percentWords": 92.4
}
],
"radius": {
"default": "6px",
"card": "6px",
"button": "4px"
},
"button": {
"background": "#533afd",
"radius": "4px",
"paddingX": 24,
"paddingY": 15.5,
"fontSize": 16,
"minWidth": 210,
"minHeight": 48,
"border": {
"width": 1,
"style": "solid"
},
"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": {
"background": "#533afd",
"radius": "4px",
"paddingX": 24,
"paddingY": 15.5,
"fontSize": 16,
"minWidth": 210,
"minHeight": 48,
"border": {
"width": 1,
"style": "solid"
},
"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}"
}
}Changes
No recorded changes to this operation across all 1 revision of this API.