lowhygiene
Hardcoded Color Values
Finds hex color codes used directly instead of design tokens or Tailwind classes.
Why This Is Bad
Hardcoded colors break Dark Mode and make your design inconsistent. They can't be themed and are hard to maintain.
How To Fix
Replace hex codes with Tailwind classes or CSS variables:
tsx
// Before (BAD)
<div className="text-[#ff0000] bg-[#1a1a1a]">
<span style={{ color: '#3b82f6' }}>Text</span>
</div>
// After (GOOD - Tailwind)
<div className="text-red-500 bg-zinc-900 dark:bg-zinc-100">
<span className="text-blue-500">Text</span>
</div>
// Or use CSS variables for custom colors:
// In globals.css:
:root {
--brand-primary: 59 130 246; /* RGB values */
}
// In component:
<span className="text-[rgb(var(--brand-primary))]">Text</span>When You Pass This Check
No hardcoded colors found. Your design system is consistent!
Check If Your Repo Has This Issue
Our free scanner will detect this and 17 other common issues in your codebase.