Chrome · Chromium browsers
Design Token Auditor
Check a page's colours, spacing and type against your design tokens.
- Works with Chromium browsers
- Marketplace Chrome Web Store
Coming soon
In development
Design Token Auditor is in development. It has not been submitted to the Chrome Web Store, so it cannot be installed from there today. This page exists so the address is stable when that changes.
Coming soon toChrome Web Store
What it does
Design Token Auditor is a browser extension for Chrome, Edge and other Chromium-based browsers, for designers and front-end developers. It checks the styles on a web page against a design system's tokens. Each value is on a token, near one (15px where the scale has 16px, usually a slip) or off the scale, with the nearest token as the fix. It reads W3C design tokens, Tokens Studio and Style Dictionary files, CSS variables and Tailwind v4 themes.
Capabilities
Pick
Hover to outline an element and see its counts; click to pin it and list each value with its token or the nearest one. Clicks do not reach the page while picking, and Esc stops.
Scan
Checks every visible element, up to 6,000. It shows the share of values on a token and groups the rest by value, with how many elements use each. Choose a group to mark those elements on the page.
QA list
Copy a Markdown checklist for an issue tracker, or download the same as CSV, safe from formula injection.
Your tokens
W3C Design Tokens (DTCG) with aliases and composites, Tokens Studio and Style Dictionary JSON, CSS custom properties and Tailwind v4 @theme. Built in: the Tailwind CSS v4 and v3 defaults, or the page's own :root variables. Each site remembers its set.
Colours compared properly
Colours are compared in OKLab and every CSS colour syntax is read, so oklch(), lab() and display-p3 tokens match their sRGB versions.
Only when asked
It has no standing access to any site. Nothing runs on a page until you click the toolbar button or press Alt+Shift+D, and only while the panel is open.
Plans
Free
$0
- The built-in Tailwind sets, the page's own CSS variables and one imported token set
- Picking elements to inspect
- The first 20 findings of a page scan, and the share of values on a token
Pro
$7 a month
- Any number of imported token sets
- Every finding of a scan
- The QA list: copy as Markdown or download as CSV
- Everything in Free
Questions
Where does Design Token Auditor run?
Entirely in your browser. Atesen Software receives nothing from it, and it makes no network requests.
What does Design Token Auditor connect to?
Nothing from the pages you check. It makes no network requests, has no analytics and loads no remote code. The Tailwind presets are files inside the extension.
How do I get help with Design Token Auditor?
Support for Design Token Auditor is provided by email in English and Turkish.
Email support@atesensoftware.com. We aim to acknowledge every support email within two business days (Europe/Istanbul).
What we do not claim
- It is in development. It has not been submitted to or approved by the Chrome Web Store, and has no installation count or review history.
- It checks computed styles as the browser draws them: colours, spacing, radius, border widths, type and shadows. It does not read design files, and it does not check layout or accessibility.
- Hidden elements and the inside of SVG images are not scanned.
- It is not affiliated with or endorsed by Tailwind Labs. It ships Tailwind CSS's default theme values under the MIT licence.
Marketplace
Chrome Web Store: In development — not yet submitted; no public listing exists.
Coming soon toChrome Web Store