Design System Extractor
Turn any website into design tokens
What Is the Design System Extractor?
The Design System Extractor turns a live website into design tokens. It measures colours by role, the type scale, the spacing values that recur, corner radii, shadows and button styles, lists the custom properties the site declares on :root, and writes it all out as CSS variables, a Tailwind CSS v4 theme and a W3C design tokens file.
Key Features
Tokens From What Renders
Reading a site's CSS gives you every value anyone ever wrote, dead code included. This tool measures the rendered page instead: which spacing values elements use and how often, which radii and shadows appear, and what size and weight each heading level is set at. Only spacing values that make up at least 2% of all spacing join the scale, so one-off nudges stay out.
When the Site Already Has Tokens
Plenty of sites define their own tokens as CSS custom properties. The ones declared on :root are listed with their computed values, up to 300 of them, so you can search for a colour or a spacing name and see the site's own naming next to the measured scale.
Three Export Formats
CSS variables drop into any stylesheet. The Tailwind block uses the v4 @theme syntax, with type and spacing in rem. The JSON follows the W3C design tokens draft format, grouped into colour, font family, font size, font weight, spacing, radius and shadow.
Common Use Cases
- Starting a redesign from the tokens a site already uses
- Documenting a design system that was never written down
- Matching a client's site when building a landing page or email
- Spotting inconsistent spacing or too many radii in your own UI
Frequently Asked Questions
Is the Design System Extractor free?
Yes. It's free with a ProxyHorizon account, and every account gets 25 runs a day shared across all our data tools. You can read about the tool without signing in, but running it needs an account because each run fetches live data.
How is this different from the colour extractor?
The colour extractor goes deep on colour: every shade, its coverage and contrast. This tool gives you the whole system at once, with colours as named tokens next to type, spacing, radii, shadows and buttons, in formats you can paste into code. Both read the same scan of the page, so running the second one is instant.
Will the tokens match the site's own variable names?
No. Tokens are named by role and step, like --color-primary or --space-4, so they look the same from site to site. The site's own names are in the custom properties table, with their values.
Does it cover hover states, dark mode or other pages?
It measures one page as it loads, in its default theme. Hover and focus styles, a dark mode toggle and components that only appear on other pages aren't included, so scan the pages that show the parts you need.
Do you keep the scan?
For 24 hours. One render of the page feeds the colour, font, logo, design system and brand tools, so running another of them on the same page that day is instant. It only holds what the public page shows, so anyone checking the same page that day gets the same scan. Choose "Scan again now" whenever you want a fresh one. We also log which tool you ran and when, to apply the daily limit.
Watching how your brand appears across the web?
Proxies for brand protection