Redesigning Nodejs.org: Part 2
Extended Color Palette Proposal
As we continue to explore the ground-up redesign of Nodejs.org, 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:
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
Color systems are exceptionally difficult to create from scratch. A lot of care goes in to crafting by-the-numbers perfect color curves for any given brand. So, rather than re-invent the wheel from scratch, I wanted to start by exploring the amazing array of open source color palettes floating around the internet, and see if any would make a suitable foundation for the Node.js brand. After a fairly exhaustive search of open source design systems, I discovered the amazing color work done by the designers over at Mineral UI.
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
Because of the very systematic process used by Mineral UI to create these supplemental colors, we have a very well defined model with which to create our own custom branded color verticals. By following a similar creative process, we can produce beautiful pallets in a way that adheres to the spirit of Node.js, while still meshing well with the rest of the color system.
Greens
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.
Grays
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.
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.
Next Steps
This extended color palette proposal still requires feedback and approval from the Node.js community, and there will probably be many small tweaks made between now and when/if it is adopted! This is just the first of many important foundational steps in fleshing out the relatively sparse Node.js design system and brand guidance before we really dive into the new visual design of the nodejs.org. Work and discussion is ongoing over in the Community Committee’s Website Redesign Initiative repo on Github, we hope to see you over there!
