DIG Colors

Dropbox's product suite has always been a branded house, rather than a house of brands. This critical distinction underscored the rationale to use the core brand color palette as a firm foundation for new color system.

Interactive state support was lacking in VIS. This led to a lot of redundant and slightly different effort to articulate hover and pressed states across the DIG component library. We started to see uncanny differences between components, as well as between logged-out and logged-in surfaces.

After several rounds of discovery, I landed on luminance as the crux of scaling our color palette. Luminance is the most objective measurement of color contrast. Using this approach provided the highest level of confidence that users would be able to distinguish the colors in our interfaces, regardless of individual color deficiency (i.e. color blindness).

By establishing minimum and maximum luminance targets and a standard set of steps, the DIG color system is able to provide reliably distinguishable color groups. By using core VIS as the foundation, we were able to maintain cohesion without reinventing the wheel.

Due to the sheer volume of colors we could generate with our luminance-based approach, it was necessary to carefully consider tooling. The solution was to use Chroma JS to generate the color scales. On the design side, I built a custom Figma plugin to import the results as styles (and later variables). On the engineering side, my partners were able to implement identical logic in Storybook for cross-platform compatibility.

Before all the foundational scaling work, we already had a layer of semantic, role-based color tokens. The next step in this effort was to update the semantic tokens to provide straightforward, no-fuss support for theming and modes.

In order to simplify to semantic layer, we implemented some common concepts and terminology to make adoption and usage as straightforward as possible. Base and surface became useful distinctions between selected and deselected states. State modifiers provided support for hover and pressed states. Group names such as primary, secondary, alert, and success could then be tied to specific use cases and statuses.

Previous attemps at theming and mode support had a nasty habit of requiring different semantic tokens to be applied per theme/mode. While this could be made to work, it created a lot of extra work without a lot of extra value. A goal of this effort became to guarantee that tokens could be applied once and theme or mode could be changed independently without causing contrast issues.

Prior to this effort, Dropbox didn't ship dark mode to web. Before wrapping the project, we reevaluated and established an approach to mode that would maintain elevation between bright and dark mode. This meant that any thing less elevated (further away from the global light source) would be darker, regardless of mode. This helps the interface feel consistent across modes.

The tail end of this project dovetailed with a larger visual refresh effort. This presented a handful of opportunities to further fine tune our color system. Most Dropbox users don't upload a profile picture, so we saw placholder avatars and their identity colors as an opportunity to fine tune and inject a little more branded appearance into the product.