{"uid":"cap_qYJ2ALxZoy67xmB6hERW7","slug":"orthogonal-web-styleguide-extractor-3def933b","name":"Orthogonal Web Styleguide Extractor","description":"Extract a comprehensive design system from a website including colors, typography, spacing, shadows, and UI components.","url":"https://x402.orthogonal.com/context-dev/web/styleguide","method":"GET","headers":{},"bodySchema":{"type":"object","$schema":"https://json-schema.org/draft/2020-12/schema","required":["input"],"properties":{"input":{"type":"object","required":["type","method"],"properties":{"type":{"type":"string","const":"http"},"method":{"enum":["GET"],"type":"string"},"queryParams":{"type":"object","properties":{"domain":{"type":"string","description":"Domain name to extract styleguide from (e.g., 'example.com', 'google.com'). The domain will be automatically normalized and validated."},"directUrl":{"type":"string","description":"A specific URL to fetch the styleguide from directly, bypassing domain resolution (e.g., 'https://example.com/design-system')."},"timeoutMS":{"type":"integer","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)."}}}},"additionalProperties":false}}},"responseSchema":null,"example":null,"exampleRequest":null,"tags":["x402"],"displayCostAmount":"0.03","displayCostAsset":"USDC","priceDynamic":false,"priceHint":null,"priceStatus":"priced","priceSource":"probe","requiresHandshake":false,"reviewCount":0,"rating":{"score":"0.00","successRate":"0.00","reviews":0,"stars":null,"state":"unrated"},"availabilityStatus":"unknown","priceObserved":null,"sessionDeposit":null,"pricing":{"kind":"static","summary":"$0.03/call","primary":{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.03","per":"call","confidence":"exact"},"accepted":[{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.03","per":"call","confidence":"exact"}]},"paymentMethods":[{"uid":"pm_PX-u2sZX26r1t5V-nLqWF","protocol":"x402","methodType":"crypto","chain":"base","mode":"charge","costAmount":"0.03","costPer":"request","priority":0,"asset":"0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913","unit":"request","depositMicros":null,"planRef":null}],"brandName":null,"brandSlug":null,"brandBaseUrl":null,"brandDocsUrl":null,"whatItDoes":"Extracts a comprehensive design system from any website, including colors, typography, spacing, shadows, and UI components.","exampleAgentPrompt":"Can you extract the full design system from stripe.com — I need the colors, fonts, spacing, and any UI component styles so I can replicate their visual style.","exampleUseCases":[{"title":"Cloning competitor brand styles","prompt":"Pull the complete design system from notion.so — I want their exact color palette, typography choices, and spacing values so I can build something with a similar aesthetic."},{"title":"Auditing a client site's design tokens","prompt":"Extract all the design tokens from acmecorp.com — colors, shadows, fonts, and spacing — so I can document their current design system before the redesign."},{"title":"Building a matching theme for a new product","prompt":"I need to match the visual style of linear.app exactly — can you grab their design system including colors, typography, and component styles from https://linear.app?"}],"resultDescription":"Returns a structured breakdown of the website's design system, including color swatches and hex values, typography settings (font families, sizes, weights), spacing scales, box shadows, and identified UI component styles — all extracted directly from the live site's CSS and markup.","failureModes":["Domain not found or inaccessible — returns a 404 or network error","Request times out if the site is slow or the timeout parameter is exceeded (408)","Site uses heavy JavaScript rendering, making CSS extraction incomplete","Domain is paywalled or behind authentication, blocking access","Returned design tokens may be incomplete for sites using CSS-in-JS or obfuscated class names"],"whenToPreferThis":"Choose this endpoint when you need to reverse-engineer or document a website's visual design system programmatically — especially for cloning styles, auditing brand consistency, or bootstrapping a new theme to match an existing site. Prefer this over generic web scrapers when you specifically need structured design data (colors, fonts, spacing) rather than raw HTML content.","instructions":null,"reviewSummary":null,"reviewSummaryHighlights":null,"reviewSummaryConcerns":null,"reviewSummaryGeneratedAt":null,"activationCount":0,"lastUsedAt":null,"lastSuccessfullyRanAt":null,"lastHealthCheckAt":"2026-09-14T06:44:04.778Z","isFirstParty":false}