Skip to main content

Search rules

Search all UI Guides rules by name, category, or source

designinterface-design

On Dark, Borders Beat Shadows

SHOULD

SHOULD: On dark surfaces define elevation with a hairline low-opacity border plus one small step of surface lightness, not a drop shadow — a shadow works by darkening pixels behind the element and near-black has no luminance left to remove, so `shadow-lg` exists in the computed style and nowhere on screen.

Define elevation on dark surfaces with a hairline border and a surface lightness step, because a drop shadow has nothing left to darken

Bad

Good

Why it matters

A drop shadow works by darkening the pixels behind an element. On a near-black background there is almost no luminance left to remove, so shadow-lg on a dark card produces an elevation that exists in the computed style and nowhere on the screen — and if the card fill matches the panel behind it, the edges disappear entirely. Definition on dark comes from two cheaper, more reliable levers: a hairline border (a low-opacity light stroke reads as a crisp edge at any ambient brightness) and one small step of surface lightness — each jump only a few percentage points, barely visible in isolation but unmistakable once stacked.

This is distinct from two neighbours in this corpus. design-impeccable-dark-glow is about the opposite failure — a saturated chroma glow spilling off a dark card, which is loud but meaningless. content-impeccable-dark-mode-text-compensation is about the type on dark (weight and colour compensation), not the box around it. This principle is only about where the edge of the box comes from.

Built by Gleb Stroganov, design engineer at Evil Martians.

The rules come from other people's skills and guidelines — Vercel, Rauno Freiberg, @Ibelick, impeccable, Emil Kowalski, Tailwind, RAMS — each one credited on the Sources page. The work here is extraction and wiring: every rule is pulled into one corpus, given a good and a bad example you can operate, a MUST/SHOULD/NEVER rule an agent can paste, and a link back to where it came from.