Migrating to our new palette

Getting started

Before getting started and reviewing all of our new beautiful colors, we need to spend some time reflecting on just where we are coming from and by that I mean we need to look at our old colors. Long ago before we were even where we are today, our colors used a naming convention based on their perceived lightness against a white background. While that may have worked at one time, we have long since outgrown this naming convention.

Example of tokens named by perceived lightness

The problem & resolution

The old way of naming our color tokens presented issues for us to scale as a system. The main issues were the following:

1. Inconsistent terminology -- The first problem with the way we were naming our tokens was that it was not consistent across color families. What was lightest in one color scale, was pale in another.

2. Limited color scales -- The second problem was our inability to grow our color scales. For example how might we add a color between gray-light and gray-lighter (gray-semi-light?). In our new palette there was a need for more colors in each family and this forced us to take a more scalable approach.

3. Confusing when going from light to dark contexts -- Lastly there is the problem of generating token names based on perceived lightness. In our previous system of color tokens, all perceived lightness was measured against a white background. The problem becomes when we change that background to a dark context, the visual relationship between light and dark is inverted, which is not reflected in the token name. As we want our colors to be adaptive using the same contrast across different contexts, percieved lightness was not a viable approach.

The resolution

To resolve many of the issues outlined above we have changed our naming convention to use numbers instead of perceived lightness. This has unlocked the ability for our color tokens to flex according to the context, scale to support more colors in a family and avoid inconsistencies across color families.

Phase 1: Translation

If you are an early adopter of our new design system, you have already been using our new color token naming convention. This phase is referred to as a "translation" because our color tokens did not disrupt or add any new colors to our legacy system. We simply translated the previous tokens to a normalized color scale. This provides the runway to begin to scale our color scales accordingly, while having minimum impact when we integrate into our unified palette.

Example of gray-dark translating to gray-80

Old convention → New convention

Phase 2: Growth & Adoption (Final Phase)

The introduction of one unfied system of color tokens represents the evolution of our color palette across the organization. This palette was contributed to by a collection of individuals from many different departments. Our main goal with this palette is to bring together our vast spectrum of colors and eliminate arbitrary deviations that we encountered throughout our product at large.

Which colors changed in phase 2?

Grayscale tokens

The grayscale now ranges from 0 to 700

Vivid blue

Blue

All colors for blue have changed in value and now support a scale from 40 to 600:

Red

All colors for red have changed in value and now support a scale from 40 to 600:

Green

All colors for green have changed in value and now support a scale from 40 to 600:

Gold

All colors for gold have changed in value and now support a scale from 40 to 600:

Orange

All colors for orange have changed in value and now support a scale from 40 to 600:

Please see our Color tokens to see all of our tokens