Design
Start in the dark
Designing dark-first forced us to be deliberate about contrast, depth and colour, and it made the light mode better too.
When you start in dark mode, you cannot lean on heavy shadows and borders to create hierarchy; you have to earn it with spacing, contrast and restraint. Those decisions carried straight over to a cleaner light mode.
The whole system runs on a small set of CSS custom properties, colours, borders, radii, so a single change ripples everywhere and both themes stay in sync without duplicated work.
Why it holds up in both themes
Dark as the baseline
Contrast and depth decided where they're hardest.
Semantic tokens
Colors named by role, so a theme swap is one layer deep.
Light as a peer
A seamless second theme, not an afterthought.
The approach
Designing dark-first changes the outcome
Bolting dark mode on later almost always shows.
Most products design in light and darken it afterward, which is why so many dark modes feel like a dim photocopy. Starting in the dark forces the hard contrast and depth decisions up front, where they belong.
With a small set of semantic tokens, light mode then becomes a clean second theme rather than a fight, the same structure, re-skinned, both looking intentional.
The system
What keeps it consistent
Tokens, not one-offs
A small set of variables drives colour and surface, so nothing drifts.
Two themes, one source
Light mode is derived from the same tokens, not maintained separately.
Hierarchy by structure
Spacing and contrast do the work, not heavy borders and shadows.
In practice
Designing dark first changes the questions you ask
Starting from a dark canvas forces honesty about hierarchy. Without heavy drop shadows to lean on, elevation has to come from tone and contrast, and every surface must earn its brightness. Interfaces designed this way tend to survive the trip back to light mode with cleaner structure.
Pure black and pure white are both traps: black backgrounds make halation shimmer around text, and white text at full strength glows. We tune both a few steps toward grey and let accent colors carry the energy instead.
Finally, we test with real content at night, on OLED phones, at minimum brightness, the conditions people actually use dark mode in. What looks moody in a portfolio shot can be unreadable on a train; the night test catches it.
Constraints are a design tool. Starting in the dark took options away, and the result was clearer for it.
We build software for teams who want their tools to fit the way they actually work — web, mobile, AI and the systems that tie them together. We write here about what we learn shipping it.