> ## Documentation Index
> Fetch the complete documentation index at: https://docs.prefetch.io/llms.txt
> Use this file to discover all available pages before exploring further.
# GET /styleguide
> A site's design system — colors by role, the type scale, spacing, radii, shadows and component styles — plus ready-to-use CSS variables and a Tailwind theme. Costs 10 credits.
## Overview
`/styleguide` renders a page in a real browser and reads its design system off what is actually on screen — the way a designer would write it down to rebuild the site's look:
* **Colors by role** — `primary` (the main button's fill), `secondary`, `accent`, `background`, `surface`, `text`, `text_muted`, `heading`, `link`, `border` — and the full palette.
* **Typography** — the heading, body and monospace faces with their font stacks, and the type scale: `h1`–`h6`, `body`, `small`, `label` and `nav`, each with size, weight, line height, letter spacing and text transform. The ratio between steps is reported, named when it is a classic one (*major third*, *perfect fourth*…).
* **Spacing** — the base unit most margins and paddings are a multiple of, and the scale in use.
* **Radii and shadows** — small, medium and large, plus whether pills are used.
* **Components** — the primary and secondary button (fill, text, border, radius, weight, font size, height, padding, shadow), the input, the card and the link.
* **Breakpoints** — the widths the CSS switches layout at.
* **CSS variables** — the site's own custom properties for colors, lengths, fonts and shadows.
`exports` has the same guide as **CSS custom properties** and a **Tailwind theme**, ready to paste. It is built for coding agents: point one at a site and it can generate UI that looks like it.
For logos, brand colors from the logo itself, fonts and social links, use [`/brand`](/api-reference/endpoint/brand).
## Example requests
```bash cURL theme={"theme":"css-variables"}
curl "https://api.prefetch.io/styleguide?url=https://stripe.com" \
-H "X-API-Key: $PREFETCH_API_KEY"
```
```bash Dark theme theme={"theme":"css-variables"}
curl "https://api.prefetch.io/styleguide?url=https://github.com&dark_mode=true" \
-H "X-API-Key: $PREFETCH_API_KEY"
```
```javascript Node.js — write a Tailwind preset theme={"theme":"css-variables"}
import { writeFile } from "node:fs/promises";
const res = await fetch("https://api.prefetch.io/styleguide?url=https://linear.app", {
headers: { "X-API-Key": process.env.PREFETCH_API_KEY },
});
const { data } = await res.json();
await writeFile("brand.css", data.exports.css);
await writeFile("tailwind.brand.js", `export default ${JSON.stringify(data.exports.tailwind, null, 2)};\n`);
```
## Example response
```json theme={"theme":"css-variables"}
{
"success": true,
"data": {
"url": "https://stripe.com",
"domain": "stripe.com",
"dark_mode": false,
"styleguide": {
"color_scheme": "light",
"colors": {
"primary": "#533AFD", "secondary": null, "accent": null,
"background": "#FFFFFF", "surface": "#E5EDF5",
"text": "#50617A", "text_muted": "#64748D", "heading": "#061B31",
"link": "#533AFD", "border": "#E5EDF5"
},
"palette": [{ "hex": "#533AFD", "role": "primary" }, { "hex": "#FFFFFF", "role": "background" }],
"typography": {
"font_families": {
"heading": { "family": "sohne-var", "stack": ["sohne-var", "SF Pro Display", "sans-serif"] },
"body": { "family": "sohne-var", "stack": ["sohne-var", "SF Pro Display", "sans-serif"] },
"mono": null
},
"styles": {
"h1": { "font_family": "sohne-var", "font_size": "48px", "font_weight": 300, "line_height": "55.2px", "letter_spacing": "-0.96px", "text_transform": null },
"body": { "font_family": "sohne-var", "font_size": "16px", "font_weight": 300, "line_height": "22.4px", "letter_spacing": null, "text_transform": null }
},
"base_font_size": "16px",
"scale": { "ratio": 1.441, "name": "augmented fourth" },
"web_fonts": { "google_fonts": [], "adobe_fonts": [] }
},
"spacing": { "base_unit": "4px", "scale": ["4px", "8px", "12px", "16px", "24px", "32px", "40px", "64px"] },
"radius": { "small": "4px", "medium": "6px", "large": "16px", "full": true, "scale": ["4px", "6px", "16px", "9999px"], "button": "4px", "input": "4px", "card": "6px" },
"shadows": {
"small": "rgba(23, 23, 23, 0.06) 0px 3px 6px 0px",
"medium": null,
"large": "rgba(23, 23, 23, 0.08) 0px 15px 35px 0px",
"scale": ["rgba(23, 23, 23, 0.06) 0px 3px 6px 0px", "rgba(23, 23, 23, 0.08) 0px 15px 35px 0px"]
},
"borders": { "width": "1px", "color": "#E5EDF5" },
"components": {
"button_primary": { "background": "#533AFD", "text_color": "#FFFFFF", "border_color": null, "border_radius": "4px", "font_weight": 400, "font_family": "sohne-var", "font_size": "16px", "height": "48px", "padding": "15.5px 24px 16.5px", "text_transform": null, "letter_spacing": null, "box_shadow": null },
"button_secondary": null,
"input": null,
"card": { "background": "#FFFFFF", "border_color": null, "border_width": null, "border_radius": "6px", "box_shadow": "rgba(50, 50, 93, 0.12) 0px 16px 32px 0px", "padding": null },
"link": { "color": "#533AFD", "text_decoration": "none", "font_weight": 400 }
},
"breakpoints": ["640px", "768px", "1024px"],
"css_variables": { "--hds-color-accent-border-solid": "#533afd" }
},
"exports": {
"css": ":root {\n --color-primary: #533AFD;\n --color-background: #FFFFFF;\n …\n}\n",
"tailwind": { "theme": { "extend": { "colors": { "primary": "#533AFD", "background": "#FFFFFF" }, "fontSize": { "h1": ["48px", { "lineHeight": "55.2px", "fontWeight": "300", "letterSpacing": "-0.96px" }] } } } }
}
},
"meta": { "requestId": "3c2b1a0f-9e8d-4c7b-8a6f-5e4d3c2b1a0f", "durationMs": 4532 }
}
```
## How it reads a site
Everything comes from computed styles in the rendered page, so it reflects what visitors see, whatever the CSS framework:
* Colors are read in any CSS color space (`oklch()`, `lab()`, `color()` included) and given as hex; translucent ones are blended over what is behind them.
* A text style is the one most instances of an element share, weighted by text, so one oversized hero heading does not speak for every heading.
* Spacing, radii and shadows are tallied across up to 2,500 visible elements. Off-grid one-offs don't make the scale, transparent placeholder shadows (Tailwind's) are dropped, and hairline "ring" shadows count as borders, not elevation.
* `css_variables` lists custom properties in scope on the page, names that read as design tokens first.
It is best effort: a value the page gives no reliable answer for is `null`. Set `dark_mode=true` to read the dark theme of a site that has one; `color_scheme` says which theme you got.
## Credits
**10 credits** per request. Never answered from curated data; repeat requests can be served from the request cache.
## Related
Logos, brand colors, fonts and social links. **10 credits.**
See the page the guide was read from. **1 credit.**
## OpenAPI
````yaml GET /styleguide
openapi: 3.1.0
info:
title: Prefetch API
description: >-
Extract brand identity, company data, screenshots, IAB classifications, and
clean page content from any URL.
version: 1.0.0
contact:
email: support@prefetch.io
servers:
- url: https://api.prefetch.io
description: Production
security:
- apiKey: []
tags:
- name: Endpoints
description: Data extraction endpoints. All require authentication and consume credits.
- name: Health
description: Health and readiness probes. No authentication required.
paths:
/styleguide:
get:
tags:
- Endpoints
summary: Extract a design system
description: >-
Reads the design system off the rendered page: colors by role (primary,
secondary, accent, background, surface, text, heading, link, border) and
the full palette; heading, body and monospace fonts with the type scale
(h1–h6, body, small, label, nav — size, weight, line height, letter
spacing); the spacing rhythm and its base unit; corner radii and shadows
by size; border style; the primary and secondary button, input, card and
link styles; the media-query breakpoints; and the site's own CSS custom
properties. `exports` has the same as CSS variables and a Tailwind
theme, ready to paste. Built for coding agents that need to match a
site's look.
Best effort: a value the page gives no reliable answer for is null.
Never answered from curated data. **Credit cost: 10.**
operationId: getStyleguide
parameters:
- schema:
type: string
minLength: 1
description: >-
Target website URL. https:// is prepended automatically if the
protocol is omitted.
example: https://stripe.com
required: true
description: >-
Target website URL. https:// is prepended automatically if the
protocol is omitted.
name: url
in: query
- schema:
type: string
description: >-
Read the site's dark theme (`prefers-color-scheme: dark`) instead
of its default one. Sites without one return their usual theme,
with `color_scheme` saying which it is. Pass "true" to enable.
required: false
description: >-
Read the site's dark theme (`prefers-color-scheme: dark`) instead of
its default one. Sites without one return their usual theme, with
`color_scheme` saying which it is. Pass "true" to enable.
name: dark_mode
in: query
responses:
'200':
description: The site's design system.
content:
application/json:
schema:
type: object
properties:
success:
type: boolean
enum:
- true
data:
$ref: '#/components/schemas/StyleguideData'
meta:
$ref: '#/components/schemas/Meta'
required:
- success
- data
- meta
example:
success: true
data:
url: https://stripe.com
domain: stripe.com
dark_mode: false
styleguide:
color_scheme: light
colors:
primary: '#533AFD'
secondary: null
accent: null
background: '#FFFFFF'
surface: '#E5EDF5'
text: '#50617A'
text_muted: '#64748D'
heading: '#061B31'
link: '#533AFD'
border: '#E5EDF5'
palette:
- hex: '#533AFD'
role: primary
- hex: '#FFFFFF'
role: background
- hex: '#061B31'
role: heading
typography:
font_families:
heading:
family: sohne-var
stack:
- sohne-var
- SF Pro Display
- sans-serif
body:
family: sohne-var
stack:
- sohne-var
- SF Pro Display
- sans-serif
mono: null
styles:
h1:
font_family: sohne-var
font_size: 48px
font_weight: 300
line_height: 55.2px
letter_spacing: '-0.96px'
text_transform: null
body:
font_family: sohne-var
font_size: 16px
font_weight: 300
line_height: 22.4px
letter_spacing: null
text_transform: null
base_font_size: 16px
scale:
ratio: 1.441
name: augmented fourth
web_fonts:
google_fonts: []
adobe_fonts: []
spacing:
base_unit: 4px
scale:
- 4px
- 8px
- 12px
- 16px
- 24px
- 32px
- 40px
- 64px
radius:
small: 4px
medium: 6px
large: 16px
full: true
scale:
- 4px
- 6px
- 16px
- 9999px
button: 4px
input: 4px
card: 6px
shadows:
small: rgba(23, 23, 23, 0.06) 0px 3px 6px 0px
medium: null
large: rgba(23, 23, 23, 0.08) 0px 15px 35px 0px
scale:
- rgba(23, 23, 23, 0.06) 0px 3px 6px 0px
- rgba(23, 23, 23, 0.08) 0px 15px 35px 0px
borders:
width: 1px
color: '#E5EDF5'
components:
button_primary:
background: '#533AFD'
text_color: '#FFFFFF'
border_color: null
border_radius: 4px
font_weight: 400
font_family: sohne-var
font_size: 16px
height: 48px
padding: 15.5px 24px 16.5px
text_transform: null
letter_spacing: null
box_shadow: null
button_secondary: null
input: null
card:
background: '#FFFFFF'
border_color: null
border_width: null
border_radius: 6px
box_shadow: rgba(50, 50, 93, 0.12) 0px 16px 32px 0px
padding: null
link:
color: '#533AFD'
text_decoration: none
font_weight: 400
breakpoints:
- 640px
- 768px
- 1024px
css_variables:
'--hds-color-accent-border-solid': '#533afd'
exports:
css: |
:root {
--color-primary: #533AFD;
--color-background: #FFFFFF;
}
tailwind:
theme:
extend:
colors:
primary: '#533AFD'
background: '#FFFFFF'
meta:
requestId: 6f1d2c3b-4a5e-4f60-8b7a-9c0d1e2f3a4b
durationMs: 1840
'400':
description: Invalid or missing parameters.
content:
application/json:
schema:
$ref: '#/components/schemas/ErrorResponse'
'401':
description: Missing or invalid API key.
content:
application/json:
schema:
$ref: '#/components/schemas/ErrorResponse'
'403':
description: Revoked key, expired key, blocked URL, or credit limit.
content:
application/json:
schema:
$ref: '#/components/schemas/ErrorResponse'
'429':
description: Rate or concurrency limit exceeded.
content:
application/json:
schema:
$ref: '#/components/schemas/ErrorResponse'
'503':
description: Service temporarily unavailable — retry shortly.
content:
application/json:
schema:
$ref: '#/components/schemas/ErrorResponse'
'504':
description: Request timed out.
content:
application/json:
schema:
$ref: '#/components/schemas/ErrorResponse'
components:
schemas:
StyleguideData:
type: object
properties:
url:
type: string
domain:
type: string
example: stripe.com
dark_mode:
type: boolean
styleguide:
$ref: '#/components/schemas/Styleguide'
exports:
type: object
properties:
css:
type: string
description: The guide as CSS custom properties on `:root`.
example: |
:root {
--color-primary: #635BFF;
}
tailwind:
type: object
additionalProperties:
nullable: true
description: 'The guide as a Tailwind config: merge `theme.extend` into yours.'
required:
- css
- tailwind
required:
- url
- domain
- dark_mode
- styleguide
- exports
Meta:
type: object
properties:
requestId:
type: string
format: uuid
description: Unique identifier for this request.
example: a3f2c1d4-7b6e-4f2a-9c1d-8e3f2a1b4c5d
durationMs:
type: integer
nullable: true
description: Time taken to process the request in milliseconds.
example: 1842
required:
- requestId
- durationMs
ErrorResponse:
type: object
properties:
success:
type: boolean
enum:
- false
description: >-
Always false. Absent, like `meta`, on authentication and rate-limit
errors, which are answered before a request is processed.
error:
type: string
description: >-
Human-readable error message. The wording can change: branch on
`error_code`.
example: Credit limit exceeded
error_code:
type: string
enum:
- INVALID_REQUEST
- PAYLOAD_TOO_LARGE
- NOT_FOUND
- CONFLICT
- UNAUTHORIZED
- FORBIDDEN
- CREDITS_EXHAUSTED
- RATE_LIMITED
- CONCURRENCY_LIMITED
- URL_BLOCKED
- URL_NOT_PERMITTED
- DNS_RESOLUTION_FAILED
- TARGET_BLOCKED
- TARGET_CONNECTION_FAILED
- TARGET_TIMEOUT
- TARGET_SSL_ERROR
- TARGET_SERVER_ERROR
- TARGET_CLIENT_ERROR
- TARGET_NOT_A_PAGE
- TARGET_UNLOADABLE
- RESEARCH_INCONCLUSIVE
- TIMEOUT
- SERVICE_BUSY
- SERVICE_UNAVAILABLE
- INTERNAL_ERROR
description: >-
What went wrong, for machines. Stable: a code keeps its meaning once
published. See [Error handling](/concepts/errors).
example: CREDITS_EXHAUSTED
retryable:
type: boolean
description: >-
Whether the same request can succeed if sent again after a short
wait (honour `Retry-After` when present). False for problems with
the request or the target.
example: false
retryAfterSeconds:
type: integer
description: 'On `RATE_LIMITED`: seconds until a request will be accepted.'
limit:
type: integer
description: >-
On `CONCURRENCY_LIMITED`: how many requests this key may have in
flight.
meta:
$ref: '#/components/schemas/Meta'
required:
- error
- error_code
- retryable
Styleguide:
type: object
properties:
color_scheme:
type: string
nullable: true
enum:
- light
- dark
- null
colors:
type: object
properties:
primary:
type: string
nullable: true
example: '#635BFF'
description: 'The main action color: the fill of the most prominent button.'
secondary:
type: string
nullable: true
example: '#635BFF'
accent:
type: string
nullable: true
example: '#635BFF'
background:
type: string
nullable: true
example: '#635BFF'
surface:
type: string
nullable: true
example: '#635BFF'
description: >-
The most used fill other than the page background: panels,
cards, sections.
text:
type: string
nullable: true
example: '#635BFF'
text_muted:
type: string
nullable: true
example: '#635BFF'
heading:
type: string
nullable: true
example: '#635BFF'
link:
type: string
nullable: true
example: '#635BFF'
border:
type: string
nullable: true
example: '#635BFF'
required:
- primary
- secondary
- accent
- background
- surface
- text
- text_muted
- heading
- link
- border
palette:
type: array
items:
type: object
properties:
hex:
type: string
role:
type: string
required:
- hex
- role
description: >-
Every color the guide found, by role, most important first (up to
16).
typography:
type: object
properties:
font_families:
type: object
properties:
heading:
$ref: '#/components/schemas/FontFamilyRef'
body:
$ref: '#/components/schemas/FontFamilyRef'
mono:
$ref: '#/components/schemas/FontFamilyRef'
required:
- heading
- body
- mono
styles:
type: object
properties:
h1:
$ref: '#/components/schemas/TextStyle'
h2:
$ref: '#/components/schemas/TextStyle'
h3:
$ref: '#/components/schemas/TextStyle'
h4:
$ref: '#/components/schemas/TextStyle'
h5:
$ref: '#/components/schemas/TextStyle'
h6:
$ref: '#/components/schemas/TextStyle'
body:
$ref: '#/components/schemas/TextStyle'
small:
$ref: '#/components/schemas/TextStyle'
label:
$ref: '#/components/schemas/TextStyle'
nav:
$ref: '#/components/schemas/TextStyle'
required:
- h1
- h2
- h3
- h4
- h5
- h6
- body
- small
- label
- nav
description: The style most of each element's instances share.
base_font_size:
type: string
nullable: true
example: 16px
scale:
type: object
nullable: true
properties:
ratio:
type: number
example: 1.25
name:
type: string
nullable: true
example: major third
required:
- ratio
- name
description: >-
The ratio between steps of the type scale, named when it is a
classic one.
web_fonts:
type: object
properties:
google_fonts:
type: array
items:
type: string
adobe_fonts:
type: array
items:
type: string
required:
- google_fonts
- adobe_fonts
description: Stylesheet URLs that load the fonts, to reuse as they are.
required:
- font_families
- styles
- base_font_size
- scale
- web_fonts
spacing:
type: object
properties:
base_unit:
type: string
nullable: true
description: The unit most margins, paddings and gaps are a multiple of.
example: 8px
scale:
type: array
items:
type: string
example:
- 4px
- 8px
- 16px
- 24px
- 32px
- 48px
required:
- base_unit
- scale
radius:
type: object
properties:
small:
type: string
nullable: true
medium:
type: string
nullable: true
large:
type: string
nullable: true
full:
type: boolean
description: Whether pills (fully rounded corners) are used.
scale:
type: array
items:
type: string
button:
type: string
nullable: true
input:
type: string
nullable: true
card:
type: string
nullable: true
required:
- small
- medium
- large
- full
- scale
- button
- input
- card
shadows:
type: object
properties:
small:
type: string
nullable: true
medium:
type: string
nullable: true
large:
type: string
nullable: true
scale:
type: array
items:
type: string
required:
- small
- medium
- large
- scale
borders:
type: object
properties:
width:
type: string
nullable: true
color:
type: string
nullable: true
example: '#635BFF'
required:
- width
- color
components:
type: object
properties:
button_primary:
$ref: '#/components/schemas/StyleguideButton'
button_secondary:
$ref: '#/components/schemas/StyleguideButton'
input:
type: object
nullable: true
properties:
background:
type: string
nullable: true
example: '#635BFF'
text_color:
type: string
nullable: true
example: '#635BFF'
border_color:
type: string
nullable: true
example: '#635BFF'
border_radius:
type: string
nullable: true
height:
type: string
nullable: true
padding:
type: string
nullable: true
font_size:
type: string
nullable: true
required:
- background
- text_color
- border_color
- border_radius
card:
type: object
nullable: true
properties:
background:
type: string
nullable: true
example: '#635BFF'
border_color:
type: string
nullable: true
example: '#635BFF'
border_width:
type: string
nullable: true
border_radius:
type: string
nullable: true
box_shadow:
type: string
nullable: true
padding:
type: string
nullable: true
required:
- background
- border_color
- border_width
- border_radius
- box_shadow
- padding
link:
type: object
nullable: true
properties:
color:
type: string
nullable: true
example: '#635BFF'
text_decoration:
type: string
nullable: true
font_weight:
type: number
nullable: true
required:
- color
- text_decoration
- font_weight
required:
- button_primary
- button_secondary
- input
- card
- link
breakpoints:
type: array
items:
type: string
description: The media-query widths the site's CSS switches layout at.
example:
- 640px
- 768px
- 1024px
- 1280px
css_variables:
type: object
additionalProperties:
type: string
description: >-
The site's own CSS custom properties for colors, lengths, fonts and
shadows, as set on the root (up to 120).
example:
'--brand-primary': '#635BFF'
'--radius-md': 8px
required:
- color_scheme
- colors
- palette
- typography
- spacing
- radius
- shadows
- borders
- components
- breakpoints
- css_variables
FontFamilyRef:
type: object
nullable: true
properties:
family:
type: string
example: Inter
stack:
type: array
items:
type: string
example:
- Inter
- system-ui
- sans-serif
required:
- family
- stack
TextStyle:
type: object
nullable: true
properties:
font_family:
type: string
nullable: true
example: Inter
font_size:
type: string
nullable: true
example: 48px
font_weight:
type: number
nullable: true
example: 600
line_height:
type: string
nullable: true
example: 56px
letter_spacing:
type: string
nullable: true
example: '-0.96px'
text_transform:
type: string
nullable: true
required:
- font_family
- font_size
- font_weight
- line_height
- letter_spacing
- text_transform
StyleguideButton:
allOf:
- $ref: '#/components/schemas/ButtonTokens'
- type: object
nullable: true
properties:
font_family:
type: string
nullable: true
font_size:
type: string
nullable: true
height:
type: string
nullable: true
example: 40px
padding:
type: string
nullable: true
example: 10px 20px
text_transform:
type: string
nullable: true
letter_spacing:
type: string
nullable: true
box_shadow:
type: string
nullable: true
ButtonTokens:
type: object
nullable: true
properties:
background:
type: string
nullable: true
description: Fill color. `null` for an outlined or text-only button.
example: '#533AFD'
text_color:
type: string
nullable: true
description: Label color.
example: '#FFFFFF'
border_color:
type: string
nullable: true
description: Border color, when the button has a visible border.
border_radius:
type: string
nullable: true
description: Corner radius. `9999px` means fully rounded (a pill).
example: 4px
font_weight:
type: number
nullable: true
description: Label weight.
example: 400
securitySchemes:
apiKey:
type: apiKey
in: header
name: X-API-Key
description: Your Prefetch API key. Obtain one from the dashboard.
````
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.