Original Research
Design Token Drift: We Audited 375 Sites. Only 7.5% Got It Right.
Last updated: May 21, 2026
Quick answer: OverlayQA analyzed design token coverage across 375 production websites belonging to product companies with dedicated design teams. Average token coverage was 40.4%, with a median of 38%. Only 7.5% of sites achieved 90%+ coverage. 17,731 hardcoded values were found across the dataset, averaging 47 per site. Sites using CSS custom properties had 39.5% average coverage; Tailwind sites averaged 44.1%.
Design tokens are supposed to be the single source of truth for color, spacing, typography, and elevation. We scanned 375 production websites belonging to companies with dedicated design teams to see how the practice compares to the theory.
Token Coverage Distribution
| Token Coverage | Sites | % of Total |
|---|---|---|
| 0% (no token usage) | 43 | 11.5% |
| 1-24% | 102 | 27.2% |
| 25-59% | 122 | 32.5% |
| 60-89% | 80 | 21.3% |
| 90-100% | 28 | 7.5% |
38.7% of sites had less than 25% token coverage. The largest cluster (32.5%) sits in the 25-59% range: tokens exist and are partially adopted, but more than half of CSS values bypass them.
CSS Custom Properties vs. Tailwind
| Approach | Sites | Avg Coverage | Avg Hardcoded Values |
|---|---|---|---|
| CSS Custom Properties | 298 | 39.5% | 47.8 |
| Tailwind | 77 | 44.1% | 45.2 |
Tailwind sites average 4.6 percentage points higher coverage. Within Tailwind, v4 sites averaged 55.0% while older Tailwind with partial adoption averaged just 8.4%.
The Hardcoded Value Problem
17,731 hardcoded CSS values across 375 sites. Average of 47 per site. Every hardcoded value represents a CSS property that could reference a token but does not.
93% Have Tokens, But Most Don't Use Them
Out of 410 sites with token system data, 383 (93%) had either CSS custom properties or Tailwind utilities in place. Only 27 sites (7%) had no detectable token system. The problem is not missing tokens. It is unused tokens.
Color Token Coverage
Average color token coverage: 51.5% across 374 sites. Teams used 4,691 unique colors, of which 1,618 (34.5%) were covered by the token system.
What This Means for Design Teams
The zeroheight Design Systems Report 2026 found only 8% of teams describe their system as "very stable." Our data explains why: even teams that build token systems are not fully using them. McKinsey research estimates mature design systems save 20-30% of design and development costs annually. When 60% of CSS values bypass the token system, those savings are only partially delivered.
Frequently Asked Questions
What is design token coverage?
Design token coverage is the percentage of CSS values in a production page that reference design tokens rather than hardcoded values.
What is a good design token coverage percentage?
Based on this study, 90%+ coverage puts you in the top 7.5%. 60-89% means well-adopted. Below 40% (the average) suggests significant drift.
What causes design token drift?
Developer shortcuts, copy-pasted CSS, AI-generated code, third-party components, and CSS specificity conflicts. See our guide to design system drift.
Does Tailwind prevent design token drift?
Partially. Tailwind sites averaged 44.1% vs 39.5% for CSS custom properties. Tailwind v4 performed significantly better (55.0%) than older versions (8.4%).
How do I measure design token drift on my site?
Compare declared tokens against computed CSS values in the browser. OverlayQA's Design System Audit workflow does this automatically.