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.