A completely different visual language
Dark mode is not simply a colour inversion. It is a separate visual system with its own contrast, depth, hierarchy, and emotional register. It's a completely different visual language that demands rethinking contrast, depth, hierarchy, and emotion from the ground up. A site designed for light with dark colours swapped in usually feels unfinished because the hierarchy has not been reconsidered.
The first thing to understand is that dark backgrounds compress visual range. In light mode, you have the full luminance spectrum available. In dark mode, you're working in a narrower range, so every element of the hierarchy needs to be re-calibrated. Contrast ratios that work in light mode need to be checked in context. Recheck them from first principles.
A site designed for light with dark colours swapped is not dark mode. It's a mistake.
How depth works in the dark
Depth works differently in dark UI. In light mode, depth is primarily communicated through shadows, elements cast shadows downward onto lighter surfaces. In dark mode, shadows disappear into backgrounds. Depth must be communicated instead through elevation (brighter surfaces sit higher), blur (atmospheric perspective), and light, surfaces that emit or reflect light read as close; surfaces that absorb it read as distant.
Colour psychology shifts significantly in dark contexts. Saturated colours that feel energetic on white backgrounds feel aggressive and harsh on dark ones. The solution is to desaturate slightly and boost luminosity, you want colours that glow, not colours that shout. Our brand palette does this deliberately: the fire oranges and violets are tuned specifically for dark mode rendering, slightly more luminous and less saturated than their light mode equivalents.
FROM THE STUDIO
Sound familiar? We can help shape the next move.
Typography and interactivity in dark environments
Typography is where most dark mode implementations fail. The default assumption is to simply swap black text for white text. But very bright text on near-black can feel harsh at reading length. The solution is off-white, a considered off-white contrast level rather than pure white. This single change makes long-form content dramatically more readable without any perceptible loss of legibility.
Interactivity needs more deliberate treatment in dark UI. Hover states that rely on subtle background lightening are invisible against dark surfaces. Focus states need to glow rather than outline. Active states need to feel like they're emitting energy. The vocabulary of interactivity in dark mode is fundamentally about light, things get brighter when activated, dimmer when inactive.
Pure white on near-black is eye-straining at reading length. Off-white contrast changes everything.
The atmosphere test
The real test of a dark mode design is whether it feels intentional or compensatory. Intentional dark mode has a distinctive atmosphere, a sense of depth and dimensionality that light mode simply cannot achieve. It should feel like looking through a window at night rather than staring at a wall. Every layer, every transition, every highlight should serve that atmosphere.
If your dark mode feels like your light mode with the lights off, you haven't finished the work. The goal is a separate design mode that's as carefully considered as your primary mode, not an afterthought, not a checkbox, but a genuinely different experience that serves a different emotional register. That's the standard. Most implementations don't reach it. The ones that do are the ones users talk about.