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
}
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
ā€‹
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