What xray does
A dev-time overlay that maps computed styles back to the design tokens they came from.
Hover any element in your running app and xray tells you which design tokens its computed styles map to — and which of those values only work in the theme, mode or density you happen to be looking at.
| high | 20px |
| low | 36px |
| medium · | 28px |
| mobile | 44px |
| touch | 44px |
| dark | rgb(36, 37, 38) |
| light · | rgb(255, 255, 255) |
| high | 4px |
| low | 12px |
| medium · | 8px |
| mobile | 8px |
| touch | 16px |
Why a browser is involved
Every other token linter works on source text. That is enough to tell you
padding: 8px is not a var().
None of them can tell you that 8px is --salt-spacing-100, that the token
resolves to four different values across four densities, and that this element is
therefore correct at exactly one of them. That needs the cascade resolved, and
resolving the cascade needs a browser.
This page is the fixture
The site you are reading declares two real variant axes — theme and density, in
the sidebar — and leaves one component hardcoded on purpose. Press ⇧⌘X on the
landing page and you are inspecting it with the tool it documents.
Where to go next
- Setup — Vite and Next.js, plus the hotkey.
- What it reports — the five verdicts, and which ones matter.
- How it works — why there is no config and no adapter for your design system.
- In CI —
xray record, baselines, and exit codes.