Key insights
- Dark mode is not black mode. Build on a near-black base like #121212, not pure #000000, so shadows and depth stay visible.
- Signal elevation with layered surfaces: each step up gets a lighter grey (base → surface → elevated), the way shadows do the job in light mode.
- Desaturate accent colors by roughly 20%. Full-saturation buttons and highlights vibrate and strain the eye against a dark background.
- Never use pure white text. #FFFFFF glares on dark UI — calibrate it down to a soft off-white for comfortable reading.
- Build text hierarchy with opacity, not new colors: high-emphasis, medium, and disabled text simply step down in white opacity.
Do / Don't
- Do: Base your darkest layer on a near-black grey like #121212, then lighten each surface as it elevates.
- Do: Desaturate accent colors so buttons and highlights sit calmly against the background.
- Do: Dim body text to a soft off-white and use opacity tiers to separate emphasis levels.
- Don't: Use pure black (#000000) as the background — it flattens elevation and hides shadows.
- Don't: Ship fully saturated accent colors — they buzz and read as cheap on dark UI.
- Don't: Set text to pure white (#FFFFFF) — the glare fatigues the eyes over time.
