Site Style Guide Extractor

A style guide (or design guide) documents a brand's visual language — its colors, typography, spacing, component patterns, and iconography. It ensures consistent visual identity across all pages, products, and teams. By extracting an existing website's style guide, you can quickly understand its design system, replicate a look, or audit inconsistencies before a redesign.

Unlike static HTML parsers, our extractor uses headless Chromium to load and fully render the page in a real Chromium browser. It then reads computed styles — the final CSS values after all stylesheets, JavaScript, CSS-in-JS, and animations have been applied. This means you get the actual colors and fonts users see, not just what's in the raw CSS files.

Copy the CSS variables output and paste it into your project's global CSS file (e.g.,globals.css) inside a:root block. Reference the variables anywhere in your styles with var(--color-primary). For Tailwind CSS v4, you can map these variables directly in your theme config to create a matching token system.

Yes — that's one of the primary use cases. Extract the site's colors and typography, then use the Color Converter to get OKLCH or HSL values suitable for CSS custom properties. Use the Contrast Checker to verify accessibility of extracted color pairs. The extracted font families and sizes form the basis of your typography scale, and extracted buttons reveal the border-radius, padding, and weight patterns used.

Yes — analyzing publicly accessible websites for design research and competitive analysis is standard practice in the industry. You can extract color palettes, font choices, and component patterns from any public site. Use these insights for inspiration and to understand design trends in your market. Always create original work rather than directly copying; use extractions as research, not templates.

Some sites block automated browsers with anti-bot measures (Cloudflare, reCAPTCHA, IP blocking). Others require authentication to show their real UI. Single-page applications with heavy JavaScript may not fully render within the extraction timeout. Sites using CSS-in-JS libraries that inject styles after a delay may also miss some styles. If extraction fails, try adding the full https:// URL and wait a moment before retrying.

We extract the font families used for headings and body text, including the font weights (100–900) applied. For Google Fonts, we detect the font name so you can look up the CDN link. For system fonts, we identify the full font stack. The typography section also captures common text sizes found on the page, giving you a starting point for a typographic scale in your design system.