Styleguide

Extract a complete visual design system from any website — colors, typography, spacing, border radii, and component patterns.

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

Parameters

Parameter	Type	Required	Description
`domain`	string	Conditional	Target domain (one of `domain` or `directUrl` required)
`directUrl`	string	Conditional	Direct URL to analyze
`timeoutMS`	number	No	Max wait time in milliseconds

Response Schema

{
  "success": true,
  "styleguide": {
    "colors": [
      { "hex": "#635BFF", "rgb": { "r": 99, "g": 91, "b": 255 }, "type": "primary", "name": "Stripe Purple" },
      { "hex": "#0A2540", "rgb": { "r": 10, "g": 37, "b": 64 }, "type": "background", "name": "Dark Navy" },
      { "hex": "#00D4AA", "rgb": { "r": 0, "g": 212, "b": 170 }, "type": "accent", "name": "Teal" }
    ],
    "fonts": [
      { "family": "Inter", "weight": "400", "style": "normal", "usage": "body", "source": "Google Fonts" },
      { "family": "Inter", "weight": "700", "style": "normal", "usage": "heading", "source": "Google Fonts" },
      { "family": "JetBrains Mono", "weight": "400", "style": "normal", "usage": "code", "source": "Google Fonts" }
    ],
    "logos": [
      {
        "url": "https://cdn.orsa.dev/logos/stripe-light.svg",
        "type": "wordmark",
        "format": "svg",
        "background": "light"
      }
    ],
    "spacing": {
      "xs": "4px",
      "sm": "8px",
      "md": "16px",
      "lg": "32px",
      "xl": "64px"
    },
    "border_radius": ["4px", "8px", "12px", "9999px"]
  },
  "domain": "stripe.com",
  "url": "https://stripe.com",
  "cached": false,
  "credits_used": 10,
  "request_id": "e5f6a7b8-c9d0-1234-ef01-345678901234"
}

Code Examples

cURL

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

TypeScript

const guide = await client.brand.styleguide({
  domain: 'stripe.com',
});
 
console.log(guide.colors);         // [{ hex: "#635BFF", ... }]
console.log(guide.fonts);          // [{ family: "Inter", ... }]
console.log(guide.border_radius);  // ["4px", "8px", "12px", "9999px"]

Python

guide = client.brand.styleguide(domain="stripe.com")
 
print(guide.colors)         # [{"hex": "#635BFF", ...}]
print(guide.fonts)          # [{"family": "Inter", ...}]
print(guide.border_radius)  # ["4px", "8px", "12px", "9999px"]

Error Codes

Code	Status	Description
`INPUT_VALIDATION_ERROR`	400	Neither domain nor directUrl provided
`UNAUTHORIZED`	401	Missing or invalid API key
`RATE_LIMITED`	429	Rate limit exceeded
`USAGE_EXCEEDED`	402	Insufficient credits
`INTERNAL_ERROR`	500	Styleguide extraction failed

Notes

Extracts design tokens by rendering the page in a real browser and analyzing computed styles.
Use directUrl to analyze a specific page instead of the homepage.
For fonts only, use the Fonts endpoint at half the credit cost.
Results are cached. Cached responses return instantly.
Extraction may take 10-30 seconds for the first request on a domain.

Screenshot Fonts