When I first started designing seriously, I defaulted to white backgrounds because that is what most design tutorials showed. Then I started building my portfolio — a project I cared deeply about — and I made a choice: dark-first. Not because it looked cooler, but because it forced me to think differently about every element on the screen.
That decision changed how I approach hierarchy, contrast, and the relationship between components. Dark mode is not a colour scheme you apply at the end. It is a design philosophy that reshapes every decision you make along the way.
"Light-mode design lets you get away with a lot. Dark-mode design makes every mistake visible."
Why Dark Mode Is Harder to Do Well
In light mode, white space does the heavy lifting. You get separation for free — a white card on a white background is still legible because borders and shadows are easy to read. In dark mode, you lose that shortcut. Everything needs to earn its place through contrast, colour, or elevation.
This exposes weaknesses in a design system very quickly. Inconsistent spacing becomes obvious. Type scales that weren't really working become glaring. Colours that relied on the white background for warmth look muddy or washed out against dark surfaces.
Elevation Is Not About Shadows — It's About Light
Material Design introduced the concept of using lighter shades to represent higher elevation on dark surfaces. This is one of the most important ideas in dark-mode design. In the real world, objects that are closer to a light source appear lighter. Dark UI mimics this: a modal or a dropdown should feel physically closer to the user, so it is rendered slightly lighter.
Background
Cards
Bar
Drawers
Popovers
Notice I didn't use drop shadows for that chart. That's intentional — pure black shadows disappear against dark backgrounds. The solution isn't to make shadows brighter; it's to use surface colour to communicate elevation instead.
The Five Rules I Design By
-
R1
Never use pure black (#000000) for backgrounds. It looks harsh, unnatural, and makes everything feel disconnected. I use
#0a0a0f— dark navy-black — as a base. The blue undertone makes it feel expansive rather than oppressive. -
R2
Reduce saturation for large surfaces. Fully saturated colours on dark backgrounds cause eye strain over time. Use muted or slightly desaturated versions for backgrounds and large fills. Reserve full saturation for accents and interactive elements only.
-
R3
White text is rarely the right choice. Pure white (#FFFFFF) on dark backgrounds has a contrast ratio so high it becomes uncomfortable for long reads. Use off-white — around 85–90% lightness — for body text. Reserve true white for headings and critical UI labels.
-
R4
Borders over shadows. A 1px semi-transparent border communicates containment far more effectively than a blurred shadow on dark UI. The border says "here is the edge of this element" clearly and crisply.
-
R5
Glows are accent tools, not decoration. A subtle radial gradient behind a CTA button or a hero heading creates depth and draws the eye. But every glow should have a purpose — it should be pointing at something that matters. Random ambient glow is just visual noise.
What Designing Dark-First Actually Changes
Conclusion
I've seen dark mode treated as an afterthought — a filter slapped onto a light-mode design at the end of a project, with colours inverted and shadows tweaked. That approach always looks wrong, because it is wrong. Dark mode requires its own decisions, its own palette, its own system of elevation and contrast.
The reason I build dark-first is simple: the constraints make me more deliberate. I can't rely on white space as a free separator. I can't hide weak hierarchy behind a bright background. Every element needs a reason to be there — and that discipline carries over into how I think about every design, dark or light.
Try it. Start your next project with #0a0a0f and no other starting colour. See what it forces you to think about.
