Dark mode: A scalable theming solution with semantic tokens
Audience
All external users, as final users and clients + Internal New Relic teams, as consumers of the Design System
Working group
Two designers with a dedicated team of developers
New Relic's Dark Mode was a strategic investment that improved user satisfaction and aligned the platform with industry standards. Because many engineers prefer dark mode for long working hours, its poor implementation was a frequent pain point.
By implementing a thoughtful, accessible dark theme, we enhanced usability and increased user retention and engagement. This feature also played a role in customer acquisition, as many prospects consider dark mode a must-have. Beyond usability, it strengthened New Relic’s brand perception as a modern, developer-focused platform.
The Opportunity: Creating a versatile theming framework beyond Dark mode
Until now, the company has used a fully automated CSS filter to quickly implement Dark Mode, which has presented many usability, performance, and accessibility issues.
However, to solve this, we did not fix only that. We designed a whole new theming framework solution based on semantic tokens, with, of course, a finely curated dark theme… All in only 1-2 months for design definition and 3-4 months for adoption.
The Process
We defined the interactive role first and, only then, assigned the value we decided for that role in each theme, working in that semantic layer that's easy to understand and scale. For example, the token nr1--color--interactive--link, used for the color of links in enabled status, renders blue in the light theme but renders as a lighter blue in the dark theme to ensure accessibility, and, for example, could render as purple in a different new theme.
During this process, I meticulously redesigned our palette, considering accessibility requirements (AA minimum) to guarantee an inclusive user experience.
Auditing and unifying the user interface
We embarked on an extensive audit of our product to understand our color usage rationale and identify our specific needs. Following the "higher the elevation, lighter the surface" principle, I defined the elevation levels of the interface.
To establish a solid foundation, we developed standard relationships and scales for theme-aware aspects of the user interface, such as surfaces, elevations, and shadows; and we used a semantic layer on design tokens to create a common language for design properties, providing additional information about the tokens’ intended functionality.
Throughout this process, we translated color usage patterns into reusable semantic tokens, bridging the gap between design and functionality. Simultaneously, we addressed branding changes and ensured that all components adhered to semantic roles.
The entire organization embraced the implementation of these tokens, which allows modifications with minimal engineering effort.
By creating a semantic token framework, we defined a new structure as the source of truth. We successfully updated all components in our SDK to utilize color semantic tokens and shared the color libraries with our design teams. Thanks to our guidance and support during the transition, teams consuming the design system components could update seamlessly, while those with custom implementations received assistance in aligning their UI with the new tokens.
Now, we’re meeting accessibility standards across all themes,
This project ensured that New Relic meets accessibility standards across all themes, reducing custom implementation and, more importantly, greatly reducing a11y issues.
we’re reflecting New Relic's brand identity…
I had the opportunity to integrate the new branding elements into the existing design framework by combining tokenization and rebranding efforts to streamline the design process.
…and we’re preparing for the future
Our success has inspired us to extend this tokenization methodology to other design decisions besides color. A token-based architecture has enabled us to enhance optimization on a large scale, elevate quality and consistency, and facilitate the upkeep of a robust and adaptable Design System.
Both (...) offer a light and dark mode, but I noticed some color and contrast issues with the dark mode in the case of Datadog's UI.
https://betterstack.com/community/comparisons/datadog-vs-newrelic/
(...) New Relic shines in its ease of integration, data collection, and presentation, and its slick dark theme!
