---
title: "Extract design system and styleguide from website"
method: GET
path: "/brand/styleguide"
tags: ["Screenshot / Styleguide"]
---

# Extract design system and styleguide from website

`GET /brand/styleguide`

Automatically extract comprehensive design system information from a brand's website including colors, typography, spacing, shadows, and UI components. Either 'domain' or 'directUrl' must be provided as a query parameter, but not both.

## Query parameters

- `domain` string
- `directUrl` string, uri
- `timeoutMS` integer

## Response `200`

Successful response

- object
  - `status` string — Status of the response, e.g., 'ok'
  - `domain` string — The normalized domain that was processed
  - `styleguide` object — Comprehensive styleguide data extracted from the website
    - `mode` 'light' | 'dark', required — The primary color mode of the website design
    - `colors` object, required — Primary colors used on the website
      - `accent` string, required — Accent color (hex format)
      - `background` string, required — Background color (hex format)
      - `text` string, required — Text color (hex format)
    - `typography` object, required — Typography styles used on the website
      - `headings` object, required — Heading styles
        - `h1` object
          - `fontFamily` string, required — Primary face (first family in the computed stack)
          - `fontFallbacks` string[], required — Full ordered font list from resolved computed font-family
          - `fontSize` string, required
          - `fontWeight` number, required
          - `lineHeight` string, required
          - `letterSpacing` string, required
        - `h2` object
          - `fontFamily` string, required — Primary face (first family in the computed stack)
          - `fontFallbacks` string[], required — Full ordered font list from resolved computed font-family
          - `fontSize` string, required
          - `fontWeight` number, required
          - `lineHeight` string, required
          - `letterSpacing` string, required
        - `h3` object
          - `fontFamily` string, required — Primary face (first family in the computed stack)
          - `fontFallbacks` string[], required — Full ordered font list from resolved computed font-family
          - `fontSize` string, required
          - `fontWeight` number, required
          - `lineHeight` string, required
          - `letterSpacing` string, required
        - `h4` object
          - `fontFamily` string, required — Primary face (first family in the computed stack)
          - `fontFallbacks` string[], required — Full ordered font list from resolved computed font-family
          - `fontSize` string, required
          - `fontWeight` number, required
          - `lineHeight` string, required
          - `letterSpacing` string, required
      - `p` object
        - `fontFamily` string, required — Primary face (first family in the computed stack)
        - `fontFallbacks` string[], required — Full ordered font list from resolved computed font-family
        - `fontSize` string, required
        - `fontWeight` number, required
        - `lineHeight` string, required
        - `letterSpacing` string, required
    - `elementSpacing` object, required — Spacing system used on the website
      - `xs` string, required
      - `sm` string, required
      - `md` string, required
      - `lg` string, required
      - `xl` string, required
    - `shadows` object, required — Shadow styles used on the website
      - `sm` string, required
      - `md` string, required
      - `lg` string, required
      - `xl` string, required
      - `inner` string, required
    - `components` object, required — UI component styles
      - `button` object, required — Button component styles
        - `primary` object
          - `backgroundColor` string, required
          - `color` string, required
          - `borderColor` string, required — Border color as CSS hex (#RRGGBB or #RRGGBBAA when computed border-color has alpha)
          - `borderRadius` string, required
          - `borderWidth` string, required
          - `borderStyle` string, required
          - `padding` string, required
          - `minWidth` string, required — Sampled minimum width of the button box (typically px)
          - `minHeight` string, required — Sampled minimum height of the button box (typically px)
          - `fontSize` string, required
          - `fontWeight` number, required
          - `fontFamily` string — Primary button typeface (first in fontFallbacks)
          - `fontFallbacks` string[] — Full ordered font list from computed font-family
          - `textDecoration` string, required
          - `textDecorationColor` string — Hex color of the underline when it differs from the text color
          - `boxShadow` string, required — Computed box-shadow (comma-separated layers when present)
          - `css` string, required — Ready-to-use CSS declaration block for this component style
        - `secondary` object
          - `backgroundColor` string, required
          - `color` string, required
          - `borderColor` string, required — Border color as CSS hex (#RRGGBB or #RRGGBBAA when computed border-color has alpha)
          - `borderRadius` string, required
          - `borderWidth` string, required
          - `borderStyle` string, required
          - `padding` string, required
          - `minWidth` string, required — Sampled minimum width of the button box (typically px)
          - `minHeight` string, required — Sampled minimum height of the button box (typically px)
          - `fontSize` string, required
          - `fontWeight` number, required
          - `fontFamily` string — Primary button typeface (first in fontFallbacks)
          - `fontFallbacks` string[] — Full ordered font list from computed font-family
          - `textDecoration` string, required
          - `textDecorationColor` string — Hex color of the underline when it differs from the text color
          - `boxShadow` string, required — Computed box-shadow (comma-separated layers when present)
          - `css` string, required — Ready-to-use CSS declaration block for this component style
        - `link` object
          - `backgroundColor` string, required
          - `color` string, required
          - `borderColor` string, required — Border color as CSS hex (#RRGGBB or #RRGGBBAA when computed border-color has alpha)
          - `borderRadius` string, required
          - `borderWidth` string, required
          - `borderStyle` string, required
          - `padding` string, required
          - `minWidth` string, required — Sampled minimum width of the button box (typically px)
          - `minHeight` string, required — Sampled minimum height of the button box (typically px)
          - `fontSize` string, required
          - `fontWeight` number, required
          - `fontFamily` string — Primary button typeface (first in fontFallbacks)
          - `fontFallbacks` string[] — Full ordered font list from computed font-family
          - `textDecoration` string, required
          - `textDecorationColor` string — Hex color of the underline when it differs from the text color
          - `boxShadow` string, required — Computed box-shadow (comma-separated layers when present)
          - `css` string, required — Ready-to-use CSS declaration block for this component style
      - `card` object — Card component style
        - `backgroundColor` string, required
        - `borderColor` string, required — Border color as CSS hex (#RRGGBB or #RRGGBBAA when computed border-color has alpha)
        - `borderRadius` string, required
        - `borderWidth` string, required
        - `borderStyle` string, required
        - `padding` string, required
        - `boxShadow` string, required
        - `textColor` string, required
        - `css` string, required — Ready-to-use CSS declaration block for this component style
  - `code` integer — HTTP status code

## Other responses

- `400` — Bad Request
- `401` — Unauthorized
- `408` — Request Timeout
- `500` — Internal server error

## Changes

- **2026-04-03** `05a30711e18b` — 1 warning, 111 info
  - deleted the `query` request parameter `prioritize`
  - added the optional property `styleguide/components/button/link/fontFallbacks` to the response with the `200` status
  - added the optional property `styleguide/components/button/link/fontFamily` to the response with the `200` status
  - added the optional property `styleguide/components/button/link/textDecorationColor` to the response with the `200` status
  - …108 more
- **2026-02-24** `3614380ba431` — 2 info
  - added the new optional `query` request parameter `directUrl`
  - the `query` request parameter `domain` became optional
- **2026-02-12** `ec0e897d65be` — 1 breaking
  - for the `query` request parameter `timeoutMS`, the min was increased from `1.00` to `1000.00`

[Change history](https://skmtc.dev/context/apis/brand-api/changes/brand/styleguide/get.md)

---

[API](https://skmtc.dev/context/apis/brand-api.md) · [All operations](https://skmtc.dev/context/apis/brand-api/llms.txt) · [OpenAPI document](https://skmtc-service-production.skmtc.workers.dev/v1/apis/context/brand-api/revisions/05a30711e18b/schema)