Website Brand Guidelines, CSS Token & WCAG Audit Extractor
StyleExtract reads production CSS, not screenshots. It recovers the palette, typography, logo, corner geometry and surface tones, checks WCAG 2.1 contrast and technical SEO, then exports developer tokens or a client report in up to seven chapters.
SuiteAnvil (sample)
SampleRounded · Neutral whiteOne URL. Your entire corporate brand, document and lead suite.
Primary tonal scale
50 → 950 · anchored at 500Supporting colors found in CSS
One URL. Your entire corporate brand, document and lead suite.
Primary adjusted to #F5F5F7 for AA contrast on #0A0A0C.
Live UI sandbox
This palette, type and corner geometry on a navbar, hero, pricing table, form field and toast. Compare the original palette with the WCAG-fixed one, in light and dark.
Plan, track and release work with your team in one place. Start free and upgrade when you grow.
Your team can sign in now. Invite links expire in 7 days.
Every plan includes the core workspace.
For individuals
- 3 projects
- Basic reporting
- Community support
For growing teams
- Unlimited projects
- Advanced reporting
- Priority support
For larger organizations
- SSO and audit log
- Custom roles
- Dedicated manager
Sample content. Colors, type and corners come from the SuiteAnvil profile.
How the website brand guidelines extractor works
- 01
Paste a URL
We fetch the HTML and up to ten stylesheets, resolve custom properties across files and read meta, Open Graph, JSON-LD and icon tags. No headless browser is involved, so a scan takes seconds.
- 02
Review the system
Colors are ranked by where they are used and assigned roles. Corner radii and surfaces become a vibe profile, and every color pairing is checked against WCAG 2.1 AA and AAA.
- 03
Export or report
Copy Tailwind v4 @theme, CSS variables, W3C Figma tokens, DESIGN.md or .cursorrules. Or assemble a PDF from the chapters your client needs, under your own agency name on Pro.
Built for client-ready output
Role-aware palette
Primary, secondary, accent, surface, text, muted and border, plus a 50 to 950 tonal scale anchored on the primary color.
UI vibe tokens
Radius style (sharp, technical, rounded or pill), control and card corners, and the canvas, card and hairline tones of the surface.
WCAG contrast matrix
Ratios for body text, links, buttons and dark mode, with AA and AAA verdicts and a passing replacement for each failure.
Technical SEO audit
Fourteen weighted checks covering title, description, H1, canonical, Open Graph, structured data, sitemap and alt coverage.
Modular PDF report
Seven chapters you can switch on or off, from cover and identity summary to a developer appendix. The page count is exact before you download.
Brand fonts, honestly labeled
Specimens load the real family when it is on Google Fonts and a named free stand-in when it is proprietary.
Frequently asked questions
What does the website brand guidelines extractor export?+
From one URL it returns the role colors with hex codes, the font stack with free stand-ins, the logo, corner-radius and surface tokens, a WCAG 2.1 contrast audit and 14 technical SEO checks. Export them as Tailwind v4 @theme, CSS variables, Figma tokens JSON, DESIGN.md, .cursorrules or a modular PDF audit.
How does StyleExtract find a website's brand colors?+
It parses the HTML, inline styles and linked stylesheets, resolves CSS variables across files, and weights each color by usage: button backgrounds, links and brand-named variables count far more than one-off borders. The highest-confidence colors become the role tokens.
What is the UI vibe?+
It is the geometry and surface character of a site: whether controls are sharp, technical, rounded or pill-shaped, how round its cards are, and whether the canvas reads as warm paper, cool slate, neutral white or dark carbon. Doc Engine, the business cards and the Sitemap Bot use these tokens in their Adaptive templates.
Can I extract fonts from a website?+
Yes. StyleExtract reads font-family declarations, @font-face rules and Google Fonts links, separates heading, body and monospace families, and cleans framework-generated names. Proprietary faces are previewed with a free stand-in, which is always named.
Which chapters can the PDF report include?+
Cover and brand identity summary, color system with the WCAG 2.1 contrast matrix, typography, UI vibe and spacing, technical SEO with meta tags and structured data, dark-mode recommendations, and a developer appendix with Tailwind v4, CSS variables, .cursorrules and DESIGN.md. Each chapter has a fixed length, so the page count shown before download is exact.
Where do the reference brand numbers come from?+
Each curated brand shows the date of its last live scan. SEO results are taken from that scan, never estimated. A few sites refuse automated requests; for those only reference tokens are shown. Rescan live fetches current values at any time.
Can I white-label the PDF for my clients?+
On SuiteAnvil Pro you add your agency name and logo, and the report carries no SuiteAnvil branding. Free reports include a small SuiteAnvil footer.
Does the scan change anything on the website?+
No. It makes a few read-only requests (the page, its stylesheets, robots.txt and the sitemap), the same files a browser downloads.
Works with the rest of your suite
The brand you load here is already applied in every other tool.
Brand-synced whitepapers, case studies, compliance briefs and print-ready business cards with vCard QR codes.
Turn one logo into a 28-file press kit, convert images and documents, merge and stamp PDFs. Everything runs in your browser.
A FAQ bot trained strictly on your sitemap, styled with your brand, that captures qualified leads and emails you a digest.