Every good design begins with a blank canvas. From paper to screen, frame to wall, a designer’s relationship with negative space informs everything about the design itself. Oftentimes, that negative space is white.
We tend to think of white as being neutral, but it’s actually quite powerful. It’s often the first color we see, staring us down at the start of every project. It draws focus, guides the eye, and brightens an image. Sometimes, it enhances the richness of surrounding tones. In most cases, it’s the glue holding everything in place.
This is especially true for illustration. Painters, cartoonists, and sketch artists often use white to inform an illustrative style. One technique in particular — common in Western and lighter-skinned cultures — is the use of the color white to represent skin tones (even when the subjects themselves aren’t necessarily white).
Using white to represent human skin isn’t new. By leaving skin “blank,” illustrators sidestep the need to discuss skin tone at all. With no color represented at all, a figure’s skin tone is left to the viewer’s imagination. This can be problematic. When “blankness” defaults to a background color, it can colonize a subject with the artist’s own point of view, a technique that has only increased in popularity over the years.
Why is white so popular today? We have some theories.
For one thing, it’s flexible. A simple illustration featuring black outlines and spacious white space can communicate a lot, quickly. Since white is produced by combining every color in the UV spectrum, it pairs well with virtually anything. Many forms of typography, photography, or video can be enhanced or accented with a smart use of white. No wonder it’s such a common tool for brand libraries today.
It’s also lightweight. With a few pops of color and strategic use of white, a complex image can be compressed to a small size and used across many channels with little lag. This goes back as far as the print industry itself, when expensive dyes and inks added to the overall cost of production. White, more than any other color, is cheap.
Finally, white is simple. It can enhance an already powerful visual style. Subtle lines, minimal color, and rich fills create an almost “unfinished” aesthetic. There is something in progress about this style, as if we’re watching the illustrator create the piece in real time. Like a pencil sketch, the bold use of line work against a white canvas reminds us what the color is all about. Potential. A clean slate.
Since the birth of Plaid’s design system, Threads, we’ve relied on the color white to build our illustrations. Like many companies, this technique informed our style and elevated our work. It added a visual simplicity to our brand system while helping tell the story of our products.
And while that served us well for a while, we knew that needed to change.
Plaid sits at the center of a very complex ecosystem. Between banks, fintechs, consumers, and developers, we’re in a unique position to influence an industry that touches everyone. How can we make the financial ecosystem serve our users, especially those who need it most?
Three times a year, we hold a hackathon called Plaiderdays. It’s an amazing event that gives time outside of our day-to-day to pursue projects focused on solving our industry’s toughest problems. In 2020, our first Plaiderdays was in June, in the midst of daily Black Lives Matter protests. While Plaid has always worked to create more access to the financial ecosystem, this time it felt especially important for the Plaiderdays theme to focus on financial inclusion and address systemic inequities.
As designers, we took the question of inclusivity to our design system. We revisited our color palette and illustration library and noticed something peculiar. Although we’ve always showcased diversity in our illustration library, something was missing. 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.
How did this happen? Prior to 2018, Plaid didn’t use any illustrations in its brand system. No depictions of human figures whatsoever. Instead, images of devices, diagrams, and icons took center stage. Despite the inherent tech-focused nature of our products, our work wasn’t centered only around the products themselves. We, as a company, exist to serve our end users: our customers, our partners, and the consumers who engage with the financial ecosystem on a daily basis. It became increasingly apparent that the humanity imbued in Plaid’s mission needed a spotlight. So when we rebranded, we put humans at the center of our work.
Good intentions don’t always translate to good results. While we assumed we depicted the diversity we wanted, we needed to speak to people who represent and champion diversity themselves. Our illustrations touch a diverse range of perspectives, including customers, consumers, institutions, and even employees. Reacquainting ourselves with a panel of users was the first step toward making the system even better.
We tested some formulas and engaged with our internal Plaid community groups (PCGs including: Plaids of Color, PLGBTQ+, and Women+), a cohort of employees within Plaid dedicated to fostering diversity and inclusion. We showed them our illustrations and asked them some tough questions. Do the illustrations feel authentic? Do they feel diverse? Do you feel represented and included? If you didn’t work at Plaid, how would these illustrations make you feel?
“There is a profound lack of representation in style,” an employee said. “One that speaks specifically to ethnicity and culture.”
“It’s not clear who these people are in relation to Plaid,” said someone else.
“I can’t tell what race they are. I feel like there’s a hesitation to fully embrace diversity.”
“I just want them to feel real. They don’t seem real.”
Our hunch was correct: the Threads illustration library wasn’t resonating. Even worse, it was alienating and reinforcing damaging normative standards, especially around whiteness.
The desire to represent real skin color was enticing. However, it wasn’t going to be as simple as choosing a spectrum of browns and introducing them to our brand palette. Skin tone is deeply personal. As humans, we have no control over our skin color at birth, and yet, it defines so much of how we’re treated in society. How do you build something that significant — that emotional — into a brand library?
Plaiderdays gave us the opportunity to tackle this issue head on. We quickly developed a few approaches as proof of concept, which we shared internally. The overwhelming response told us we were on to something. As the hackathon came to a close, we knew we couldn’t leave our existing illustrations to chance. They needed to evolve. The work was just getting started.
We began with a formula. Formulas can be useful when designing brand palettes. They help designers create scalable, balanced systems of color to easily slot into existing palettes. Moreover, using a formula can lift the responsibility from a designer and offer creative license to the greater powers of math and science. If a computer selects the color family, and it performs well, it must be right. Right?
We landed on this equation, where H, S, and B represent Hue, Saturation, and Brightness respectively, and the new brand color sits between Color 1 and Color 2 on the color spectrum:
H(Color NEW) = [H(Color 1)] — [H(Color 2)] / 2 + [H(Color 2)]
S(Color NEW) = [S(Color 1)] — [S(Color 2)] / 2 + [S(Color 2)]
B(Color NEW) = [B(Color 1)] — [B(Color 2)] / 2 + [B(Color 2)]
Color NEW = HSB(Color New)
By mapping the Hue, Saturation, and Brightness of our existing color palette, we were able to land on the perfect “orange,” a color fitting right in between our red and yellow primary values. Simply measure the distance between each HSB value of the Red and Yellow values and split the difference. Wa-la.
Once we selected our primary orange, it was easy to map the curves of its range. Our existing palette followed a loose logarithmic decay when measuring the dark and light values of each color family. It was simply a matter of adopting a similar pattern for our new orange. With that, we were able to produce an entire spectrum of browns, tans, and creams that could easily simulate a diverse palette of skin tones.
We placed them in our illustrations, and they worked. The colors balanced our surrounding palette. This seemed like a simple way to integrate new colors into an already carefully selected brand system.
But was it inclusive? There was an itch in the back of our minds, something small, that kept returning again and again in our conversations with PCGs. People seem to respond best to illustrations inspired by real people. With that in mind, was an algorithm really the best way to choose something as significant as skin color?
We decided to test a second approach.
We needed new material. Not math, or structure, or an existing brand palette. We needed something messier. Something real.
We looked toward photography. Photography easily captures real world skin and translates that color into pixels with mathematical values. What we see in a digital photograph represents real skin, translated digitally. Skin color in a photograph is not one value, but millions. Each pixel comes together to form the rich, nuanced tone, which our eyes “blend” to interpret as skin.
The next question was obvious. What photographs do we use?
We evaluated hundreds of images from the beauty industry, art projects, and scientific databases. Immediately, we had questions. How many photos should we use? Where on the face should we pull colors? How much does lighting, make-up, and post-production impact our experience with color? If we’re curating a diverse selection of images, how do we select those images with as much objectivity as possible? On top of all that, how do we account for representation when we add a third layer to the mix — the point of view of the photographer?
We chose to reference a recent batch of photos from Brandon Stanton’s Humans of New York (HONY) series, for a few reasons.
First, New York is arguably one of the most diverse cities in the world. Our sample pool would be large enough to represent as many skin tones as possible. Secondly, the photos felt less posed and more intimate than other sources we looked at, even HONY’s earlier stories. These were headshots–people were directly facing the camera — with their personal spaces in the background. Taken as part of HONY’s #quarantinestories while everyone was sheltered in place, the photos caught something raw and unembellished about our physical relationship to digital spaces. The images feel self-submitted, as many of them were likely taken on a laptop camera. And if they were, maybe these photos represented the way the subjects truly saw themselves?
We referenced 36 photographs from the feed. Using the eyedropper tool, we pulled a color value from the same location, between the eyes. We needed to narrow the 36 colors to 8 usable brand colors, so we grouped similar and identical tones together into categories and began averaging the variants using the blend tool in Illustrator. With a fairly meticulous process of blending and averaging, we were able to narrow the colors down to 8 working color values that “summed up” the overall pool.
The colors looked…the same?
In wanting to impose a method to the madness, we ended up with a supremely uniform spectrum of creams and tans. It was as if we’d blended all the skin tones in the world and found the mathematical middle. The perfect “beige.” The one human.
So we tried again.
This time, we used the blend tool to generate incremental color changes from our lightest and darkest sample colors. This produced a gradual gradient of color. Although it felt closer, this method intrinsically blended the Hue, Brightness, and Saturation of each color value, producing less variance than the photographs. The palette looked nice, but still didn’t feel “real.”
So we tried again.
One final technique did away with tools, averages, and gradients altogether. This time, we did everything manually. Making the choice to choose colors ourselves felt less objective at first, but as we went along, we saw the significance. A formula couldn’t capture the way we felt experiencing these photos. We could see things the computer couldn’t — the emotion behind the story itself. What were these photographs trying to say? It encouraged us as we pursued this messy, manual process.
At the end, we grouped all the colors we selected. Then, from that pool, we manually selected eight. We made slight edits to account for accessibility and contrast standards. We tweaked the values. And then we saved the palette.
After testing the two approaches — the formulaic one inspired by our brand palette, and the manual one inspired by photography — by showing them to our Plaid Community Groups (PCGs), a clear winner emerged. Our PCG members unanimously voted for the second approach. To them, the skin tones felt the most “real.”
Since then, we’ve updated all the illustrations in our library with the new skin tones and rolled out those assets across many touchpoints. It’s a wonderful first step, but we have a long way to go. Diversity is much more complicated than skin color. To honor true representation, we need to change the way we think about illustration in general.
We’ve made it our mission to begin rethinking the human form in our brand system while still honoring our illustration style. This year, we’re building an illustration library that accommodates more body types, gender expressions, religious and ethnic backgrounds, disabilities, and cultural contexts. We need to think about hairstyle and prop choice, body language and expression. We need to think about context and self-identity.
We learned a lot from this exercise. Here are four principles we took away:
- Rely on your community. Talk to people beyond your circle. Engage with your internal community groups and their networks. Listen, and ask them what representation means to them and their families. Ask what it means to you. Be vulnerable. Lead by example.
- Make the time for inclusive practices. We need to check our biases. Every project can be more inclusive. Make sure to allocate time, resources, and budget for evaluating products and brand systems from an inclusive lens. Bake in the time. It matters.
- Inclusivity is a process. How you select source imagery, who you test with, who builds and evaluates a product — all of it is determined by you. Think about each choice carefully. Diversity and inclusion starts with incremental steps that lead to a more impactful whole.
- Consider hierarchy. When it comes to representation, elevate minorities. Include those who wouldn’t normally be included first. Find ways to flip the norm and make a difference.
White is more than a color. It’s more than negative space and it’s more than blank space. It’s politics. It’s emotion. It’s representation. Think about every color you use in your brand system, and evaluate how it’s used.
We’d love to hear from you. How do we tackle the issue of skin color? How should we select color values? How many values is enough? When do we consider source? What issues arise when designers are asked to introduce skin color to their designs?
This method worked for us, but it may not work for everyone. As the industry keeps changing, and our brands keep growing, let’s work together to create a meaningful difference, one color at a time.