Introducing Dark Mode to the Design System

Case Study

Role

Product Design

Team

1x Software Engineer

1x Product Manager

Duration

1 week

Intro

In 2020, I designed one of the most requested features by our customers at Educative, the dark mode.

Research

I started by looking at existing applications and design systems to figure out the building blocks for the dark mode.

Foundations

For the foundations, I decided to settle on Material's guidelines for dark mode due to its vast use in the industry and straightforward implementation guidelines that focus on accessibility and aesthetics. It uses color and shadows to define elevation and levels since shadows alone aren't enough to elevate components on dark backgrounds.

The Ramp

I created a 5-color dark grey ramp to accommodate backgrounds. I used the existing grey palette for foregrounds and the text hierarchy. WCAG Accessibility was important for long-form reading here. However, I also wanted to ensure the text wasn't too bright for readers. It took 2-3 iterations post-launch with consistent feedback from our users to get the text color just right.

Changes to the Design System

I added dark mode variants for each component and tested them rigorously against each of the five backgrounds, subsequently adding them to the design system for everyone to use. I also fixed our existing Danger color palette by adding a missing tint of red to keep it consistent with other colors and make it compatible with the dark mode.

The Conversion Guide

Due to the scale of the product, I prioritized main pages of our product to be redesigned in dark mode. For the rest of the pages, I created a conversion guide for developers, using code as examples. This guide can be seen here. Over the course of the next few months, I designed and shipped all of our pages and components in dark mode.

Future Work

Adding the dark mode left some incompatibilities with our existing colors in our design system. As I continued my focus on other high impact projects, this project went into the backlog, however, I continued my research. At the time of writing this case study, I am collaborating with another teammate on revamping our color system for the dark and light mode.