Dark mode for Tidal design system
Mobile techs often work in low-light environments, where dark mode provides a better viewing experience. Meanwhile, our office desktop users have been requesting a dark mode option for several years.
Team & Objectives
The company’s Tidal design system launched in 2022 with a default light mode.
WinTeam mobile, the newest product slated to launch in mid-2025, required dark mode to better support their users working in low-light conditions.
While WinTeam’s need was the initial catalyst, the dark mode solution had to be scalable across the company’s entire product suite.
Over a six-month period, I co-led a task force of five designers dedicated to this effort. Unfortunately, toward the latter part of the project, two of our talented designers departed the company due to organizational restructuring.
Research
Although I had contributed complex components to Tidal, I lacked familiarity with token architecture.
I conducted a deep dive into open-source design systems such as Adobe’s Spectrum and IBM’s Carbon. These explorations revealed that there was no singular “gold standard” — only evolving best practices shaped by each organization’s needs and technical stack.
As the Tidal design system extended MUI; we kept the inherited token structure: hex values mapped to color primitives, which in turn mapped to semantic roles.We started by inverting colors as a baseline, knowing exceptions—especially for backgrounds and elevation—would be key to maintaining clarity and hierarchy in dark mode.
Adobe’s Spectrum design system token architecture
Discovery
The original MUI Alert utilized component specific mappings and pulled from styles. The Tidal Alert was remapped to the primitive and semantic variables.
Inheriting from MUI meant certain base components like Alert used component-specific tokens. To reduce complexity, these were remapped to existing Tidal tokens.A full audit revealed unmapped and incorrectly mapped colors throughout our library. A handful of new components, such as Tag, were heavily customized. In retrospect, dark mode amplified the cost of customization, reinforcing the need for restraint going forward.
As the darkest gray was reserved for shadows, the existing gray palette was expanded. To address contrast issues within our primary and secondary buttons, palettes were combined and expanded.
Navigation components across our products feature the company’s primary brand color.
To preserve brand consistency, we overrode default behavior to prevent these elements from adapting to light or dark mode.
Our initial surface palette skewed too blue, evoking the product’s legacy UI.
Based on internal feedback, the palette was adjusted to lean more neutral and gray for a cleaner, more modern look.
Subsequent testing validated our direction towards a grayer palette, but testing showed it needed to be darker for better contrast.
At a granular level, testing each component and its variants surfaced additional mappings that required refinement.
Design process
Using playground environment to preview custom complex components
Acquiring designs from each product surfaced additional pain points.
Using Figma’s modes, designs were dragged into dark mode frames; these initial experiments exposed what mappings required revisiting.
Through trial and error, we discovered that primitive tokens did not require dark mode mappings. When both the primitive and its semantic layer had dark mode definitions, the changes effectively canceled each other out—reversing twice and returning to the original state.
Outputting variables to JSON allowed engineering to populate a preview dev environment, which provided another avenue to debug colors.
To support testing and debugging, we exported variables as JSON, enabling engineering to populate a dedicated preview environment: a critical tool for validating real-world application of our design tokens.
Despite differences across each product’s navigation system, we needed a consistent and scalable solution for placing the dark/light mode toggle. Aligning on this helped ensure a unified user experience across the platform.
As the first product shipping with dark mode, WinTeam Mobile testing surfaced mobile-specific challenges—like limited elevation use and a unique icon set.
Designs by Christina Trapp
Next Steps and Reflections
Dark mode is now being finalized for an upcoming release of the design system, with documentation and best practices in development. This project was very rewarding: it strengthened my design systems expertise, broadened my understanding of tokens and variables, and gave me the opportunity to lead alongside talented collaborators across product lines.