Design System

The Challenge

Our design files didn’t have colors linked to styles in Figma. This led to many one-off designs and designers were not able to easily reference colors that were used.

Our Approach

I audited the current unlinked colors we were using in our Figma files and in our website. I consolidated important colors and created a color system around it for our designers to create more cohesive designs.

Auditing Colors

I reviewed the colors we used in our designs to spot inconsistencies and gather important colors.

Documenting Colors

I started out by auditing the colors in our current design files and I found 17 variations of gray/blues.

Blue/Gray variations in our Figma designs

I also used a plugin to see what colors were being used on the website. In total, there were 31 blue/gray colors and many of them were close to each other.

Token Studio - Color Tokens

Consolidating Colors

I reviewed both the Figma designs and website and the first step I took was to consolidate these colors. I eliminated the overlap of close colors and got it down to 12 colors.

Condensed Color Palette

Naming Colors

I tried a few different methods of labeling the colors. One was naming them Blue 1, 2, 3... but I had a difficult time ordering them by luminosity/brightness. Also, if I was ordering by brightness, I would have to rename them when another shade of blue was created.

I also tried labeling them by how they were used (e.g., icons, strokes, text), but the colors were being used for too many different elements.

There was a need to build a system with distinct color choices and a naming system that would be easy to reference.

Building a Color System

I ran a competitive analysis on color systems for company UI Kits and tailored it to meet our use cases.

Creating a Gradient

I researched how other companies systemized their colors and saw this article by a designer who worked at Lyft.

The Lyft Design team had a similar issue where 15 different pinks were being used in their system. The author of the article created a tool called 'Colorbox' to generate a color gradient with distinct variations. One unique feature was that it gave designers control of the curve of the gradient, so there could be more light colors up front and fewer darker variations or vice versa.

I started with the color ‘Slate’ and ‘Gray’ which covered most of the consolidated colors we had in our palette.

Screenshot of Colorbox

I imported the colors from Colorbox to Figma via the Colorbox plugin and it neatly created the styles.

Color variants organized in folders in Figma

Lyft made a spectrum of colors using the gradients they created and they called it the Global Palette. And out of that Global Palette, they would select just a few that they’re going to use for the year. I followed this model and formed the palette below. We weren’t planning on using every color in the palette but by creating options via a gradient, we could have a common language and a systematic approach to our colors. Below is the Global Palette I created for our design system.

Global Palette created in Figma

Conclusion

The color system gave designers a consistent and common language to refer to.

Final Product

One example use of our color styles was with our button components. These button components (a whole different venture) were built with the color foundation we created. The variations in gradient gave us the guidelines to choose the colors that were being used for the Default, Hover, and Active states of the buttons.

Buttons displaying color variations dependent on state

Adding the color system to our shared UI kit has given us a level of consistency and helped us be more creative and systematic when choosing colors for our designs.