Publishing to npm and GitHub soon. The commands below work once it is out.
What does it do?
One command reads a page the way a designer would inspect it, and prints what it found:
npx enrichr-cli tokens stripe.comYou get the fonts the page really draws, the colors ranked by how much of the page each covers, the type scale, spacing, border radii, shadows, breakpoints, transition timings, and every CSS variable the site declares on its root element, resolved to its final value. It needs Node 22 or newer and a browser you already have. It downloads nothing and has no dependencies.
What does the output look like?
This is a trimmed run against linear.app, measured on 22 October 2026. Sites change, so yours will differ.
linear.app Linear – The system for product development
Read in a real browser (desktop, light scheme) in 7.9s
Fonts
Headings, body Inter Variable web font, 84.1% of text weights 300, 400, 500, 510, 590
Code Berkeley Mono web font, 15.9% of text weights 400
Type scale
13px 400 lh 20px 23.3% p span h3 a
15px 400 lh 24px 24.7% span p strong
24px 400 lh 31.92px 6.1% p
48px 510 lh 48px 2.7% h2 strong
72px 510 lh 72px 0.4% h2Which formats can it write?
| Flag | Output | Use it for |
|---|---|---|
-f css | :root { --color-accent: …; --font-heading: …; --text-base: …; } | Starting a stylesheet in the same system as a reference site |
-f tailwind | A Tailwind CSS v4 @theme block | Pasting a site’s scale into a Tailwind project |
-f dtcg | W3C Design Tokens JSON | Style Dictionary and Tokens Studio |
-f json | The full measured data, stable schema | Scripts and CI checks |
-f markdown | A readable report | An issue, a pull request or a design doc |
Token names describe rank or size (--color-palette-3, --text-xl), never what the
designer meant. The site’s own variable names are in the JSON and, with --site-vars, in the CSS.
Which commands are there?
tokens: everything above in one report.fonts: which font sets headings, body and code, with weights and share of text.colors: the palette by coverage, plus named color variables.motion: the animation and 3D libraries a page exposes, such as GSAP, Three.js, Lenis and Lottie.inspect: all of it in one pass.deep: the same page analysed by Enrichr, for what a local read cannot see.
CLI, extension or web tool?
| CLI | Chrome extension | Web tool | |
|---|---|---|---|
| How you use it | Terminal, scripts, CI | One click on the page you are on | Paste a URL |
| Limit | Unlimited | Unlimited | One free fresh lookup, then a free account |
| Output | CSS, Tailwind, DTCG, JSON, Markdown | Copy as hex, CSS or JSON | On the page |
| Localhost | Yes | Yes | No |
| Logged-in pages | No: it does not use your cookies | Yes: it sees the page you have open | No |
The CLI and the Chrome extensions run the same page-side measurements, so their results agree.
What can’t it see?
A local read sees what the page exposes once it has loaded. It cannot see what ran before that, which is
where most interesting motion lives: every GSAP tween and its easing, the shaders a WebGL scene compiled, the
3D scene itself. A library bundled without a global is invisible to it, and motion says so
instead of guessing. Colors that sit behind a click or a scroll position it does not reach are not seen either.
That gap is what Enrichr is for. enrichr deep stripe.com --tool animations sends the address to
Enrichr, which hooks into the page before its own scripts run, and returns the timings. It costs one credit,
and the free plan has 30 a month.
What does it send, and where?
The local commands send nothing. They open the address you gave in a browser on your machine, read it, and close the browser. There is no telemetry and no update check. The code is short enough to read in an afternoon, and the repository has a test that fails if any file other than the two that need the network starts making requests.
FAQ
How do I extract design tokens from a website on the command line?
Run npx enrichr-cli tokens stripe.com. It opens the page in the Chrome or Edge you already have, reads the computed styles of what rendered, and prints the colors, fonts, type scale, spacing, radii, shadows and the site’s CSS variables. Add -f css, -f tailwind or -f dtcg to get a file instead of a report.
Does the Enrichr CLI send my data anywhere?
Not unless you run enrichr deep. The other commands open the address you give in a browser on your machine and print the result: no telemetry, no account, no update check. deep sends the page address and the tool name to Enrichr, with your API key.
Does it need Chrome installed?
For the full read, yes: any of Chrome, Edge, Brave or Chromium. Without one, tokens, fonts and colors fall back to reading the page’s CSS, which is faster but cannot tell which colors cover the page or whether a font loaded.
Is the output exact?
The values are measured from the rendered page, not guessed. The roles are guessed: background, text and accent are picked from how much of the page each color covers, and the report says so. Token names describe rank or size, never the designer’s intent.
What does the CLI not show?
Anything that happened before the page finished loading: GSAP tweens and their easings, compiled WebGL shaders, the 3D scene. enrichr deep returns those through Enrichr, using the free plan’s 30 monthly credits.
Is it really free and open source?
Yes. It is MIT licensed with no dependencies. The only paid part is optional: enrichr deep uses Enrichr credits, and the free plan includes 30 a month with no card.