# Never #000, Never #fff
**NEVER** · **ID:** `design-impeccable-tinted-neutrals` · **Category:** design
**Source:** [impeccable](https://impeccable.style/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/design-impeccable-tinted-neutrals
> NEVER: Ship `#000`, `#fff`, or zero-chroma grays like `#808080` — tint every neutral toward the brand's hue at OKLCH chroma ~0.005–0.015, letting chroma fall toward 0 as lightness approaches 0 or 100. Use the actual brand hue, not a reflexive warm-orange or cool-blue.
Tint every neutral toward the brand hue instead of shipping pure black, pure white, and dead grays
The target is OKLCH chroma between roughly 0.005 and 0.015 at the brand's hue: small enough that nobody would call the surface "tinted", large enough to produce a subconscious sense that the neutrals and the brand color belong to one system. Pure #000, #fff, and #808080 have zero chroma, so they have no hue relationship to anything you ship and read as detached. Two lazy reflexes to avoid: tinting everything warm-orange, or everything cool-blue, regardless of what the brand actually is — the hue must be the brand's. Chroma must also fall toward zero as lightness approaches 0 or 100, otherwise the near-white and near-black ends start to look visibly colored rather than quietly cohesive.
## Rule snippet
```tsx
--surface: oklch(0.98 0.008 265);
--ink: oklch(0.18 0.01 265);
```
## Bad — do not do this
`design-impeccable-tinted-neutrals-bad`
```tsx
import type { CSSProperties } from 'react';
const PAPER = '#ffffff';
const INK = '#000000';
const LINE = '#808080';
const NEUTRALS = { '--paper': PAPER, '--ink': INK, '--line': LINE } as CSSProperties;
export function ImpeccableTintedNeutralsBad() {
return (
Brand color + neutrals
Invoice INV-1284
Pure {PAPER} surface, pure {INK} text, {LINE} border — zero chroma anywhere.
The teal brand swatch and the card look like they came from two different products. Absolute
black and white are the only values with no hue relationship to anything, so the neutrals read as
detached instead of as the brand's quiet register.
);
}
```
## Good — do this
`design-impeccable-tinted-neutrals-good`
```tsx
import { useState } from 'react';
import type { CSSProperties } from 'react';
const BRAND_HUE = 195;
// Chroma falls toward zero as lightness approaches 0 or 100, so the extremes stay believable.
const neutrals = (tinted: boolean): CSSProperties =>
({
'--paper': tinted ? `oklch(0.99 0.006 ${BRAND_HUE})` : 'oklch(0.99 0 0)',
'--ink': tinted ? `oklch(0.20 0.012 ${BRAND_HUE})` : 'oklch(0.20 0 0)',
'--muted-ink': tinted ? `oklch(0.55 0.015 ${BRAND_HUE})` : 'oklch(0.55 0 0)',
'--line': tinted ? `oklch(0.87 0.010 ${BRAND_HUE})` : 'oklch(0.87 0 0)',
'--brand': `oklch(0.72 0.13 ${BRAND_HUE})`,
}) as CSSProperties;
export function ImpeccableTintedNeutralsGood() {
const [tinted, setTinted] = useState(true);
return (
Brand color + neutrals
Invoice INV-1284
Neutrals sit at hue {BRAND_HUE}, carrying just enough chroma to belong to the brand.
Flip the toggle: nobody can name the difference, but with the tint on, card and brand swatch read
as one system. Never #000 or #fff — carry the brand hue at chroma 0.005–0.015, and resist the two
lazy reflexes of tinting everything warm-orange or cool-blue regardless of the brand.