> ## 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.1.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. Webhook payloads are documented by the MonitorsChangeDetectedWebhookPayload and MonitorsRunCompletedWebhookPayload schemas. 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' - $ref: '#/components/parameters/RequestTags' 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' headers: X-RateLimit-Limit: $ref: '#/components/headers/RateLimitLimit' X-RateLimit-Remaining: $ref: '#/components/headers/RateLimitRemaining' X-RateLimit-Reset: $ref: '#/components/headers/RateLimitReset' '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' headers: X-RateLimit-Limit: $ref: '#/components/headers/RateLimitLimit' X-RateLimit-Remaining: $ref: '#/components/headers/RateLimitRemaining' X-RateLimit-Reset: $ref: '#/components/headers/RateLimitReset' '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' headers: X-RateLimit-Limit: $ref: '#/components/headers/RateLimitLimit' X-RateLimit-Remaining: $ref: '#/components/headers/RateLimitRemaining' X-RateLimit-Reset: $ref: '#/components/headers/RateLimitReset' '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' headers: X-RateLimit-Limit: $ref: '#/components/headers/RateLimitLimit' X-RateLimit-Remaining: $ref: '#/components/headers/RateLimitRemaining' X-RateLimit-Reset: $ref: '#/components/headers/RateLimitReset' '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' headers: X-RateLimit-Limit: $ref: '#/components/headers/RateLimitLimit' X-RateLimit-Remaining: $ref: '#/components/headers/RateLimitRemaining' X-RateLimit-Reset: $ref: '#/components/headers/RateLimitReset' 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, tags: ['production', 'team-alpha'], 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). RequestTags: name: tags in: query required: false style: form explode: false schema: $ref: '#/components/schemas/RequestTags' description: >- Optional comma-separated caller-defined tags for tracking this request. Tags are recorded on the request's usage log and can be used to filter usage on the dashboard usage page. Up to 20 tags, each 1-50 characters. example: production,team-alpha 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). RequestTags: type: array items: type: string minLength: 1 maxLength: 50 maxItems: 20 description: >- Optional caller-defined tags for tracking this request. Tags are recorded on the request's usage log and can be used to filter usage on the dashboard usage page. Up to 20 tags, each 1-50 characters. example: - production - team-alpha headers: RateLimitLimit: description: >- Maximum requests allowed in the current fixed one-minute window. Returned when the authenticated API key has a per-minute rate limit. schema: type: integer minimum: 1 RateLimitRemaining: description: >- Requests remaining in the current fixed one-minute window. Returned when the authenticated API key has a per-minute rate limit. schema: type: integer minimum: 0 RateLimitReset: description: >- Unix timestamp in seconds when the current rate-limit window resets. Returned when the authenticated API key has a per-minute rate limit. schema: type: integer responses: RateLimited: description: Rate limit exceeded headers: X-RateLimit-Limit: $ref: '#/components/headers/RateLimitLimit' X-RateLimit-Remaining: $ref: '#/components/headers/RateLimitRemaining' X-RateLimit-Reset: $ref: '#/components/headers/RateLimitReset' 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 ````