Your design system is drifting. Here’s your score.
TokensDrift scans your codebase for hardcoded colors, off-scale spacing, and unused design tokens — then gives you a shareable report with a score your whole team understands.
You built a design system. Your codebase stopped using it.
It starts small. One #3B82F6 hardcoded under deadline pressure. One margin: 13px that’s almoston the scale. Six months later there are 300 of them, and nobody can say when it happened — because nothing was measuring it.
Manual audits go stale
The spreadsheet from last quarter’s audit was outdated before the meeting ended.
Linters don’t see drift
Generic rules flag syntax, not adoption. They can’t tell you token coverage dropped 4% this sprint.
Nobody owns the number
Design blames engineering, engineering blames deadlines — there’s no score anyone can point at.
One command. One score. No dashboard login required.
Scan
Run npx tokensdriftin any repo. It auto-detects your tokens from CSS variables, Tailwind config, or token JSON — no setup, no account, nothing uploaded.
Score
Get a Drift Score out of 100, a category breakdown, and the exact files responsible — not just a violation count.
Share
Add --share for a hosted report URL. Paste it in Slack, drop it in a PR, show it in design review.
This is an actual scan output.
Run against a small sample component and stylesheet. Every value below is a real finding — file, line, and the fix.
Your code never leaves your machine.
Scans run 100% locally. The CLI has zero runtime dependencies — read the source before you run it. Sharing is opt-in: --share uploads only the report (aggregate stats and violation locations), never your source code, and every upload is scrubbed for secret patterns first. Reports live at unguessable URLs, are deletable by you, and expire automatically unless you claim them.
Common questions
Does it work with Tailwind?
Yes — it reads your Tailwind config as a token source and flags arbitrary values (mt-[13px], text-[#3B82F6]) as drift.
What stacks are supported?
CSS, SCSS, and JS/TS/JSX/TSX files using CSS variables, Tailwind, or standard token JSON formats. The scanner is format-based, not framework-locked.
How is the Drift Score calculated?
A weighted blend of token adoption rate, violation density, and violation concentration. The formula is public and versioned — every score links to the full violation list behind it.
What exactly gets uploaded with --share?
The report artifact only: scores, per-category stats, file paths, and the flagged value snippets. Never full source files. Don’t want anything uploaded? Don’t pass --share— everything works offline.
Find out your score in the next 60 seconds.
$ npx tokensdrift .