Redesigning Part 2

Extended Color Palette Proposal

Adam Miller
May 7, 2018 · 6 min read

As we continue to explore the ground-up redesign of, the team has found ourselves in need of a more versatile color palette that can better capture the depth and complexity of the Node.js project. Amazing work has already been done on the new site’s information architecture, wireframes and content creation, and we are just now laying the groundwork needed to dive in to the visual design phase of our redesign.

The current Node.js Visual Guidelines only define four basic brand colors — not even close to enough for an enterprise-quality design system! The new website will need more colorful UI affordances, updated illustrations and marketing, and the burgeoning Badges Working Group wants to provide a design spec for both the team and community to create Node.js stickers and badges.

To support all these initiatives, and other design-focused project yet to come, I would like to propose the Node.js Extended Color Palette:

Image for post
Image for post
Node.js Extended Color Palette Proposal

The extended color palette offers consumers designing for the Node.js brand an entire rainbow of colors to use that are guaranteed to play nice together. The colors chosen are vibrant, inviting, and playful, but exude an underlying sturdy and organized professionalism. The color ramps span from light pastel to rich dark tones, enabling the brand to convey a wide range of emotions, and our new gray palette has a slightly cool-green tint that nicely compliments the primary “Node.js Green” vertical. All colors are tested to be WCAG AA+ compliant with black or white content, and brightness values are largely synchronized horizontally across the system.

How To Build a New Foundation

Mineral UI’s approach to creating their exceptionally extensive color themes felt very close to how I wanted to approach the Node.js extended palette — and it shows in their results. The Mineral UI team’s themes are positioned much like Node.js’ core values — they feel vibrant and playful, but their very process-based approach to color choices give the color ramps a sturdy, professional and organized undertone.

Because of these convenient value alignments, and Mineral UI’s very generous Apache 2.0 license, the new proposed Node.js extended color system is largely based on a select sub-set of Mineral UI’s open source color ramps — specifically their red, orange, blue, purple and pink pallets. I selected these particular color verticals from the full Mineral UI colors variants to:

1. Not overwhelm the Node.js system with too many options — with these five ramps, our custom “brand” green, and custom gray spectrum, we have all the colors of the rainbow represented!

2. Avoid the many muted blues that Mineral UI provides us in spades — our supplemental colors will largely be used for illustrations and important UI elements in Node.js, the many blue hues are not necessary for our system’s needs and do not feel “on-brand.”

2. Remove the extra “matte” colors like dusk and slate that do not feel “on-brand” for Node.js.

However, we can’t just lift Mineral UI’s color system and call this task done. These supplemental colors of Mineral UI are well aligned with Node.js and can largely be used as-is, but the green and gray color verticals — particularly important as Node.js’ core brand colors — do not feel like Node.js. In order to deliver a truly “Node” color palette, we need to do some customization!

Making It Our Own


Image for post
Image for post

By using the existing Node.js brand colors as anchor points, we can plot out the ideal color ramp for a “Node.js Green” themed color ramp. After a few subjective tweaks to better align hues between brand colors, and to fit the new on-brand color ramp with the rest of the system’s WCAG color contrast compliance, we are left with an improved, on-brand, extended Node.js Green color ramp.


Image for post
Image for post

The grays provided by Mineral UI are tinted heavily blue and feel off-brand compared to Node.js’ primarily green theme and flatter grays. However, by contrast the existing Node.js brand gray feels old, dusty, and lacks the depth and warmth of a more tinted palette. To remedy this, we create a custom gray color vertical with a more on-brand muted green tint than the out-of-the-box Mineral UI gray ramp, and more depth/variance than Node.js’ existing gray, without abandoning the original Node.js ethos.

Image for post
Image for post

In order to create these internally consistent extended color palettes, the primary brand colors have been tweaked slightly to accommodate the updated color ramps, WCAG guidelines, and improve internal hue consistency.

These new brand colors intentionally keep the same feel and purpose of the original colors, but are more optimized for both how they work with each other, and with the rest of the system.

The updated brand colors are slightly less fluorescent and have a more “human” feel, without loosing the original vibrance. Like the rest of the system, the lighter color has a more pastel look, and the darks are given slightly more depth, allowing the brand to express a wider range of emotion. The overall color ramp between brand colors is more gentle and inviting, and the colors work with each other instead of fighting for attention.

When applied to the logo the difference is subtle, but noticeable. The more cooperative colors make for a smoother gradient effect in the hexagon, and the slightly more expressive palette leaves us with a warmer, cohesive, and more personable mark. Conveniently (and intentionally) the closest matching Pantone colors remain the same! This means only digital assets would need to be updated if these tweaked colors are rolled out.

Image for post
Image for post

Next Steps

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store