> ## 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.

# Styleguide

> A site's design system: colors by role, type scale, spacing, radii, shadows and component styles, plus CSS variables and a Tailwind theme. 10 credits.

`/styleguide` renders a page in a real browser and reads its design system off what's 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` and `border`, plus the full palette.
* **Typography:** the heading, body and monospace faces with their font stacks, and the type scale: `h1` to `h6`, `body`, `small`, `label` and `nav`, each with size, weight, line height, letter spacing and text transform. The ratio between steps is reported, and named when it's 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, and whether the site uses pills.
* **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 where the CSS changes layout.
* **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. Point a coding agent at a site and it can build UI that looks like it.

For logos, the logo's own colors, fonts and social links, use [`/brand`](https://docs.prefetch.io/company-data/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`);
```

```python Python theme={"theme":"css-variables"}
import json, os, requests

r = requests.get(
    "https://api.prefetch.io/styleguide",
    params={"url": "https://linear.app"},
    headers={"X-API-Key": os.environ["PREFETCH_API_KEY"]},
)
data = r.json()["data"]

with open("brand.css", "w") as f:
    f.write(data["exports"]["css"])
with open("tailwind.brand.json", "w") as f:
    json.dump(data["exports"]["tailwind"], f, indent=2)
```

## 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 CSS framework the site uses:

* Colors are read in any CSS color space (`oklch()`, `lab()` and `color()` included) and returned as hex. Translucent colors are blended over what's behind them.
* A text style is the one most instances of an element share, weighted by text, so one oversized hero heading doesn't speak for every heading.
* Spacing, radii and shadows are counted across up to 2,500 visible elements. One-off values don't make the scale, Tailwind's transparent placeholder shadows are dropped, and hairline "ring" shadows count as borders, not elevation.
* `css_variables` lists the custom properties in scope on the page, with names that look like design tokens first.

It's best effort: a value the page gives no reliable answer for is `null`. Set `dark_mode=true` to read a site's dark theme, and `color_scheme` tells you which theme you got.

## Credits

**10 credits** per request. Styleguides are always read live, never from curated data. A repeat request can be answered from the request cache.

## Next

> [card] [Build on-brand UI](https://docs.prefetch.io/recipes/on-brand-ui.md)
>
> A recipe for turning a styleguide into a Tailwind theme with a coding agent.

> [card] [API reference](https://docs.prefetch.io/api-reference/endpoint/styleguide.md)
>
> Every parameter, and a playground to try it.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.