Designing a developer-centric color system

A designer should be fully aware of the user’s needs, but equally important to consider those behind the scenes: the developers.

Maya, a skilled front-end developer specializing in CSS, approached me for assistance in updating our color system.

Despite the company’s previous color guidelines, Maya observed that they were not consistently followed. As our new product evolved daily, the color palette also changed frequently. Each new design iteration introduced additional colors to the palette, leaving Maya scratching her head. She wondered if each color was really necessary, but hesitated to question the designer.

The color palette looked like a disheveled sock drawer. 👇

This made both our jobs difficult. Myself, as the new designer in the company, had way too many greys to choose from, for example. With no documentation, it was nearly impossible to determine which one to use for, say, a card title. It was like trying to differentiate between identical twins wearing matching outfits.

Maya, on the other hand, struggled to assign the correct colors to UI elements. The colors seemed too similar to discern from one another, and their class names were confusing. She also expressed that if the designer handed something off with a hex number not represented in the palette, Maya would have to make the difficult choice of either replacing it with the nearest existing color, or adding the new hex to the palette.

This kind of decision-making made Maya anxious, and wished to have clearer handoff instructions, and a clear color palette to work with.

Giving our color system a fresh coat of paint

First, I isolated our existing primary brand colors

In order to stay faithful to our brand, I put them in a brand new file, and gave them a unique name.

Condensed similar colors into one

I consolidated the various shades of grey in the old palette into three options: Dark, medium, and light. I made the lighter shade less saturated, keeping in mind that it would be used on elements of low-emphasis.

I also made the executive decision to save only the primary shade of each color in our new palette. Any variations would be achieved through opacity percentages. This gave us an endless range of colors to choose from without sifting through an overwhelming palette.

Tested and refined the colors

To test my new color choices, I applied them to popular modules and adjusted them to work well across the product.

I also included the secondary colors used in special circumstances such as alerts. I tweaked them to make sure they fit with our brand’s image, promoting harmony, and balance.

Handing off the final Color System

After deciding on the right colors, I showed it to Maya, and explained to her that we could use percentages of colors instead of juggling hundreds of swatches. Her eyes widened with happiness as if she’d been presented with a box of chocolates.

Updating the product

With the new color system in place, Maya undertook the task of replacing the old colors with the new swatches through the entire product. To avoid confusion, I provided Maya with a document clearly labeling each color and its corresponding usage, and with it, fearlessly dove into the code to bring color harmony across the product.

Impact

By designing with the developer’s needs in mind, we created a product that was pleasing to both users and those master builders behind the scenes. Users benefited from a visually pleasing product, while developers appreciated being part of a team that listened to their needs and provided designs tailored to them. It’s a win-win.

Future

As the product continues to evolve, I’m sure new colors will join the party, and tweaks may be necessary. However, armed with a better understanding of developers’ coding needs, I will strive to minimize their stress by considering their requirements when updating the color system. Regular meetings and open communication with the developers will ensure that we make decisions that benefit both the user experience and our company culture.

A designer should be fully aware of the users needs, but equally important to consider those behind the scenes