Skip to main content

Search rules

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

designimpeccable

No Glowing Accents on Dark Backgrounds

NEVER

NEVER: Add a colored `box-shadow` glow (chroma >= 30, blur radius > 4px) to elements sitting on a near-black surface (relative luminance < 0.1). Build depth on dark from a surface lightness scale (roughly 15% / 20% / 25%), which stays legible in bright ambient light and costs no extra paint.

Build depth on dark surfaces with a lightness scale, not with colored box-shadow glows

Bad

Good

Why it matters

impeccable's detector fires when a background's relative luminance is below 0.1 and the element carries a box-shadow whose color chroma is >= 30 with a blur radius greater than 4px — light spilling out of a component onto a near-black page. This is distinct from "Avoid Glow as an Affordance" (design-ibelick-no-glow), which is about glow standing in for a real interaction signal; here the glow is applied to everything, so it signals nothing and merely dates the design.

On dark, elevation should come from a surface lightness scale (roughly 15% / 20% / 25%), which stays legible in bright ambient light and costs no extra paint.

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.