kotajacob/nord

An arctic, north-bluish color palette.

Created for the clean- and minimal flat design pattern to achieve a optimal focus and readability for code syntax highlighting and UI. It consists of a total of sixteen, carefully selected, dimmed pastel colors for a eye-comfortable, but yet colorful ambiance.

The color palette it divided into four named components to represent the different color effects.

Nord colors are numbered from nord0 to nord15 where each component contains a different amount of colors:

Polar Night nord0 - nord3
Snow Storm nord4 - nord6
Frost nord7 - nord10
Aurora nord11 - nord15

This naming convention allows an uncomplicated use for terminals and preserves the compatibility to similar projects like base16.

Getting Started

This documentation provides chapters to learn about the installation and usage of the CSS based modules as well as the the available native color swatch formats. It also includes a listing of all official port projects and component cards.

The development chapters contain information about the requirements, how to build the project and run the tests.

Nord is available in many formats and can be used with npm, by downloading individual source files or cloning the repository. The colors can be easily imported from the Sass, Less, Stylus and CSS modules as well as from various native color swatch formats.

The official port projects provide Nord for a wide range of applications, libraries, platforms and architectures.

Quick Start

Install Nord using npm:

npm install --save nord

Sass

@import "node_modules/nord/src/sass/nord.scss";

body {
  background-color: $nord0;
  color: $nord8;
}

Less

@import "node_modules/nord/src/lesscss/nord.less";

body {
  background-color: @nord0;
  color: @nord8;
}

Stylus

@import "node_modules/nord/src/stylus/nord.styl";

body {
  background-color: @nord0;
  color: @nord8;
}

CSS

@import "node_modules/nord/dist/nord.css";

body {
  background-color: var(--nord0);
  color: var(--nord8);
}

When using [postcss-import][gh-postcss-import] you can simply import the CSS file like any JavaScript module:

@import "nord";

When using the optimized Nord CSS module the import statement must be adjusted to match the path of the distributed file:

@import "node_modules/nord/dist/nord.css";

Color Swatches

.aco - Adobe Photoshop Palette
.ase - Adobe Swatch Exchange
.clr - macOS Color Palette
.gpa - Gpick Palette
.gpl - GIMP, Inkscape and Krita Palette
.mtl - Alias and WaveFront Material

Port Projects

Component Cards

Contributing

Read the contributing guide to learn about the development process and how to propose enhancement suggestions and report bugs, how to submit pull requests and the project's styleguides, branch organization and versioning model.

The guide also includes information about minimal, complete, and verifiable examples and other ways to contribute to the project like improving existing issues and giving feedback on issues and pull requests.

kotajacob / nord