Design System Dark Mode - Sonatype
Sonatype's design system is split into two parts: Kaleido, the guide and component library for designer use, and Tartan, the developer's shared component library. As a Senior Product Designer on the team, I was chosen to lead the initiative to add Dark Mode variants to all of our components and design tokens.
Date
H1 2023
Role
Product Designer
Company
Sonatype
The Problem
The existing components in Kaleido were originally designed in Light Mode only. The user base, however, consists of developers, engineers, and other personas of similar backgrounds, over 70% of whom prefer to use Dark Mode in their daily workflow. Keeping in mind that the majority of dark modes are not fully accessible, it was also important that these components met the minimum standards for legal compliance with the ADA.
The Objectives & Key Results
Create a Dark Mode version of Sonatype’s Design System that meets the following requirements:
Design to a minimum of Level A compliance with WCAG guidelines
Test with internal stakeholders to ensure the new mode works optimally with all usage of the library in product
Validate the usability and delight of the final results via testing by at least 20 participants sourced from primary product user personas
The Process
The existing Light Mode made use of design tokens built on a set of HSL color variables. The first step in the process, then, was to use a series of mockups of existing product pages to develop a Dark Mode version of these design tokens. As the Light Mode was built around Indigo color variables, Indigo was chosen as the base of Dark Mode as well. This had the bonus effect of enhancing the uniqueness of the mode, as most product’s Dark Modes utilize blacks and greys.
It was important that the proportionate color relationships match the Light Mode tokens in order to streamline compliance with the brand and accessibility guidelines while building on users’ familiarity with the current component mode. As such, the first step was to experiment with converting existing layouts to Dark Mode to develop a color relationship between Dark Mode variables that maintained the semantic relationships in Light Mode while inverting the colors.
Once the design tokens were chosen, the next step was to validate the choices internally. After a series of iterative critiques by the organization’s Design Studio and interviews with internal stakeholders, the designs were completed and sent to development.
The Solution
The completed version of Dark Mode was delivered two months ahead of schedule and met (or exceeded) Level AA WCAG requirements - one level higher than required. As the Sonatype Design System’s component library is open source, it can be viewed here by adjusting the Theme Settings in top navigation.
The Results
The final version of the Dark Mode UI was tested by 47 users (from the key user persona of Developer, DevOps, and Security) via a Maze survey. A slide deck was generated to share the feedback with executive shareholders, including:
When choosing from a list of 20 words to describe the new mode, users overwhelming (50% of Developers, 35% of DevOps specialists, and 50% of Security professionals) described it as “calming”.
One user shared that “Somehow dark mode makes me feel less anxious with all of the overwhelming information from the policy violations.”
Another said: “The dark mode creates a visually stunning and immersive experience.”
After all was said and done, the project exceeded all requirements and expectations and was seen as a unilateral success by the organization.
