Color

Because we support dark mode and high contrast color variants, working with colors on mobile requires a few special workflows and considerations. Our core color system is maintained in the Mobile Design Toolkit Figma file. This is the source of truth. Changes here will propogate out to the Figma Team Library, the Mobile Design Toolkit plugin, and eventually into the iOS and Android apps as Xcassets and XML files.

Adding and updating colors does take time and attention to detail. This should not deter us from iterating, adding new colors, or adjust color values when we find they are not working in production. The following notes and videos are meant to capture the existing processes.

Primer base

We use the Primer Primitives color values as our starting point for working with color in mobile. We always want to be inheriting upstream changes to different values.

Spectrum colors

Because the mobile apps support dark mode, we want to make minor adjustments to the Primer colors so that they remain clear in a dark environment. Generally, we do this by increasing brightness (improve contrast) and decreasing saturation (reducing vibration). By doing this, we end up with a light/dark pairing for each color in the Primer system.

Functional colors

When we begin implementing colors into the codebase, we immediately bump into two problems:

1. Using Spectrum values like gray-500 are not descriptive, and will lead to confusion about when to use which value
2. To support dark mode and high contrast mode, we would have to use four separate Spectrum values to account for each variant (e.g. gray100 in dark mode, gray900 in light mode).

To combat this, we abstract our Spectrum values into Functional colors. Functional colors describe their purpose in the application. For example, iconTertiary or textPrimary. These values are more readable to humans, and provide inherent context about when they should be used.

Additionally, functional colors abstract dark mode and high contrast mode. For example, a functional color textSecondary might wrap the following sets of rules:

• In light mode, normal contrast, use gray800
• In light mode, high contrast, use gray850
• In dark mode, normal contrast, use gray200
• In dark mode, high contrast, use gray150

Using code generation, we can dynamically extract XML files for Android, and Xcassets for iOS that contain these color abstractions.

Note: Our functional color system is a work in progress! We currently cover text, icons, backgrounds, badges, and borders. But we should expect to expand and refine this system over time as we encounter new use cases and opportunities for clear abstraction.

Edit this page on GitHub

3 contributors

Last edited by ashygee on October 22, 2020