Skip to main content
GET
/
web
/
styleguide
JavaScript
import ContextDev from 'context.dev';

const client = new ContextDev({
  apiKey: process.env['CONTEXT_DEV_API_KEY'], // This is the default and can be omitted
});

const response = await client.web.extractStyleguide();

console.log(response.styleguide);
{
  "status": "<string>",
  "domain": "<string>",
  "styleguide": {
    "colors": {
      "accent": "<string>",
      "background": "<string>",
      "text": "<string>"
    },
    "typography": {
      "headings": {
        "h1": {
          "fontFamily": "<string>",
          "fontFallbacks": [
            "<string>"
          ],
          "fontSize": "<string>",
          "fontWeight": 123,
          "lineHeight": "<string>",
          "letterSpacing": "<string>"
        },
        "h2": {
          "fontFamily": "<string>",
          "fontFallbacks": [
            "<string>"
          ],
          "fontSize": "<string>",
          "fontWeight": 123,
          "lineHeight": "<string>",
          "letterSpacing": "<string>"
        },
        "h3": {
          "fontFamily": "<string>",
          "fontFallbacks": [
            "<string>"
          ],
          "fontSize": "<string>",
          "fontWeight": 123,
          "lineHeight": "<string>",
          "letterSpacing": "<string>"
        },
        "h4": {
          "fontFamily": "<string>",
          "fontFallbacks": [
            "<string>"
          ],
          "fontSize": "<string>",
          "fontWeight": 123,
          "lineHeight": "<string>",
          "letterSpacing": "<string>"
        }
      },
      "p": {
        "fontFamily": "<string>",
        "fontFallbacks": [
          "<string>"
        ],
        "fontSize": "<string>",
        "fontWeight": 123,
        "lineHeight": "<string>",
        "letterSpacing": "<string>"
      }
    },
    "elementSpacing": {
      "xs": "<string>",
      "sm": "<string>",
      "md": "<string>",
      "lg": "<string>",
      "xl": "<string>"
    },
    "shadows": {
      "sm": "<string>",
      "md": "<string>",
      "lg": "<string>",
      "xl": "<string>",
      "inner": "<string>"
    },
    "fontLinks": {},
    "components": {
      "button": {
        "primary": {
          "backgroundColor": "<string>",
          "color": "<string>",
          "borderColor": "<string>",
          "borderRadius": "<string>",
          "borderWidth": "<string>",
          "borderStyle": "<string>",
          "padding": "<string>",
          "minWidth": "<string>",
          "minHeight": "<string>",
          "fontSize": "<string>",
          "fontWeight": 123,
          "textDecoration": "<string>",
          "boxShadow": "<string>",
          "css": "<string>",
          "fontFamily": "<string>",
          "fontFallbacks": [
            "<string>"
          ],
          "textDecorationColor": "<string>"
        },
        "secondary": {
          "backgroundColor": "<string>",
          "color": "<string>",
          "borderColor": "<string>",
          "borderRadius": "<string>",
          "borderWidth": "<string>",
          "borderStyle": "<string>",
          "padding": "<string>",
          "minWidth": "<string>",
          "minHeight": "<string>",
          "fontSize": "<string>",
          "fontWeight": 123,
          "textDecoration": "<string>",
          "boxShadow": "<string>",
          "css": "<string>",
          "fontFamily": "<string>",
          "fontFallbacks": [
            "<string>"
          ],
          "textDecorationColor": "<string>"
        },
        "link": {
          "backgroundColor": "<string>",
          "color": "<string>",
          "borderColor": "<string>",
          "borderRadius": "<string>",
          "borderWidth": "<string>",
          "borderStyle": "<string>",
          "padding": "<string>",
          "minWidth": "<string>",
          "minHeight": "<string>",
          "fontSize": "<string>",
          "fontWeight": 123,
          "textDecoration": "<string>",
          "boxShadow": "<string>",
          "css": "<string>",
          "fontFamily": "<string>",
          "fontFallbacks": [
            "<string>"
          ],
          "textDecorationColor": "<string>"
        }
      },
      "card": {
        "backgroundColor": "<string>",
        "borderColor": "<string>",
        "borderRadius": "<string>",
        "borderWidth": "<string>",
        "borderStyle": "<string>",
        "padding": "<string>",
        "boxShadow": "<string>",
        "textColor": "<string>",
        "css": "<string>"
      }
    }
  },
  "code": 123,
  "key_metadata": {
    "credits_consumed": 123,
    "credits_remaining": 123
  }
}
10 Credits

Authorizations

​
Authorization
string
header
required

Bearer authentication header of the form Bearer <token>, where <token> is your auth token.

Query Parameters

​
domain
string

Domain name to extract styleguide from (e.g., 'example.com', 'google.com'). The domain will be automatically normalized and validated. You must provide either 'domain' or 'directUrl', but not both.

​
directUrl
string<uri>

A specific URL to fetch the styleguide from directly, bypassing domain resolution (e.g., 'https://example.com/design-system'). When provided, the styleguide is extracted from this exact URL. You must provide either 'domain' or 'directUrl', but not both.

​
maxAgeMs
integer
default:7776000000

Maximum age in milliseconds for cached data before the API performs a hard refresh. Defaults to 3 months (7776000000 ms). Values below 1 day (86400000 ms) are clamped to 1 day; values above 1 year (31536000000 ms) are clamped to 1 year.

Required range: 86400000 <= x <= 31536000000
​
colorScheme
enum<string>

Optional browser color scheme to emulate for websites that respond to prefers-color-scheme. This value is part of the styleguide cache key.

Available options:
light,
dark
​
timeoutMS
integer

Optional timeout in milliseconds for the request. If the request takes longer than this value, it will be aborted with a 408 status code. Maximum allowed value is 300000ms (5 minutes).

Required range: 1000 <= x <= 300000

Response

Successful response

​
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

​
code
integer

HTTP status code

​
key_metadata
object

Metadata about the API key used for the request. Included in every response whenever a valid API key is provided, even when the response status is not 200.