Design Token Auditor documentation
Documentation for Design Token Auditor. It describes the extension as it exists today, before any store listing, and will be extended as it changes.
Requirements
- Chrome 116 or newer, or another Chromium-based browser of the same version such as Edge, Brave or Opera.
- Until the extension is listed, it is installed from its folder: open the browser's extensions page, turn on Developer mode, choose Load unpacked and select the folder that contains manifest.json.
Checking elements
- Open a page and click the toolbar button, or press Alt+Shift+D. Choose a token set in the panel.
- Hover to outline elements and click to pin one. Esc gives clicks back to the page.
Scanning a page
- Open Page, then Scan page. Choose a group to mark its elements on the page.
- Copy QA list gives a Markdown checklist; CSV gives the same as a spreadsheet.
Token sets
- Sets… opens the token sets page: import token files or paste CSS variables, view what was read, choose the set new sites start with, and see which site uses which set.
- Formats read: W3C Design Tokens (DTCG), Tokens Studio, Style Dictionary, CSS custom properties with var() and calc(), and Tailwind v4 @theme.
- Entries that cannot be used, such as aliases that lead nowhere, are listed when a set is viewed.
Tolerances
- Colours: up to 0.6 ΔE in OKLab counts as the token, up to 4 as near.
- Lengths: within 0.5px counts as the token; near means within 1.5px or 12%.