Overview

Color is a powerful tool for directing people’s attention, highlighting important information, and evoking emotions. Our eyes naturally gravitate towards it. We use it strategically to guide people and enhance their experience.

Having small touches of color makes it more colorful than having the whole thing in color.
— Dieter Rams

Related content

---

Our principles in practice

Our identity principles guide how we define our foundations to create a better experience for everyone. Here’s how they apply to color:

1. Coherent: We have assigned specific semantic sentiments to colors to establish a coherent meaning throughout the experience, making it more predictable and easier to understand.
2. Empowering: Color is a powerful tool for directing people’s attention, highlighting important information, and evoking emotions. Our eyes naturally gravitate towards it. We use it strategically to guide people and enhance their experience.
3. Clear: Color is a crucial experience guiding element. We use it to highlight important elements, details, words, etc. Overusing color can distract people and defeat that purpose.
4. Inclusive: Our color system provides a good contrast level in every context. Contrast defines how easily a person distinguishes one element from an adjacent one: higher contrast means higher visibility and legibility. Color contrast can be measured numerically using the standard defined in the WCAG 2.1 guidelines.

But using color alone to convey information can be exclusive for colorblind people—approximately 4.5% of the world. We reinforce the differences between elements using icons.

Further reading

Color scales

Each color has eight luminance steps, with two additional lighter and darker values for the Neutral. Each step was designed for at least one specific use case. Here’s a simplified overview:

Core color palette

Core colors are the joint base for the App and Marketing. They have generic names and the full color scale. On top of this, we can use specific libraries that simplify their use for particular purposes—as in the App—which target these Core values.

Primary colors

Blue

Maze Blue is our primary color and represents an essential part of our brand personality. It plays a vital role in our designs, both in product and marketing.

Neutral

Neutral is the base color for content both in product and marketing.

Secondary colors

They are used as a complement, to differentiate and draw attention to specific elements, or as decoration, especially in marketing communications.

Accessible pairings

Quality checklist

This element passes the following requirements described in our Component lifecycle.