no-hardcoded-hex

Hardcoded hex color values should use design tokens.

Copy link to sectionWhat it flags

A line like this:

const Title = styled.h1`color: #3b82f6;`

is reported as:

Hardcoded hex color "color: #3b82f6" — use a design token instead

Copy link to sectionHow to fix it

Replace with a semantic color token (e.g., var(--foreground)).

preset AI suggests a fix: Replace hardcoded color with design token. Hardcoded hex "#3b82f6" should use a semantic CSS custom property for consistent theming and dark mode support.

Before:

const Title = styled.h1`color: #3b82f6;`

After:

const Title = styled.h1`color: var(--foreground);`

Copy link to sectionRelated

• All rules: every built-in rule, by dimension.
• Set up enforcement: connect an AI tool and make validation required.