Bringing dark mode into an existing design system

We picked screens with different structures and levels of density and translated them into dark mode by hand, to see whether the relationships between page backgrounds, sections, cards, and data would still read clearly once the base colors flipped.

The hierarchy held up across every example. That meant we could keep the existing layouts and components as they were and put the real work into color and surface behavior instead of a structural rebuild.

Once we knew the existing logic could support a second theme, the next question was tone. We explored several directions and, for a while, considered letting people choose between them.

That option didn't survive contact with the timeline: supporting multiple tones would have multiplied the states the team needed to build and test, so we narrowed the direction down to one. The final comparison came down to two candidates, Dark Blue and Asphalt, and the team was genuinely split.

I was in the Asphalt camp. It read as more neutral and worked across a wider range of existing screens. Dark Blue looked striking in an individual mockup, but felt too dominant as the one default theme the whole product would run on.

During one review, another designer on the team compared the decision to the Pepsi Challenge — the blind taste test where Pepsi often won the first sip because it tasted sweeter, while Coca-Cola stayed the drink most people kept choosing over time.

The analogy fit our comparison closely. Dark Blue stood out immediately in a side-by-side presentation, the way a first sip does. Asphalt was quieter and more comfortable across dozens of screens — closer to something you'd actually want to live with.

Since people would see the selected tone every day, not just in a mockup review, I saw Asphalt as the safer default.

Looking back at how the light theme was actually constructed, I focused on the white sections used throughout the product to define cards and content areas. Giving every one of those sections the same solid dark fill would tie them to one specific background tone — exactly the flexibility we'd just decided we needed to avoid.

I tested a different surface style instead: slightly transparent, with a strong background blur. The sections still separated content the way they always had, but the page background stayed visible underneath them.

That let us define the change as one additional component style and control the overall tone through the page background alone. The component changes stayed limited, and the theme itself became more flexible than a straight color swap would have allowed.