A Design System and Product Design for NodeSource

What's the pattern?

Most of NodeSource's products start with the motif "N|"… yeah, a vertical bar (Pipe symbol). The names with "Solid|" are pricing plans.

Check out all their product logos below 👇🏻:

Name: N|Core

Obviously I had to use the "N|" motif somehow. And "Core" is a central system that everything else is built upon. That's how the name N|Core happened. Doh!

Below: Cover design for the Figma file and justification page for the name N|Core below 👇🏽:

Primitives & Tokens for Color and Typography, Numbers, and Modular Scale variables

With these variables in place, creating new components is like "pttt!", easy peasy.

Did you build this design system from scratch?

What! No way! I used the UI Prep Design System as a starting point. I got access to the full DS file after completing the Design System Bootcamp by Molly Hellmut. I completed this bootcamp on October 13, 2024.

Check out my certificate! lol.

Let's talk typography, will ya?

Note: I will use the term "typeface" and "font" interchangeably. I DO KNOW the difference, but for the sake of making this thing somewhat enjoyable to read for designers and non-designers… whatever, lol.

When I inherited the NodeSource project, I was given the Source Sans Pro typeface. RED FLAG! 🚩. Why?

1. Performance:
   • The user would have to download a file for each style. Yeah, right.
   • Because this font had to be served locally.
   • Multiple files: One file per style. 🤯
2. Headaches: That meant having to deal with TTF, OTF, and WOFF files. No thanks!

What a P.I.A. 🫏

So, I went to Google Fonts and lo and behold, there was the almighty Source Sans 3 🥳.

1. Performance:
   • Variable font: One file to download.
   • Served by Google. Way faster servers.
2. No headaches: Didn't have to deal with TTF, OTF, and WOFF files.

And for the monospaced font, NodeSource was already using Source Code Pro which is also on Google Fonts, lol. 👍🏽

Modular Scale, WTF is that?

A modular scale is a bunch of numbers/values that are harmonious with each other. These numbers can be used for typography, spacing, margins, line-heights, etc.

All the font sizes used in the N|Core Design System are based on a modular scale. Check out the modular scale here. If you're not familiar with a Modular Scale, that page is going to mean 💩.

Bro, why didn't you use the 8pt grid system?

Because:

1. Every single designer on the planet uses that damn 8pt grid system. It makes them feel warm inside and look cool in front of their bosses. That's stupid… even though, I admitedly, also feel warm inside when using it 😁.
2. The Modular Scale app provides all font sizes in em, which is much more useful for developers.

Or are you on the rem team? 😒… Bah, you don't even know what you're talking about, lol.

Aaaaaaaaaanyway, check out the screenshot for the Typography System from Figma below 👇🏽:

CodePen Demo

What the heck is happening in this demo?

1. As you shrink or enlarge the viewport, the font sizes change.
2. The font sizes are based on the Modular Scale, which keeps the harmony regardless of the viewport size.
3. This method uses the calc() function.
4. FYI, the clamp() function wasn't supported at the time 🤷🏽.

Let's talk colors, will ya?

When I inherited the NodeSource project, the client had 7 base colors defined. You can see them on the "Base Colors" column on the image below with white background.

After a 💩-ton of work, using all kinds of color creation tools and Figma plugins, the final color palette is shown below in the screenshot from Figma.

Why was it difficult to create the color palette?

Because:

1. As powerful as they may be, the Figma plugins do not consider accessibility. In other words, they can create shades that don't work with either White or Black text.
2. Most tools only create a Light mode ramp.
3. Some tools are unnecessarily complicated to use.
4. I ended editing each shade in each ramp manually to make sure they were accessible.

What tool did you use then?

Well, I went and built and designed the damn tool myself, lol.

Create accessible color ramps in less than 5 seconds, no BS: Color-Ramp.com

Friggin' Buttons, lol

144 buttons in total… damn, haha.

Although not all buttons are used (yet), they are ready when the moment comes. NodeSource has multiple products and with a design system like N|Core, supporting new products is easier.

Check out the buttons in Dark and Light modes below 👇🏽:

NodeSource's Flagship Product

Here is an example of the Dashboard table UI with selected rows.

The 2020 and 2024 Websites

I started working with NodeSource in 2020 and inherited an old website with serious accessibility and branding issues.

In 2024, I was asked: "Hay amigo Ricardo, we need to redesign the website. Are you down for the job?" Well, DOH! 😒 lol

AI with Midjourney

This is when I first started using Midjourney to generate images for the website. All icons and hero background textures were generated using Midjourney.

Check out the 2020 and 2024 websites below 👇🏽:

This is a very bare prototype I built to show the devs how the mobile menu should look and work.

As simple as this prototype is, multiple design decisions are happening here:

1. Interaction Design:
   • 40x40px target size of the hamburger menu button.
   • Slide-in navigation with a duration of 0.2s and ease-in-out timing function. In other words, the damn thing feels organic and responsive, haha.
   • Transforming the "3-line" icon to an "x" icon to clearly convey when the menu is open or closed. This also happens smoothly and quickly.
   • Dropdowns from main nav items are also smoothly animated.
   • For good measure, hover effects on menu and submenu items. This is also a visual cue when the link is tapped on a mobile device.
2. Accessibility:
   • All elements are accessible from a typography and color contrast perspective.
   • Hover effects on menu and submenu items.
3. Scalability: This structure uses the same menu used on the desktop version. One menu to rule them all! 🤣

Click on the hamburger icon in the prototype below 👇🏽:

Accessibility issues with the color off the bat! 🦇 (there is no baseball bat emoji, WTF, lol)

The original green #5AC878 the client provided was OK.

The problem was that the prior designs had white text over that green which failed accessibility with a contrast ratio of 2.1:1 - Minimum contrast ratio should be 4.5:1 for Normal size text.

I knew I needed to use black text over that green. But I went a step further and lightened up that green a little to make it "pop" (🤦🏽lol ) in Dark mode, and settled on #71D08B. The contrast ratio was excellent: 11.09:1 with dark text.

This adjustment was ideal for Dark mode, which is NodeSource’s default theme.

Retaining branding identity

To get to the new green #71D08B, I edited the Lightness in the HSL color space of the original green #5AC878 from 57% to 63%. It was light enough while retaining the same Hue and Saturation of the original green 👍🏽.

Branding improvement FTW! 🙂