Design Token Auditor

Click any element to check its colours, spacing, radius and type against your design tokens. Scan pages; export a QA list.

Design Token Auditor checks a web page's colours, spacing, corner radius, type and shadows against your design system's tokens. It marks what is on a token, what is near one (15px where the scale has 16px, usually a slip) and what is off the scale, with the nearest token as the fix. • Pick: hover to outline an element, click to pin it and see every value with its token or the nearest one • Scan: checks every visible element and groups what is off by value; choose a group to see those elements on the page • QA list: copy a Markdown checklist for your issue tracker, or download a CSV • Token sets: import W3C Design Tokens (DTCG), Tokens Studio or Style Dictionary JSON, or CSS custom properties including Tailwind v4 @theme • Built in: Tailwind CSS v4 and v3 defaults, or the page's own :root variables • Colours are compared in OKLab, so oklch(), lab() and display-p3 tokens match their sRGB values • Each site remembers its token set • English and Turkish 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. No account, no server, no analytics and no network requests.