Color Palette

This page shows you how to access our color palette and information about its content.

Accessing our color palette

The color palette we have put together is a set of colors that we encourage you to choose from when applying colors to our UI. They should not limit or hinder you but inspire you to create beautiful experiences. As with everything in our design system, see them as a box of things to play around with.

We've created our color palette in Lingo, a web-based asset tool for teams. It has two major sections, standard and extended. Access our color palette by clicking on the Lingo link below (credentials required).

We think it's a bad idea to tell you exactly what colors to use for every possible situation. Instead, we want to empower you to make your own design decisions. That's why it's important that you read through and understand our color guidelines before starting to use our color palette. You'll also find complementing text alongside the color swatches (inside Lingo), make sure to read those as well!

Can't sign in to Lingo? You don't use your Active Directory account to sign in to Lingo. Instead, use these credentials!

LingoLingo

Our icon library can be found on Lingo.

Why so many similar colors?

You might be surprised to find a lot of colors of similar hue in our color palette. The reason is that we need a lot of colors (even colors with similar hue) unless we want our UI to look something like this.

Design good UI with few colors is nearly impossible.

Each color in our palette has a variety of lighter and darker shades that you can choose from. Applying colors wisely with different shades, we might end up with something like this instead. Much better!

Using different shades, we end up with a more pleasing result.