Written by @fcoveram

Problem

As part of the #3592 project we need a finalized design proposal which provides:

• The mapping of dark mode color values to the existing color tokens
• The position of new UI elements

Color system

The current color system of Openverse has worked great conveying the relationship between content hierarchy and brand identity. The unique look of the homepage stands out with its vibrant color compared to other search services, and the use of pink complements the overall design without becoming distracting during the search experience.

However, adding a dark theme to the site presents a substantial challenge in keeping that balance untouched and reach a look-and-feel that feels familiar.

Here I am introducing a proposal for Openverse in dark theme and their main characteristics.

Neutrality

My first explorations began with reusing the current dark charcoal shades to test how the UI feels. After making some mockups, I immediately noticed the overall pink tone caused by this scale as it comes from lightness variants of Pink.

The pink tones in the background competed with the search result and the details page, adding a distracting tone that does not exist in the current theme. Because of that, I decided to neutralize those shades to be entirely gray and remove any hue nuances in the UI.

Lightness

In parallel, I aimed to keep the gray shades simple and use one scale for both light and dark themes. I used Huetone to generate shades based on LCH color mode. This mode sets color values based on the human perceptive lightness rather than computing red-green-blue values, as sRGB does.

This scale sets the baseline for hierarchies in backgrounds, surfaces, and texts. Now that gray is a separate color with shades, yellow and pink also have their scale.

Brand

Given that keeping the brand identity is among the requirements, the tests began by “turning off” the lightness of pink and yellow while keeping their accent and complementary roles, respectively. However, and because of the nature of each color, the inversion felt forced and the UI ended up with a muddy yellow and a saturated neon.

Shifting the role of yellow and pink was sufficient to reach the brand’s familiar tone. Among the tweaks applied, both tones moved slightly toward the surface lightness to make them more visible. In that same vein, brand colors in the audio wave also tap into brand shades to make the UI richer.

Design Library

Creating variables in the design library helped streamline the application of the new color system in pages and components. The "Colors" collection gathers all colors with a more straightforward name and sets the baseline for their use.

To apply color in the UI, the "Alias" collection assigns meaning to each color through a name format that describes how the color is used in both light and dark themes. So, for instance, a surface placed above the background should use the color bg-surface , whereas for an interactive element where the background color changes once the pointer goes over, the color used should be bg-fill-primary-hover

Describing the meaning of each color in the library would make the mockup creation and the library maintenance easier. Acknowledging that this benefits Figma users, I would like your suggestions on how to sync better design and frontend documentation.

Designs

Together, these three pillars consolidate the new color system for both light and dark themes. Please take a look at the design page that gathers the main sections and components in both versions, and let me know what you think.

Pending tasks

As part of the requirements pointed out in the project proposal, the following is pending from my side:

• Add the design of the onboarding process introducing the feature → Dark mode feature introduction flow #4157
• Add the design for switching theme → Site theme switcher (dark mode toggle) #4155
• Share the documentation for transiting to the new color system → Current and new color system #4268

Mockups

Figma file: Dark mode