Designing Dark Mode First (And Why Most Teams Get It Backwards)
Contrast, elevation and colour behave differently on black. A practical system for interfaces that hold up in both themes.
Kabir Sen · Product Designer · 2026-07-14 · 9 min read
Key takeaways
- Elevation on dark surfaces comes from lightness, not shadow.
- Pure white text on pure black is usually too harsh, pull it back.
- Accent colours need higher chroma on dark to read as the same colour.
Elevation is lightness
On light interfaces, elevation reads as shadow. On dark, shadow disappears, surfaces must get lighter as they come forward. Build a ladder of four surface tokens and never improvise.
Colour shifts perceptually
The same hex reads duller on black. Working in a perceptual colour space lets you hold chroma constant across themes instead of hand-tuning every token twice.
Frequently asked
- Should dark mode use pure black backgrounds?
- Near-black works better for large surfaces because it lets you express elevation, while pure black is excellent for edge-to-edge canvases and OLED efficiency.
Share this essay
Keep reading
The 2026 Indian Developer Stack
What 4,200 engineers across Bengaluru, Hyderabad and Pune actually ship with, and what they quietly abandoned this year.
How to Read a Research Paper Without Drowning
A three-pass method for going from abstract to intuition on any machine learning paper in under an hour.