> ## 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. # Extract Styleguide > Extract colors, typography, spacing, shadows, and UI cues from any site to build on-brand experiences faster. 10 Credits ## OpenAPI ````yaml 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: [] tags: - name: Monitors description: >- Monitor pages, sitemaps, and extracted website data for exact or semantic changes. The change.detected webhook payload is documented by the MonitorsChangeDetectedWebhookPayload schema. 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/CacheMaxAgeMs' - name: colorScheme in: query required: false schema: type: string enum: - light - dark description: >- Optional browser color scheme to emulate for websites that respond to prefers-color-scheme. This value is part of the styleguide cache key. - $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 key_metadata: $ref: '#/components/schemas/KeyMetadata' '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 key_metadata: $ref: '#/components/schemas/KeyMetadata' '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 key_metadata: $ref: '#/components/schemas/KeyMetadata' '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 key_metadata: $ref: '#/components/schemas/KeyMetadata' '429': $ref: '#/components/responses/RateLimited' '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 key_metadata: $ref: '#/components/schemas/KeyMetadata' 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: Go source: "package main\n\nimport (\n\t\"context\"\n\t\"fmt\"\n\n\t\"github.com/context-dot-dev/context-go-sdk\"\n\t\"github.com/context-dot-dev/context-go-sdk/option\"\n)\n\nfunc main() {\n\tclient := contextdev.NewClient(\n\t\toption.WithAPIKey(\"My API Key\"),\n\t)\n\tresponse, err := client.Web.ExtractStyleguide(context.TODO(), contextdev.WebExtractStyleguideParams{})\n\tif err != nil {\n\t\tpanic(err.Error())\n\t}\n\tfmt.Printf(\"%+v\\n\", response.Styleguide)\n}\n" - lang: Ruby source: |- require "context_dev" context_dev = ContextDev::Client.new(api_key: "My API Key") response = context_dev.web.extract_styleguide puts(response) - lang: PHP source: >- web->extractStyleguide( colorScheme: 'light', directURL: 'https://example.com', domain: 'domain', maxAgeMs: 86400000, timeoutMs: 1000, ); var_dump($response); } catch (APIException $e) { echo $e->getMessage(); } - lang: CLI source: |- context-dev web extract-styleguide \ --api-key 'My API Key' components: parameters: CacheMaxAgeMs: name: maxAgeMs in: query required: false schema: type: integer minimum: 86400000 maximum: 31536000000 default: 7776000000 description: >- 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. 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: KeyMetadata: type: object description: >- 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. properties: credits_consumed: type: integer description: The number of credits consumed by this request. credits_remaining: type: integer description: >- The number of credits remaining for your organization after this request. required: - credits_consumed - credits_remaining 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). responses: RateLimited: description: Rate limit exceeded headers: Retry-After: description: Seconds until the per-minute rate limit window resets schema: type: integer minimum: 1 maximum: 60 content: application/json: schema: type: object properties: message: type: string description: Error message error_code: type: string enum: - RATE_LIMITED description: Error code indicating the rate limit was exceeded key_metadata: $ref: '#/components/schemas/KeyMetadata' required: - message - error_code securitySchemes: bearerAuth: type: http scheme: bearer ````