A more inclusive design system

Three times a year, Plaid team members spend a few days outside of their day-to-day to build passion projects for our internal hackathon, Plaiderdays. Last summer, the theme was financial inclusion. At the heels of the Black Lives Matter movement, a group of designers decided to tackle this problem by asking the question, “How inclusive is our design system, really?”

Coming together, we rummaged through the foundation of our system and turned over the components we use everyday. One area gave us pause, an aspect of our system that felt fundamental to inclusivity as a whole. Color—seemingly simple, increasingly emotional, and the building block of an entire visual identity—kept coming up in conversation. After all, color is an integral part of how we see the world. It’s how we, as designers, represent everything…including ourselves.

Plaid’s brand palette is eclectic and bright, used sparingly to heighten our user’s understanding of complex products. We see this at work in our illustrations, where the humanity imbued in Plaid’s mission takes center stage. Here, people are the heroes—not devices. The style is elegant, simple, and lightweight, used to underscore the collaborative and creative nature of our products.

However, when we explored our illustration library with an inclusive lens, we noticed something problematic. None of our figures had skin color. The background of the screen and the page—the negative space between the outlines of hands, limbs, and faces—that color, inevitably, was white. White, as we know, is more than just a color.

We had some serious work to do.

Our illustrations needed skin tones, that much was clear. Yet adding color to a brand library isn’t as simple as dropping a few values into a computer program—especially when those colors were tied to something as emotional, personal, and political as skin tone. We set out to gather a diverse set of perspectives from our Community Groups, and what came out of these conversations was a desire for something real. Not just colors pulled from an algorithm or an existing brand system. Color inspired by real skin in the real world.

Through trial and error, we developed a method of color selection inspired by Brandon Stanton’s Humans of New York photo series. A manual process of eyedropping and adjusting colors took time, but it ultimately led to a more successful outcome. After Plaiderdays ended, we continued our conversations, iterated our design process (a few times!) and updated all the illustrations in our library with new skin tones. 

Our hope is that by creating a more inclusive design system, we can help tell more meaningful stories that are representative of everyone who engages with the financial ecosystem on a daily basis. You can learn more about our approach and process here.

The procedure was daunting and meticulous, but necessary to get right. Today, you can witness the new illustration library across our website, products, and marketing materials, with even more updated every day. This is only the beginning. We’re looking forward to building a more robust and inclusive illustration library in the years to come.

We’d love your feedback! How can we continue to make this better and more inclusive for all of us?