Plaid Color
The future of finance is bright.
-
For years, Plaid’s color palette relied on an minimal (though flexible) color system. This reinforced a recessive, less memorable brand, diluting its impact over time.
-
Plaid is an energetic company redefining the industry and breaking barriers. A modern color palette sends a clear message to our audience: we’re not just innovating the space, but guiding everyone through a constantly changing landscape.
-
A modern, digital-first color palette that grabs attention, elevates our customers, and guides our users through the complex fintech ecosystem.
-
Creative Director (Project Lead)
-
Ryan Smith (Design Systems), Jeremy Tribby (Design Technology)
When we think of branding, we often think of logos, typography, and artwork. This disparate elements form the backbone of a brand, the organs pumping life into the system. And yet, the piece holding all those elements together—the lifeblood that powers each element—is something far more understated.
Color can be (for better or worse) a brand’s most defining attribute. That’s because color is emotional, emotions are memorable. When we create a palette for a brand, it evokes a feeling…something that stays with us long after we’ve felt it.
Our original color palette, which traced back to the origins of Plaid, was designed to be simple and scalable.
Our original color palette relied on a toybox suite of primary colors that were easily accessible, but traditional in their simplicity. Our hero colors, black and white, used high contrast to communicate to our industry that anyone could build with Plaid. It’s a common suite we’ve seen in B2B tech companies for years. It can, also, be quite boring.
If we wanted to stand for financial progress, we needed a palette that pushed the status quo. Changed direction. Inspired. Radicalized. We needed to energize and innovate our new audience, while preserving the accessibility and usability of our existing palette.
For our new colors, we took inspiration from the iridescent security strips found on paper currency. The spectral, holographic light bouncing off this metal foil was designed to be difficult to replicate. It was currency’s original status symbol: a physical mark denoting safety against counterfeit production. By reclaiming these rainbow colors, we wanted to reflect an industry demanding constant change. With these new colors, we wanted to shift the focus on innovation, motivating our audience to follow our mission and contribute to that change. To break things. To build them anew.
Our hero color, Mint, was a hue we don’t see used often in branding. It stood apart from our competitors in tech as well as our financial and fintech partners and blended them together to make something new. To make the color, we took green, often used in finance, and mixed it with blue, a common hue found in tech representing opportunity and innovation. Together, we created a new teal hue, something with depth, a color that could change as often as we do while standing apart from other brands in our space. Mint is designed to remind our audience where we come from, but where we want to take the industry next.
The challenge with taking inspiration from iridescent strips, especially when it comes to color, is that bright, spectral foil is not an accessible family in the digital space. These colors were not designed to be legible—quite the opposite—and if we were going to reinvent our brand system, we needed a library of hues that could be easily leveraged across brand and product.
In certain contexts, bright, neon hues can vibrate on the page and cause eye strain, especially for the visually impaired.
I partnered with our Design Systems Lead to optimize this new color family and develop rules around accessibility. To select the color values, we opted for a firm balancing act—a singular curve that placed hue families equidistant from one another on the color graph while preserving the integrity of their energy: a consistent brightness and saturation value throughout.
An expanded palette leveraged a distinct formula that was part science (mathematical increments across HSB) and art (adjustments to individual values based on how they “felt” in concert with one another). The goal was to create a gradual step ladder where each hue was mathematically and visually similar across the spectrum, while preserving brand energy and product accessibility. In other words, the right values paired with the right “vibe.”
After we located these base values, we then tweaked the Brightness and Saturation to ensure that each value was accessible with itself using certain combinations. Because yellow, for example, requires a richer saturation to be accessible at the 400 level as say, purple, for example, this process required careful, individual attention for every hue. After balancing color formula with accessibility, our Design Systems Lead would test the values in product, finding edge cases where accessibility could be improved or altered.
Once we found a hue set that worked across brand and product, the final test became an exercise in brand strategy. Do these new values still feel connected to our mission? Our creative concept? Do they feel like they’re reinventing money while still standing for financial progress?
This step was more art than science. Color is a feeling, something that evokes emotion rather than pure function, and demands a holistic evaluation rather than relying on pure numbers or performance. That’s what made this process so tedious. We tweaked the colors again until they “felt” right, went back to our accessibility tests and color formula, then tweaked again. And again. And again.
Through this cyclical process, we got closer and closer to the outcome that felt right for us: a fully accessible color family that spoke to the mission of our brand, that could also be leverage for both brand and product. To create a library that worked for all people across the company, without altering values for teams or organizations, was one of the most difficult but rewarding parts of the rebrand.
By establishing hues that were mathematically similar, we were able to create a gradient family that did the same. This library added new depth to our color system, allowing Plaid’s brand to feel immersive as well as dynamic. Our gradients are fully accessible and a core feature across all Plaid surfaces, including marketing, web, and product.
We took a lot of inspiration from paper currency to design our gradients—with a twist. We wanted the system to not only reflect our ability to reinvent the way money looks and feels in the modern age, but plunge our audience into Plaid’s universe, filling the industry with light, color, and change. This affected everything in our brand, across all channels and mediums. When we shot our photography in studio, for example, we color matched our light and set to mimic the spectrum of hues we developed in-house.
Creating gradients that are accessible in a variety of use cases isn’t easy! Sometimes, micr-adjustments are needed for certain channels (like email).
The biggest takeaway? Every brand should begin with color. Color sits at the intersection of everything you build. It can be both a unifying force as well as a force multiplier, impacting the way your brand looks, feels, and even behaves in the real world.