Before getting started and reviewing all of new beautiful colors we need 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 of their precieved lightness according to a white background. While that may have worked at one time we have long since out grown the naming convention.

Example of tokens named by precieved lightness

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

1. Inconsistency -- 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 another would be using pale.

2. Unable to scale -- The second problem was our inability to grow our color scales. For example how do you scale and 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 use a more scalable approach.

3. Confusing in other contexts --Lastly there is the problem of naming something in precieved lightness against a given background. Our old color tokens used the target background of white and all precieved lightness was measured against that white background. The problem becomes when we change that background to maybe a dark context the color light becomes confusing when its the darkest color. As we want our colors to be adaptive using the same contrast across different contexts precieved lightness was not something we could use.

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

If you are a early adopter of our new design system you have already been using our new color token naming convention. This phase is called a transition because our color tokens did not disrupt or add and new colors to our legacy system. We simply translated the previous tokens to a normalized color scale. This allowed for us to provide the run way to begin to scale our color scales accordingly and avoid minimum impact when we integrate into our unified palette.

Example of gray-dark translating to gray-80

The evolution of our color palette is the introduction to our unfied color palette. This palette was worked across the orginzation with many different departments. Our main goal with this palette is to unifiy and remove the variance in color that we find throughout our product at large.

The grayscale now ranges from 0 to 700

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

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

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

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

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