Token audit
Colours, spacing, font sizes and radii that are off your token scale, with the nearest token.
These cards are in the Design tab. Hover a row to outline its element on the page, and click it to select it, which fills the Element tab.
Tokens checks the colours, spacing (margins, padding and gaps), font sizes and corner radii the page uses against a token set, and lists every value off the scale, most used first, with the nearest token. A value a shade or a pixel from a token is marked Near: usually a token typed by hand. Hover a value to outline an element using it; click to select it.
| Token set | Where it comes from |
|---|---|
| This page's CSS variables | The custom properties on :root (the default) |
| Tailwind default scale | Tailwind's spacing, font sizes and radii (no colours) |
| Import tokens | W3C design tokens or Tokens Studio JSON, Figma variables JSON (the REST API's), Tailwind 4 CSS with @theme, or a Tailwind theme as JSON |
A tailwind.config.js is code, which Nitpique never runs: export the theme as JSON, or use Tailwind 4's CSS. The set you choose, and an imported one, are remembered for the site. Under Colours, Near duplicates pairs colours that are almost the same, whatever the token set.
Questions
Which token sets can I check against?
The page's own CSS variables (the default), the Tailwind default scale, or an imported set: W3C design tokens, Tokens Studio, Figma variables JSON, Tailwind 4 CSS or a Tailwind theme as JSON.
Can I import my tailwind.config.js?
No. It is code, which Nitpique never runs. Export the theme as JSON, or use Tailwind 4's CSS.