NEW RELIC / ONE CORE DESIGN SYSTEM
Dark mode—a scalable theming solution with semantic tokens
How: Using semantic tokens to create a versatile theming framework
We had the chance to not only create a new color scheme for native Dark Theme foundations and SDK components but also implement a robust theming framework for New Relic, using semantic tokens for a seamless transition that would allow us to implement any theme in the future.
Design tokens are a technology-agnostic methodology, architecture, and process for scaling design across tools, devices, or platforms. A design token is a decision about how something looks and can be used in different situations (color, spacing, size...). We used a semantic layer to create a common language for design properties, providing additional information about the tokens’ intended functionality.
For example, nr1--color--interactive--link, used for links in enabled status, renders blue in the light theme, but renders as a lighter blue in the dark theme, and it could be purple in a different theme.
We defined the interactive role first and, only then, assigned the value we decided for that role in each theme, working in an abstraction layer that's easy to understand and scale.
Auditing and unifying the user interface in New Relic
We embarked on an extensive audit of our product to understand our color usage rationale and identified our specific needs. Following the "higher the elevation, lighter the surface" principle, we defined the elevation levels of the interface. New Relic is a very complex product, so we had to tread carefully and maintain a balance as it became clear that it wasn’t worth adding too much complexity.
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. We meticulously redesigned our palette, considering accessibility requirements (AA minimum) to guarantee an inclusive user experience. 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.
Currently, our entire organization has embraced the implementation of these tokens, empowering easy modification of themes with minimal engineering effort.
By creating a semantic token framework, we defined a new structure as the source of truth. Now, we don’t speak of colors; we speak of functionality. Currently, our entire organization has embraced the implementation of these tokens, empowering easy modification of themes with minimal engineering effort. 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 were able to update seamlessly, while those with custom implementations received assistance in aligning their UI with the new tokens.
1. 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 important, greatly reducing a11y issues. These changes have significantly improved the overall Dark Theme experience and satisfaction for New Relic’s users.
2. We’re reflecting New Relic's brand identity
I had the opportunity of integrating the new branding elements into the existing design framework. By combining tokenization and rebranding efforts, we were able to streamline the design process and enhance the user experience to meet the rebranding needs. The result is a polished and modern interface that reflects New Relic's new brand identity.
3. We’re preparing for the future
Our success has inspired us to extend this tokenization methodology to other design decisions besides color. Having 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.
Before and after
Problem: An accessibility & brand nightmare
The company was using a fully automated CSS filter to quickly implement Dark Mode by performing a pixel-by-pixel color inversion. This presented many usability, brand, performance, and accessibility issues.
Outcome
Designed a theming framework solution with a curated Dark theme.
Integrated and applied the new branding to the UI, enhancing brand identity
Resolved several accessibility issues.