Our team at Internet Brands audited and cleaned up features on the ‘Settings’ pages of our Content Management System.
Internet Brands builds websites for medical offices with our their website builder. Our design team was often tasked with designing features and functionality for the website builder.
I created a systems for type and color in Figma to use as building blocks for our designs. Below is the process and outcome of forming the Color system.
When I was going through our existing design files, I noticed the designs didn’t have colors linked to any styles in Figma. Similar to type, this created a lot of one-off designs and designers were not able to easily change or reference colors that were used on multiple designs.
I audited the current unlinked colors we were using in the designs and website. I consolidated important colors and created a color system around it for designers to create more cohesive designs. Below is the process of how the system was created.
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 about 24 blue/gray colors and many of them were very close to each other.
Blue/Gray variations in the website
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
I tried a few different methods of labeling the colors. One was naming them Blue 1,2,3... but 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.
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
We utilized the color styles for consistent design in our modals. 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
Using the color system has given the designers a common language to refer to and because it’s published in the library, we’re able to use it in our own files when we’re designing. It’s given us a level of consistency and helped us be more creative and systematic when choosing colors for our designs.
