Design system

Migrating to our new palette

This guide will help you understand the evolution of our color palette. It will also help you if you are using our v1 tokens or even using our v0 tokens to migrate to use our latest unified palette! So let's jump right in!

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

Old conventionNew convention
blackgray0
off-blackgray20
gray-darkestgray40
gray-darkergray60
gray-darkgray80
graygray100
gray-lightgray200
gray-lightergray300
gray-lightestgray400
offwhitegray500
whitegray600
blue-darkblue80
blueblue100
blue-brightblue200
blue-paleblue300
red-darkred80
redred100
red-brightred200
red-palered300
orange-darkorange80
orangeorange100
orange-brightorange200
orange-paleorange300
green-darkgreen80
greengreen100
green-brightgreen200
green-palegreen300
gold-darkgold80
goldgold100
gold-brightgold200
gold-palegold300
subs-blue-darkvividblue80
subs-bluevividblue100
subs-blue-brightvividblue200
subs-blue-palevividblue300

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

TokenNotes
gray0no change to value
gray20no change to value
gray40no change to value
gray60new color value
gray80no change to value
gray100new color value
gray200new color value: equivalent to gray100 in phase 1
gray300new color value: equivalent to gray200 in phase 1
gray400new color value: equivalent to gray300 in phase 1
gray500new color value: equivalent to gray400 in phase 1
gray600new color value: equivalent to gray500 in phase 1
gray700new color value: equivalent to gray600 in phase 1

Vivid blue

Blue

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

TokenNotes
blue40new token added
blue60new token added
blue80change to value
blue100change to value: equivalent to vividblue100 in phase 1
blue200change to value
blue300change to value
blue400new token added
blue500new token added
blue600new token added: equivalent to vividblue300 in phase 1

Red

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

TokenNotes
red40new token added
red60new token added
red80change to value
red100no change to value
red200change to value
red300change to value
red400new token added
red500new token added
red600new token added: equivalent to red300 in phase 1

Green

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

TokenNotes
green40new token added
green60new token added
green80change to value
green100no change to value
green200change to value
green300change to value
green400new token added
green500new token added
green600new token added: equivalent to green300 in phase 1

Gold

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

TokenNotes
gold40new token added: equivalent to gold80 before the change
gold60new token added: equivalent to gold100 before the change
gold80change to value: equivalent to gold200 before the change
gold100change to value
gold200change to value
gold300change to value
gold400new token added
gold500new token added
gold600new token added: equivalent to gold300 in phase 1

Orange

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

TokenNotes
orange40new token added
orange60new token added
orange80change to value
orange100no change to value
orange200change to value
orange300change to value
orange400new token added
orange500new token added
orange600new token added: equivalent to orange300 in phase 1

Please see our Color tokens to see all of our tokens