design-tokens-auditlisted

# Design Tokens Audit ## Purpose Find hardcoded design values in the codebase — hex colors, raw pixel values, magic font-sizes, ad-hoc border-radii — and compare them against the project's token registry. Surface drift so the `design-system-curator` can decide: adopt-the-token, add-a-new-token, or accept-the-exception. Read-only — produces a report, no auto-fixes. ## Scope In: - Color literals: hex (`#abc`, `#aabbcc`, `#aabbccdd`), `rgb(…)`, `rgba(…)`, `hsl(…)`, `hsla(…)`, named CSS colors. - Spacing: raw `px`, `rem`, `em` outside the token scale. - Typography: font-size, line-height, font-weight literals. - Border radius literals. - Box-shadow literals. Out: - Layout calc that genuinely needs a one-off (e.g., `transform: translateX(-50%)`) — flagged as info, not drift. - Asset files (`.png`, `.svg`, font binaries). - Test fixtures and stories that intentionally use raw values. - Auto-fix. The audit reports; humans (or a follow-up dispatch) fix. ## When to use - Before a design-system version bump, to know the drift surface. - After a hand-off from a designer who built outside the system, to see what new values they introduced. - During onboarding of a new component library, against existing app code, to size the migration. - Quarterly hygiene pass on the project's main app code. ## When NOT to use - For brand-new projects that don't have a token registry yet — set one up first (the audit needs something to compare against). - For projects whose policy is "