Lint any page against your design system — in the browser

Source linters check the code you wrote. But design-system drift shows up in what actually rendered — a hardcoded grey that reached the DOM through three layers of indirection, a color that never changes when you toggle dark mode, spacing that skipped the scale. Loupe lints the live page against your design system, catching what source rules can't see.

What it checks

• Raw color literals — hex / rgb() / hsl() / oklch() in class arbitrary values and inline styles
• Primitive tokens used directly where a semantic token exists (no dark-mode override)
• Rogue spacing — the raw Tailwind numeric scale outside your design-system components
• Deprecated aliases — old token names, with the replacement named in the suggestion
• Dark-mode diff — toggles your theme axis and flags every color that doesn't respond: hardcoded values invisible to static analysis
• Raw text sizes where your type scale should be used

How it works

You teach Loupe your design system once with a profile — a JSON file listing your tokens (CSS variables + utility classes + light/dark values), component fingerprints, theme axes, and which lint rules to run. Import it in the DS panel, bind it to your app's origin, and press L to lint the page. Results group by severity with click-to-locate; a red/amber overlay marks each finding in place.

Built for teams

Profiles are yours to distribute — Loupe never bundles or uploads them. Host one at a URL and it auto-updates daily as your tokens ship. An organisation licence unlocks the Pro audits for everyone using your profile, with no individual accounts, plus optional reporting of findings to your own endpoint and a one-click "AI fix prompt" export for coding agents. See the authoring guide.

FAQ