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
<div className="bg-surface text-fg border-line" /> // not style={{ background: '#0e0e11' }}References
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`vh-heroHero sized with `100vh` / `h-screen`will-change-static`will-change` applied statically to many elementsz-index-soupMany distinct z-index valuesmissing-metadataPage has no `metadata` / `generateMetadata` and inherits only the root titlemissing-metadata-baseRoot layout metadata has no `metadataBase`canonical-in-root-layoutCanonical URL set in the root layoutog-merge-drops-parentPage `openGraph` replaces the layout's (shallow merge drops images/siteName)