No design tokens / theme variables
Part of Documentation, UX & Accessibility, which counts for 15% of the overall score. When this check fires it deducts 2 points from that category, once per scan, no matter how many places it turns up.
What it detects
Colors are hardcoded as raw hex values throughout the stylesheet instead of using CSS custom properties, making theming and consistency harder.
Why it matters
When the same colors are pasted as raw hex values dozens of times, every design change becomes a find-and-replace across the stylesheet, and near-duplicate shades (#3b82f6 next to #3b82f7) creep in unnoticed. CSS custom properties give each color one definition and one name, which is what makes consistent theming, a dark mode, or a rebrand feasible later. This is about maintainability, not visual output; nothing changes on screen.
How to fix it
Inventory the distinct hex values in the stylesheet (grep -o "#[0-9a-fA-F]\{3,8\}" file.css | sort | uniq -c helps), then define them once as custom properties on :root, named by role rather than hue: --color-bg, --color-text, --color-accent, --color-border. Replace each usage with var(--color-...), consolidating exact duplicates as you go. Flag near-duplicate shades for a human decision instead of silently merging them.
The paid report includes a ready-to-paste prompt for your AI coding agent for every check it finds, pointed at the exact findings from your scan. See pricing
Does your repo trip this check?
Paste a GitHub URL or drop a project folder. Scans run in your browser and take seconds.
Scan your repo