Design Token Auditor
Paste CSS → find inconsistencies
📚 Learn more — how it works, FAQ & guide Click to expand
Learn more — how it works, FAQ & guide
Click to expand
Design token auditor
Find duplicate colors, inconsistent spacing, naming drift in your design tokens.
How to use this tool
- 1
Paste CSS or tokens
Your variables, Tailwind config, or raw CSS.
- 2
See duplicates + inconsistencies
Near-duplicate colors, random spacing, naming drift.
- 3
Export a clean list
Deduplicated, grouped, ready to consolidate.
Frequently Asked Questions
What counts as a "duplicate" color?
Perfect match (#FF0000 == #ff0000). Visual match (#FF0000 ≈ #FE0001). RGB within 5 units = practically identical. Merge these to reduce token bloat.
Spacing inconsistencies?
Common chaos: 4px, 8px, 10px, 12px, 14px, 16px, 20px, 24px, 32px. Consolidate to 8-point scale: 4, 8, 16, 24, 32, 48, 64. Drop 10, 14, 20 in favor of nearest multiple.
You might also like
🔒
100% Privacy. This tool runs entirely in your browser. Your data is never uploaded to any server.