Extended Color Palette

[lokesh-krishna]

Issue type: feature

Description

Would you be interested in providing an extended palette of Nord colors apart from the present set of 16 that would work in harmony with them and could be used for other projects?

I am talking about additional colors or shades which would look at home in a Nord theme or setup.

[arcticicestudio]

Hi @lokesh-krishna 👋, thanks for your contribution 👍

The importance of limited colors

Building a color palette with limited number of colors ensures your design will make your project more consistent and conveys the feeling of being „made from one piece”. It's an important part for a uniform design and branding.
Colors should be handled like the font types you select for a project: limiting the number will make your design more consistent and less cluttered. Using more than 2-3 different font types will make your content look like a large glue-cluster and will disturb the overall UX and appearance.

Anyway, using a limited amount of color is just a guide and not a rule and you can use your chosen palettes to derive shades and some variants of it. This means the colors of your palette are the base colors and you can use functions to calculate some deviations, e.g. to use them for drop-shadows or many other UI elements.
Make sure to stick with one coloring strategy and use your colors consistently throughout your design. Don't mix up styles, e.g. don't use darker background colors and lighter elements on top to achieve elevation and layer effects and then use the complete opposite for another part of the project.

I'm a huge fan of the work of Steve Schoger, author of the awesome Refactoring UI book and a really experienced UI designer with many useful UI tip design tweets, YouTube videos and contributions to great projects like Tailwaind CSS. Nord's website is inspired by many of his tips and the guidelines from the book.

Next to all of this, Nord aims to be compatible to the 16-colorspace (0-15) of most terminal applications and shells so using more than 16 colors would break this.

You can learn more about the importance of limited colors, e.g. from Google's material Design Guidelines.

How you can still use more colors

Like described above, using a color palette with a limit number of colors doesn't mean you're hardly restricted to these 16 color values. You can derive shades for UI elements like drop-shadows using color calculation functions and Nord's color palettes as base.
Nord's website makes use of this for many UI elements. For example, there are shadow color that need to be shared across multiple components. Since the project is build with React using styled-components, the fantastic Polished library is used to calculate derivations.

When using Nord as base, you can derive all the colors you need in order to style your project.
Keep in mind that consistency is the key: As long as you stick to your coloring strategy, 16 base colors are way enough.
One example is Nord's „comment color brightness” topic: Since nord3 doesn't fit 100% for comments, we've derived as brighter color from it using nord3 as base in order to improve the UX for comments. The new color is not directly part of the palette, but the base color nord3 is.