Redesigning Part 2

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:

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

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.


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.


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 Work and discussion is ongoing over in the Community Committee’s Website Redesign Initiative repo on Github, we hope to see you over there!

 by the author.




LinkedIn’s UI Framework Ringleader

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Meet Agrippa, the React CLI for component generation

Algorithms: Insertion Sort in JavaScript

Pros and Cons of ReactJS

How to Build a Ticketing App Using Vue.js and Strapi

Let’s Build: A Recursive Tree with P5js

A recursively drawn tree on a hill.

Understanding the Angular Material define-palette SASS Function

2018 Goals — August Update

Analyzing PDF Files — A Deceitful Malware Specie

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
Adam Miller

Adam Miller

LinkedIn’s UI Framework Ringleader

More from Medium

Design system with GeneratePresss and GenerateBlocks: Responsive-Fluid Typography

An animated display of the flexible type in action, showing how the type scale shrinks and enlarges in size corresponding to viewport size changes.

User Experience Design in the midst, and aftermath of a category 5 typhoon

A picture of a car that is pinned down by a fallen tree

Axure Tutorial: Repeater Intermediate Tutorial — Dropdown Search

How to send push notifications in Webflow