Updated 2026-07-05 · 7 min read
About one in five sites in our library runs dark by default — dev tools and crypto especially. The good ones share numeric habits you can copy directly; the bad ones share one mistake: treating dark mode as inverted light mode.
Measured dark backgrounds cluster at #08090a–#141416, not #000000. Near-black keeps contrast workable, lets true black remain available for depth, and avoids the smearing/eye-strain of pure black with light text. Linear's measured #08090a is the canonical example.
Pure white body text on dark vibrates. The pattern that works is three tiers: headings near-white (#f5f6f7), body dimmed (#b4b8bf–#c9cdd3), muted labels around #8a8f98. Hierarchy comes from luminance steps instead of weight alone.
Shadows die on dark backgrounds. Elevated surfaces get lighter instead: bg #0a0a0b → card #141416 → popover #1c1c1f, each with a 1px border at rgba(255,255,255,0.06–0.1). This border-plus-tint system is what makes dark UIs feel crisp instead of muddy.
The signature move of premium dark sites: a soft radial glow behind the hero headline or product shot in the accent hue at 10–20% opacity. One glow. Multiple glows turn the page into a nightclub.
Saturated colors gain apparent brightness on dark backgrounds, so accents need less area — a colored CTA and colored links may be all the chrome the page needs. Desaturate large colored surfaces slightly or they will hum.
For working examples with exact measured values, filter the library's dark-themed sites.
Match the audience context: developer and media products live comfortably dark; commerce, health and document-heavy products usually read better light. Offering both is ideal but doubles design QA.
Start at #0a0a0b (cool) or #0c0a09 (warm). Test with your text tiers and accent; the right value is the darkest one where hierarchy still has room beneath it.
You mostly don't. Elevate by lightening surfaces and adding 1px low-opacity white borders. Reserve glow effects for one hero moment.