Why your design tokens and your CSS are probably out of sync (and how to check)

You defined the tokens. You documented them. You probably even built a Storybook page showing the full palette with variable names. And then six months passed. Now your codebase has color: #1A1A1A in fourteen places, a spacing value of 12px scattered across components, and three tokens that haven't been referenced in any CSS file since the last rebrand. Nobody did this on purpose. It just happened — and that's exactly what makes it hard to catch. The silent drift problem Design tokens are a bridge that connects design decisions and code . Instead of hardcoding values, you reference a named token. Colors, spacing, typography, radius, everything flows from a single source of truth. In practice, here's how it usually goes: A deadline hits . Someone needs to ship a component fast. A token gets renamed . The design team updates the naming convention from color-primary to brand-blue-600. The JSON gets updated. The documentation gets updated. Some CSS files get updated. Not all of them. A new