Style Guide Generator
Reading a stylesheet tells you what a site declares. This tool tells you what a site actually renders: it loads the page in a real Chromium instance, reads computed styles, and reports the design decisions that survived to production.
Open the Style Guide GeneratorWhy a real browser matters
Modern sites build styles at runtime — CSS variables, utility classes, framework themes, dark-mode switches. Parsing the CSS file misses all of that. Rendering the page and reading computed values is the only way to see the colour a button ends up with rather than the one it was declared with.
Colours ranked by how much they are used
Colours come back weighted by the screen area they cover and tagged by role — background, text, border. That distinction matters: the colour covering most of the page is the background, not the brand, and a report that lists them flat would mislead you.
More than colour
The extraction also returns typography, button styles, spacing and radius scales, the shadow library, logos, icons and favicons, plus an accessibility read on the combinations found. It is enough to rebuild a recognisable version of the design system.
Step by step
- Paste any publicly reachable URL — no login-protected pages.
- Wait for the render; a heavy page takes longer because the browser waits for the network to settle.
- Read the colour report first: roles and coverage tell you the hierarchy.
- Check the typography and button sections for the concrete values you need.
- Copy the tokens you want into your own project.
Frequently asked questions
Why does an extraction cost credits when other tools are free?
It launches a real headless browser on our server for each request, which is expensive compared with arithmetic that runs in your browser. Credits are only deducted after a successful extraction — a failure costs nothing.
Can it read pages behind a login?
No. The extractor visits the URL as an anonymous visitor, so it only ever sees what a logged-out person sees.
The colours do not match the brand guidelines I was given. Why?
Because it reports what the live site renders, not what the brand book says. Divergence between the two is common — and is usually the most useful thing the report tells you.