How does the token extractor work?
A tool that only parses stylesheet files misses anything set by JavaScript, anything in a CSS-in-JS runtime, and every stylesheet the browser blocks it from reading. This tool loads the page in a real browser, lets it settle, and reads the computed styles of the elements actually on screen. It then reports four things:
- The colors the page renders, ranked by how many elements use each.
- The custom properties declared on
:root, colors first. These are the site’s own token names. - The type scale: the size, weight, line-height and family that real text uses.
- Border radii, spacing values, shadows and breakpoints.
How do I use the result?
- Pick what you need. If you only want the brand colors, copy the top few swatches. If you want to match a design system, use the variables.
- Press Copy CSS on the variables block and paste it into your own
:root. - Rename what is meaningless. A name like
--sx-1stx5uywas made by a build tool. Give it a name you will understand, such as--accent. - Check the type scale against your own text. The sizes and line-heights are what is on screen, so they make a good starting scale to adjust.
- Mind the fonts. A token tells you a family name, not whether you may use it. Check the licence, or use the font finder to see where it comes from.
What do real design systems look like?
Measured with the same capture on 21 October 2026. Each answers instantly if you pick it above. The capture found more than 300 custom properties on each of the first four, and the tool lists the first 30 with colors first.
| Site | Token names look like | Fonts | Strongest accent in its top colors |
|---|---|---|---|
| stripe.com | --hds-color-accent-border-solid | sohne-var | #533AFD |
| linear.app | --color-text-secondary, plus generated --sx-* | Inter Variable, Berkeley Mono | #00B8CC |
| vercel.com | --geist-error, --ds-amber-700 | GeistSans, Geist Mono | None: greys |
| github.com | --button-primary-iconColor-disabled | Mona Sans, Mona Sans Mono | None: greys |
| enrichr.dev | --accent, --ink, --brand | Instrument Sans, Parkinsans | #E6FF55 |
stripe.com: a token system with a naming scheme
Stripe’s variables read like a sentence: --hds-color-accent-border-solid is
#533afd, the purple it is known for. The prefix, the category, the role and the
variant are all in the name. That is what a token system built to be consumed by other teams looks
like, and it is the easiest kind to copy from. Its type scale is one family, sohne-var, and the two most-used styles are 16 px
and 26 px, both in weight 300, so even the body text is set light.
linear.app: readable names next to generated ones
Linear mixes human names such as --color-text-secondary with generated ones such as
--sx-1stx5uy from its styling library. Both are real tokens, but only the first kind
tells you anything. Its type scale is Inter Variable for text and Berkeley Mono at 14 px for code,
the most-used style on the page.
vercel.com and github.com: where the colors are barely colors
Both are close to monochrome on screen, so the ranked palette is mostly black, white and greys,
with their design systems (Geist, and a Primer-style set with names like
--button-primary-iconColor-disabled) carrying the real color vocabulary in the
variables. This is the case where the variables tell you far more than the swatches do.
What can this tool not tell me?
- It cannot tell you the intent behind a value. It shows that 16px is the most-used size, not that the designer thinks of it as “body”.
- It reads the theme the page loaded with, so the values for the other theme, light or dark, are not listed.
- Hover and focus styles only exist while the pointer is there, so they are missing here. The full capture records them.
To do the same by hand in your browser, see how to see a website’s CSS variables. For just the colors, read how to find the colors of a website, and the free Color Palette extension (on the Chrome Web Store soon) does it on the page you are viewing.
Other free tools
FAQ
How do I extract CSS variables from a website?
Paste the site’s address above. Enrichr loads it in a real browser and lists the custom properties declared on :root, with the colors first, plus the rendered colors and type scale. By hand, open DevTools, select the html element and read the Styles panel, or run a one-line script in the console.
What are design tokens?
Named values a design is built from: colors, font sizes, spacing, radii, shadows. On the web they usually live as CSS custom properties such as --color-text-secondary, though some sites use fixed values and have none.
Why does the tool show 30 variables when the site has hundreds?
Big design systems declare hundreds of custom properties. The free tool shows the first 30, colors first, so the result stays readable. The full capture returns all of them.
What if the site has no CSS variables?
Then it styles with fixed values, or generates class names with the values baked in. The tool still shows the colors and type scale it measured, which are the tokens you can name yourself.
Why are some variable names random, like --sx-1stx5uy?
Build tools and CSS-in-JS libraries generate them. They are real tokens, but the names say nothing. Look for the readable ones, such as --color-text-secondary, to find the design system’s intent.
Is the type scale exact?
It is measured from the rendered page: the font size, weight, line-height and family that real text uses, ranked by how many elements use each. It is what is on screen, which can differ from the scale a design system documents.
Can I use a site’s tokens in my own project?
Colors, sizes and spacing are facts about a design, but a site’s fonts, imagery and code are its own. Reusing the exact look of another brand can still be a problem. Our guide on whether it is legal to copy a website design goes through it.
Does it get tokens set by JavaScript?
Yes. It reads computed styles from the rendered page, after scripts have run, so values set at runtime are included. A tool that only parses the stylesheet files misses them.
Can it check a page behind a login?
No. It loads the page as a logged-out visitor.
Is this free?
Yes. Sites in the examples answer instantly, your first fresh lookup of any other site is free with no account, and after that a free account gets 30 credits a month.