Styleguide

Extract a website’s colors, typography, spacing and components

AI agent instructions

Read the Notte skill and follow its setup instructions when setting up Notte or building browser automation. This is the shared source for CLI setup, authentication, and the browser-to-code workflow.

GET /data/web/styleguide visits a site and returns its design tokens: colors, fonts, spacing, shadows and common components.

Try it in the Console

Try this API in the playground, no code needed.

​

Quick start

curl "https://api.notte.cc/data/web/styleguide?domain=stripe.com" \
  -H "Authorization: Bearer $NOTTE_API_KEY"

The response is abbreviated below.

{
  "status": "ok",
  "domain": "stripe.com",
  "styleguide": {
    "mode": "light",
    "colors": { "accent": "#533afd", "background": "#ffffff", "text": "#ffffff" },
    "typography": {
      "headings": {
        "h1": { "fontFamily": "sohne-var", "fontSize": "48px", "fontWeight": 300, "lineHeight": "55.2px" }
      }
    },
    "elementSpacing": {},
    "shadows": {},
    "fontLinks": {},
    "components": {}
  },
  "code": 200,
  "finalDOMState": "loaded",
  "cache_metadata": { "status": "miss", "age_ms": 0 },
  "request_id": "..."
}

finalDOMState is loaded or still-loading. If it is still-loading, the page hadn’t settled when the styleguide was captured.

​

Parameters

All parameters are query parameters.

domain · string

The site to analyze, for example stripe.com.

directUrl · string

A full URL, when you need a specific page instead of a domain.

colorScheme · string · default: "light"

Which color scheme to capture.

maxAgeMs · integer

Maximum age of a cached result. 0 forces a fresh capture.

timeoutOpts[milliseconds], timeoutOpts[behavior], zdr and tags are also query parameters. They work as described in common parameters.