Image Hairline: Pure Alpha, Never Tinted
NEVER: Tint an image hairline. Separate an image from its surface with a 1px `outline` at low alpha in PURE black (`oklch(0 0 0 / 0.1)`) on light and PURE white (`oklch(1 0 0 / 0.1)`) on dark — never a near-black or near-white from the palette (`slate-900`, `#0a0a0a`, `#f5f5f7`). This is the ONE neutral you must not tint, and the scoped exception to `design-impeccable-tinted-neutrals`: that rule governs surfaces you control, while a hairline sits on arbitrary photographic content, where any hue picks up the surface behind it and reads as dirt on the image edge. Use `outline` with `outline-offset: -1px`, not `border` — an outline is painted outside the layout algorithm, so the image keeps its intended size and a grid stays aligned.
Separate an image from its surface with an inset 1px outline of pure black or pure white at low alpha — the one neutral you must not tint
img { outline: 1px solid oklch(0 0 0 / 0.1); outline-offset: -1px; }
@media (prefers-color-scheme: dark) { img { outline-color: oklch(1 0 0 / 0.1); } }Bad
Good
Why it matters
Read this against design-impeccable-tinted-neutrals, which says the opposite — never #000, never #fff, tint every neutral toward the brand hue. Both are right, and the conflict is kept rather than flattened, because they are scoped to different surfaces. A tinted neutral works when it sits on a surface you control: the hue is a quiet, deliberate relationship between two things you shipped.
An image hairline sits on arbitrary photographic content, and on the boundary between that content and whatever surface the image happens to land on today. A hue that is invisible on your neutral-100 card goes muddy-green against a warm cream backdrop and grey-violet against a warm photograph — and because it is a 1px line at the exact edge of a photo, the brain does not read "a subtly tinted separator", it reads dirt on the image.
Pure black and pure white at low alpha have no hue to shift, so they read as a shadow of the edge itself under any backdrop. This is the one neutral you must NOT tint. Second half of the rule, and cheap to get wrong: use `outline` with `outline-offset: -1px`, not `border`. A border adds 2px to the box, which knocks a grid of images out of alignment against anything unbordered next to it; an outline is painted outside the layout algorithm entirely, and the negative offset pulls it inside so the image keeps its intended size.