> ## Documentation Index > Fetch the complete documentation index at: https://docs.context.dev/llms.txt > Use this file to discover all available pages before exploring further. # Scrape Styleguide > Extract a comprehensive design system from a website including colors, typography, spacing, shadows, and UI components. 10 Credits ## OpenAPI ````yaml https://app.stainless.com/api/spec/documented/context.dev/openapi.documented.yml get /web/styleguide openapi: 3.0.0 info: title: Context API description: API for retrieving context data from any website version: 1.0.0 servers: - url: https://api.context.dev/v1 security: [] paths: /web/styleguide: get: tags: - Web Extraction summary: Scrape Styleguide description: >- Extract a comprehensive design system from a website including colors, typography, spacing, shadows, and UI components. parameters: - name: domain in: query required: false schema: type: string description: >- 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. - name: directUrl in: query required: false schema: type: string format: uri description: >- 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. - $ref: '#/components/parameters/TimeoutMS' responses: '200': description: Successful response content: application/json: schema: type: object properties: status: type: string description: Status of the response, e.g., 'ok' domain: type: string description: The normalized domain that was processed styleguide: type: object description: Comprehensive styleguide data extracted from the website required: - mode - colors - typography - elementSpacing - shadows - components - fontLinks properties: mode: type: string enum: - light - dark description: The primary color mode of the website design colors: type: object description: Primary colors used on the website required: - accent - background - text properties: accent: type: string description: Accent color (hex format) background: type: string description: Background color (hex format) text: type: string description: Text color (hex format) typography: type: object description: Typography styles used on the website required: - headings properties: headings: type: object description: Heading styles properties: h1: type: object required: - fontFamily - fontFallbacks - fontSize - fontWeight - lineHeight - letterSpacing properties: fontFamily: type: string description: >- Primary face (first family in the computed stack) fontFallbacks: type: array items: type: string description: >- Full ordered font list from resolved computed font-family fontSize: type: string fontWeight: type: number lineHeight: type: string letterSpacing: type: string h2: type: object required: - fontFamily - fontFallbacks - fontSize - fontWeight - lineHeight - letterSpacing properties: fontFamily: type: string description: >- Primary face (first family in the computed stack) fontFallbacks: type: array items: type: string description: >- Full ordered font list from resolved computed font-family fontSize: type: string fontWeight: type: number lineHeight: type: string letterSpacing: type: string h3: type: object required: - fontFamily - fontFallbacks - fontSize - fontWeight - lineHeight - letterSpacing properties: fontFamily: type: string description: >- Primary face (first family in the computed stack) fontFallbacks: type: array items: type: string description: >- Full ordered font list from resolved computed font-family fontSize: type: string fontWeight: type: number lineHeight: type: string letterSpacing: type: string h4: type: object required: - fontFamily - fontFallbacks - fontSize - fontWeight - lineHeight - letterSpacing properties: fontFamily: type: string description: >- Primary face (first family in the computed stack) fontFallbacks: type: array items: type: string description: >- Full ordered font list from resolved computed font-family fontSize: type: string fontWeight: type: number lineHeight: type: string letterSpacing: type: string p: type: object required: - fontFamily - fontFallbacks - fontSize - fontWeight - lineHeight - letterSpacing properties: fontFamily: type: string description: >- Primary face (first family in the computed stack) fontFallbacks: type: array items: type: string description: >- Full ordered font list from resolved computed font-family fontSize: type: string fontWeight: type: number lineHeight: type: string letterSpacing: type: string elementSpacing: type: object description: Spacing system used on the website required: - xs - sm - md - lg - xl properties: xs: type: string sm: type: string md: type: string lg: type: string xl: type: string shadows: type: object description: Shadow styles used on the website required: - sm - md - lg - xl - inner properties: sm: type: string md: type: string lg: type: string xl: type: string inner: type: string fontLinks: type: object description: >- Font assets keyed by family name as it appears in fontFamily/fontFallbacks (non-generic names only). Clients match typography.fontFamily / fontWeight or button styles to pick a file URL from files. additionalProperties: type: object required: - type - files properties: type: type: string enum: - google - custom files: type: object additionalProperties: type: string description: >- Upright font files keyed by weight string (e.g. "400" for regular, "500", "700"). Values are absolute URLs. category: type: string description: >- Google Fonts category when type is google (e.g. sans-serif, serif, monospace, display, handwriting). Omitted for custom fonts when unknown. displayName: type: string description: >- Present when type is custom: human-readable name derived from the fontLinks key (strip build/hash suffixes, split camelCase / PascalCase, normalize separators). Google entries omit this. components: type: object description: UI component styles required: - button properties: button: type: object description: Button component styles properties: primary: type: object required: - backgroundColor - color - borderColor - borderRadius - borderWidth - borderStyle - padding - minWidth - minHeight - fontSize - fontWeight - textDecoration - boxShadow - css properties: backgroundColor: type: string color: type: string borderColor: type: string description: >- Border color as CSS hex (#RRGGBB or #RRGGBBAA when computed border-color has alpha) borderRadius: type: string borderWidth: type: string borderStyle: type: string padding: type: string minWidth: type: string description: >- Sampled minimum width of the button box (typically px) minHeight: type: string description: >- Sampled minimum height of the button box (typically px) fontSize: type: string fontWeight: type: number fontFamily: type: string description: >- Primary button typeface (first in fontFallbacks) fontFallbacks: type: array items: type: string description: >- Full ordered font list from computed font-family textDecoration: type: string textDecorationColor: type: string description: >- Hex color of the underline when it differs from the text color boxShadow: type: string description: >- Computed box-shadow (comma-separated layers when present) css: type: string description: >- Ready-to-use CSS declaration block for this component style secondary: type: object required: - backgroundColor - color - borderColor - borderRadius - borderWidth - borderStyle - padding - minWidth - minHeight - fontSize - fontWeight - textDecoration - boxShadow - css properties: backgroundColor: type: string color: type: string borderColor: type: string description: >- Border color as CSS hex (#RRGGBB or #RRGGBBAA when computed border-color has alpha) borderRadius: type: string borderWidth: type: string borderStyle: type: string padding: type: string minWidth: type: string description: >- Sampled minimum width of the button box (typically px) minHeight: type: string description: >- Sampled minimum height of the button box (typically px) fontSize: type: string fontWeight: type: number fontFamily: type: string description: >- Primary button typeface (first in fontFallbacks) fontFallbacks: type: array items: type: string description: >- Full ordered font list from computed font-family textDecoration: type: string textDecorationColor: type: string description: >- Hex color of the underline when it differs from the text color boxShadow: type: string description: >- Computed box-shadow (comma-separated layers when present) css: type: string description: >- Ready-to-use CSS declaration block for this component style link: type: object required: - backgroundColor - color - borderColor - borderRadius - borderWidth - borderStyle - padding - minWidth - minHeight - fontSize - fontWeight - textDecoration - boxShadow - css properties: backgroundColor: type: string color: type: string borderColor: type: string description: >- Border color as CSS hex (#RRGGBB or #RRGGBBAA when computed border-color has alpha) borderRadius: type: string borderWidth: type: string borderStyle: type: string padding: type: string minWidth: type: string description: >- Sampled minimum width of the button box (typically px) minHeight: type: string description: >- Sampled minimum height of the button box (typically px) fontSize: type: string fontWeight: type: number fontFamily: type: string description: >- Primary button typeface (first in fontFallbacks) fontFallbacks: type: array items: type: string description: >- Full ordered font list from computed font-family textDecoration: type: string textDecorationColor: type: string description: >- Hex color of the underline when it differs from the text color boxShadow: type: string description: >- Computed box-shadow (comma-separated layers when present) css: type: string description: >- Ready-to-use CSS declaration block for this component style card: type: object description: Card component style required: - backgroundColor - borderColor - borderRadius - borderWidth - borderStyle - padding - boxShadow - textColor - css properties: backgroundColor: type: string borderColor: type: string description: >- Border color as CSS hex (#RRGGBB or #RRGGBBAA when computed border-color has alpha) borderRadius: type: string borderWidth: type: string borderStyle: type: string padding: type: string boxShadow: type: string textColor: type: string css: type: string description: >- Ready-to-use CSS declaration block for this component style code: type: integer description: HTTP status code '400': description: Bad Request content: application/json: schema: type: object properties: message: type: string description: Error message error_code: type: string enum: - INTERNAL_ERROR - VALID - NOT_FOUND - FORBIDDEN - USAGE_EXCEEDED - RATE_LIMITED - UNAUTHORIZED - DISABLED - INSUFFICIENT_PERMISSIONS - TIMEOUT_EXCEEDS_MAXIMUM - WEBSITE_ACCESS_ERROR - INPUT_VALIDATION_ERROR description: Error code indicating the type of error '401': description: Unauthorized content: application/json: schema: type: object properties: error_code: type: string enum: - INTERNAL_ERROR - VALID - NOT_FOUND - FORBIDDEN - USAGE_EXCEEDED - RATE_LIMITED - UNAUTHORIZED - DISABLED - INSUFFICIENT_PERMISSIONS - TIMEOUT_EXCEEDS_MAXIMUM - WEBSITE_ACCESS_ERROR - INPUT_VALIDATION_ERROR description: Error code indicating the type of error '408': description: Request Timeout content: application/json: schema: type: object properties: message: type: string description: Timeout error message error_code: type: string enum: - REQUEST_TIMEOUT description: Error code indicating request timeout '500': description: Internal server error content: application/json: schema: type: object properties: message: type: string description: Error message error_code: type: string enum: - INTERNAL_ERROR description: Error code indicating internal server error security: - bearerAuth: [] x-codeSamples: - lang: JavaScript source: |- 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); - lang: Python source: |- import os from context.dev import ContextDev client = ContextDev( api_key=os.environ.get("CONTEXT_DEV_API_KEY"), # This is the default and can be omitted ) response = client.web.extract_styleguide() print(response.styleguide) - lang: Ruby source: |- require "context_dev" context_dev = ContextDev::Client.new(api_key: "My API Key") response = context_dev.web.extract_styleguide puts(response) components: parameters: TimeoutMS: name: timeoutMS in: query required: false schema: $ref: '#/components/schemas/TimeoutMS' description: >- 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). schemas: TimeoutMS: type: integer minimum: 1000 maximum: 300000 description: >- 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). securitySchemes: bearerAuth: type: http scheme: bearer ````