Media
5 items
Description
Audit the current page against a designer-provided token system and see matches, violations, and drift. Is the live site actually using your design system? Token Drift tells you. Give it your design tokens — paste them, upload a .json/.md file, or point it at a public repo URL, then click "Audit this page." Token Drift reads the page's rendered styles and compares every color, spacing value, font size, font weight, font family, line height, radius, and shadow against your tokens. You get a single coherence score plus a clear breakdown: • Matches, values that hit a token exactly. • Near-misses, values close enough to count as half-credit drift. • Orphans, values with no token behind them, grouped and tagged with the closest token. From there you can: • Click "Show on page" to highlight any drifting element right on the live page. • See which of your tokens are going unused. • Export the full report as JSON or Markdown, or copy a one-line summary straight into a ticket or PR. Built for designers auditing their own systems and engineers who consume the exports. Privacy first: Token Drift runs only on the tab you choose, only when you click. Your tokens and the page's styles are analyzed locally and never leave your browser. No accounts, no tracking, no servers. Supported token formats: • W3C-style design tokens JSON (DTCG / Tokens Studio exports) • A simple Markdown token list • A public GitHub or GitLab file URL (auto-rewritten to raw)