October 25, 2026
Most design-token extraction starts the same way: open DevTools, copy hex codes by eye, guess which gray is actually the background. The Enrichr CLI does it from one command instead, reading the page the way a designer would inspect it and printing what it found:
npx enrichr-cli tokens stripe.comIt opens the address in your own Chrome, Edge, Brave or Chromium — whichever you already have — reads the computed styles of what actually rendered, and reports the fonts, colors, 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, downloads nothing, and has no dependencies.
What the report looks like
Trimmed output for linear.app, measured 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
Colors (ranked by coverage)
#fbfbfa background 61.2%
#08090a text 22.4%
#5e6ad2 accent 4.1%
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% pFive commands, one browser session
| Command | What it reads |
|---|---|
tokens | Everything: fonts, colors, type scale, spacing, radii, shadows, CSS variables |
fonts | Just the fonts that actually loaded, with real names and weights |
colors | Just the palette, ranked by how much of the page each color covers |
deep | Everything above plus GSAP/ScrollTrigger timings and the WebGL scene, via Enrichr credits |
Five output formats from the same read
| Flag | Output |
|---|---|
| (default) | A readable terminal report |
-f css | Plain :root { --color-accent: …; } CSS variables |
-f tailwind | A Tailwind v4 @theme block — see converting a site to a Tailwind theme |
-f dtcg | W3C Design Tokens JSON, for Style Dictionary and Tokens Studio |
-f json | The full measured data, stable schema, for scripts and CI |
What leaves your machine (short answer: nothing, usually)
tokens, fonts and colors open the address you give in a browser on
your own machine and print the result there. No telemetry, no account, no update check. enrichr deep
is the one command that talks to a server: it sends the page address and the tool name to Enrichr, with your
API key, because it needs to catch things a static read can't — animation timings and WebGL state that only
exist while the page runs.
What a quick read can't see
The CLI reports what the page looks like once it's settled — not what happened to get there. GSAP tweens
and their easings, compiled WebGL shaders and the Three.js scene graph all run before or during load and
are gone by the time a static read checks the page. enrichr deep, or the full
Enrichr MCP server, hooks in before the page's own scripts run, which is the only
way to catch them.
Full command reference and FAQ: the Enrichr CLI page.
FAQ
What is the Enrichr CLI?
A free, open-source command that opens a URL in a Chrome, Edge, Brave or Chromium browser you already have, reads what the page actually renders, and prints its fonts, colors, type scale, spacing, radii, shadows and CSS variables. Nothing is sent anywhere unless you use the optional deep command.
How do I extract a website's fonts and colors from the command line?
Run npx enrichr-cli tokens example.com. It prints a report with the fonts that actually loaded, the colors ranked by how much of the page each one covers, the type scale and the site's own CSS variables resolved to their final values.
What output formats does it support?
Five: a readable terminal report by default, plus -f css for plain CSS variables, -f tailwind for a Tailwind v4 @theme block, -f dtcg for W3C Design Tokens JSON, and -f json for the full measured data with a stable schema, for scripts and CI.
Does it need an Enrichr account?
No. Every command except deep runs entirely in your own browser on your own machine, with no account, no telemetry and no update check. enrichr deep is the one exception: it sends the page address and tool name to Enrichr, with your API key, to reach what a quick visit can't — GSAP timings, the WebGL scene, source maps.
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 static CSS, which is faster but can't tell which colors actually cover the page or whether a font loaded.
How is this different from the Chrome extension or the web tool?
The CLI is scriptable and works offline in CI, the extension is a one-click check as you browse, and the web tool works from any device with just a URL. All three measure the same way — a real browser render, not a guess from the bundle — so pick whichever fits where you're working.
Is it really free and open source?
Yes, 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.