---
title: "Hard-coded colors in components instead of tokens (lint/hardcoded-colors)"
description: "lint/hardcoded-colors: Raw hex/rgb values and default palette classes (`bg-indigo-500`) in components bypass the semantic tokens, so dark mode, theming and…"
canonical: https://void-design.vercel.app/rules/lint/hardcoded-colors
lastModified: 2026-09-16
---

# Hard-coded colors in components instead of tokens

`lint/hardcoded-colors` · severity **warn** · category Lint · detected by `void lint` and `void audit`

## Why it matters

Raw hex/rgb values and default palette classes (`bg-indigo-500`) in components bypass the semantic tokens, so dark mode, theming and contrast fixes have to be done file by file and the palette drifts.

## How to fix it

Use semantic token utilities (`bg-surface`, `text-fg-muted`, `border-line`, `bg-brand`). Keep raw colors inside token/theme files, OG image generators and SVG artwork.

## Example

```tsx
<div className="bg-surface text-fg border-line" />   // not style={{ background: '#0e0e11' }}
```

## References

- https://tailwindcss.com/docs/theme

## More lint rules

`void lint` reports 67 rules in this category. Static source checks with no browser: Tailwind v4 silent failures, Next.js 16 API traps, React render-body bugs, accessibility markup, SEO files and motion hygiene.

- `overflow-x-hidden-sticky` `overflow-x: hidden` on html/body/root wrapper breaks `position: sticky` — [lint/overflow-x-hidden-sticky](https://void-design.vercel.app/rules/lint/overflow-x-hidden-sticky)
- `vh-hero` Hero sized with `100vh` / `h-screen` — [lint/vh-hero](https://void-design.vercel.app/rules/lint/vh-hero)
- `will-change-static` `will-change` applied statically to many elements — [lint/will-change-static](https://void-design.vercel.app/rules/lint/will-change-static)
- `z-index-soup` Many distinct z-index values — [lint/z-index-soup](https://void-design.vercel.app/rules/lint/z-index-soup)
- `missing-metadata` Page has no `metadata` / `generateMetadata` and inherits only the root title — [lint/missing-metadata](https://void-design.vercel.app/rules/lint/missing-metadata)
- `missing-metadata-base` Root layout metadata has no `metadataBase` — [lint/missing-metadata-base](https://void-design.vercel.app/rules/lint/missing-metadata-base)
- `canonical-in-root-layout` Canonical URL set in the root layout — [lint/canonical-in-root-layout](https://void-design.vercel.app/rules/lint/canonical-in-root-layout)
- `og-merge-drops-parent` Page `openGraph` replaces the layout's (shallow merge drops images/siteName) — [lint/og-merge-drops-parent](https://void-design.vercel.app/rules/lint/og-merge-drops-parent)

Detected by `void lint` and `void audit`. Explain it in a terminal: `void rules lint/hardcoded-colors`