Turn any website into brand guidelines and Tailwind v4 tokens.
StyleExtract reads a live website the way a browser does and writes its brand system out as files your team can paste: colors by role, type, corner radius, surface tones and contrast results.
Paste a domain. The scan opens in StyleExtract with every export ready.
Brand guidelines are missing, out of date or buried in a PDF nobody can find. Developers copy hex codes out of DevTools one at a time, and the product slowly drifts away from the website.
StyleExtract fetches the production HTML and stylesheets, resolves CSS custom properties across files (including the oklch values Tailwind v4 emits), ranks every color by where it is used and assigns primary, secondary, accent, surface, text, muted and border roles. The real logo, the font stack and the corner geometry come with it.
What you walk away with
- brand.theme.cssTailwind CSS v4 @theme block with role colors, a 50 to 950 scale, fonts and radii
- tokens.cssCSS custom properties for any stack
- figma-tokens.jsonW3C design tokens for Figma variables
- DESIGN.md / .cursorrulesBrand context for AI coding assistants
- brand-audit.pdfOptional client-ready report with WCAG and SEO chapters
Three steps
- 01
Paste the address
A bare domain is enough. Redirects to https and www are followed automatically.
- 02
Review the system
Check role colors, type, geometry and contrast. Adjust any swatch in one click if the site hides styles behind a bot wall.
- 03
Export tokens
Copy or download Tailwind v4, CSS variables, Figma tokens, DESIGN.md or the PDF report.
Details that matter
Roles, not a color soup
Button and link usage outweighs one-off borders, so primary means the color people actually click.
The real logo
Navbar SVG first, then logo images, structured data, touch icon and favicon. No initials.
Fonts with free stand-ins
Detected families are mapped to Google Fonts where possible, with a named open-source stand-in for proprietary faces.
Geometry and surface
Corner radius style (sharp, technical, rounded, pill) and the canvas tint, ready for templates.
WCAG 2.1 matrix
Ten key pairings checked for AA and AAA, with a passing color suggested for every failure.
Modern CSS
Custom properties across files, oklch and lab colors, dark-mode rules kept separate from light roles.
Questions
Is it allowed to extract a website's brand colors and fonts?+
Colors, font names and logos are publicly visible design references. You are responsible for holding valid rights or client authorization for proprietary fonts, trademarks and brand assets before commercial publication.
Does it work with Tailwind v4 and oklch colors?+
Yes. oklch, oklab, lab, lch and hsl values are converted to hex, and CSS variables are resolved across every stylesheet the page links.
What happens if a website blocks automated scans?+
SuiteAnvil loads the public metadata that remains reachable (web manifest, icons, sitemap, DNS) and opens a palette and logo customizer so you can finish the profile by hand.
Which export formats are included?+
Tailwind v4 @theme, CSS variables, W3C Figma tokens JSON, DESIGN.md, .cursorrules and a modular PDF audit report.
How accurate is the extraction?+
Very good for server-rendered CSS. Sites that inject styles at runtime can hide some colors; reference profiles of well-known brands fill that gap.
SuiteAnvil extracts publicly visible design tokens, logos, and font references for workflow automation. You are responsible for ensuring you hold valid commercial rights or client authorization for any proprietary fonts, trademarks, and brand assets before commercial publication. Licensing notice