Styleguide

Extract a complete visual design system from any website. Returns W3C-DTCG-style design tokens (colors, typography, radii, shadows), a clustered component summary (buttons, inputs), and a paste-ready DESIGN.md markdown blob suitable for dropping into an LLM prompt. The raw computed-style dump stays available for power consumers.

Endpoint: GET /v1/brand/styleguide Credits: 15 per request

Parameters

ParameterTypeRequiredDescription
domainstringYesDomain to analyze (e.g., stripe.com)

Response Schema

{
  "data": {
    "domain": "stripe.com",
    "tokens": {
      "color": {
        "primary": { "$value": "#635BFF", "$type": "color" },
        "background": { "$value": "#0A2540", "$type": "color" }
      },
      "font": {
        "heading": { "$value": "Inter", "$type": "fontFamily" }
      },
      "radius": {
        "md": { "$value": "8px", "$type": "dimension" }
      }
    },
    "components": {
      "button": [{ "variant": "primary", "bg": "#635BFF", "fg": "#ffffff" }]
    },
    "markdown": "# stripe.com — Design Tokens\n\n## Colors\n- primary: #635BFF\n...",
    "raw": { "...": "verbose computed-style dump" }
  },
  "_meta": {
    "timing": { "fetch_ms": 8420, "total_ms": 8612 },
    "cache": { "hit": false }
  }
}

Code Examples

cURL

curl -X GET "https://api.orsa.dev/v1/brand/styleguide?domain=stripe.com" \
  -H "Authorization: Bearer YOUR_API_KEY"

TypeScript

const { data: guide } = await client.brand.styleguide({
  domain: 'stripe.com',
});
 
console.log(guide.tokens.color);
console.log(guide.components.button);
console.log(guide.markdown);     // paste-ready DESIGN.md

Python

res = client.brand.styleguide(domain="stripe.com")
guide = res["data"]
 
print(guide["tokens"]["color"])
print(guide["components"]["button"])
print(guide["markdown"])

Error Codes

CodeStatusDescription
INPUT_VALIDATION_ERROR400Missing or invalid domain
UNAUTHORIZED401Missing or invalid API key
SERVICE_UNAVAILABLE503Browser pool unavailable
RATE_LIMITED429Rate limit exceeded
USAGE_EXCEEDED402Insufficient credits

Notes

  • Extracts design tokens by rendering the page in a real browser and analyzing computed styles.
  • The markdown field is intended for LLM-prompt use — it’s a compact, human-readable summary of the design system.
  • The raw field exposes the full computed-style payload for consumers that want every detected button/color/font.
  • For fonts only, use the Fonts endpoint.
  • Extraction may take 10-30 seconds for the first request on a domain.