Installation and Usage

Nord comes in many formats to cover a wide range of project types and tech stacks.
It's colors and palettes have especially been designed for UI elements and code syntax highlighting often found in projects build with web technologies like websites.

Installation

Since Nord if heavily used in web technology based projects, it's main installation method is therefore npm, the Node.js package manager.

Install and add it as production dependency by running npm from the command line:

npm install --save nord

If you're using yarn instead of npm run the following command:

yarn add nord

From Source

If you'd like to install Nord without npm or yarn you can use it from source by either downloading individual source files or cloning the repository.

Usage

Next to the available color swatches for your favorite applications, Nord is available in many module formats for various CSS preprocessors.

Sass

Sass is a mature, stable, and powerful professional grade CSS preprocessor and extension language.
Nord is available as SCSS syntax module that can be imported using the @import @-rule that extends the default CSS @import @-rule:

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

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

Please see the official Sass syntax documentation for more details about differences to the indented Sass syntax.

The Sass module provides all Nord colors as Sass variables from $nord0 to $nord15.

Less

Less is a dynamic CSS preprocessor and extension language that was influenced by Sass and has influenced the newer SCSS syntax.
Nord can be imported as Less module using the @import @-rule that extends the default CSS @import @-rule:

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

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

The Less module provides all Nord colors as Less variables from @nord0 to @nord15.

Stylus

Stylus is a dynamic CSS preprocessor and extension language that was influenced by Sass and Less.
Nord can be imported as Stylus module using the @import @-rule, which extends the default CSS @import @-rule, or the Stylus specific @require @-rule:

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

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

The Stylus module provides all Nord colors as Stylus variables from @nord0 to @nord15.

CSS

The CSS specification supports the definition of custom properties, often referred to as CSS variables, that contain specific values to be reused throughout a document.
They are set using custom property notation (e.g. --nord8: #88c0d0;) and are accessed using the CSS var() function (e.g. color: var(--nord8);).

Nord can be imported as CSS module using the CSS @import @-rule:

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

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

If you're using the PostCSS plugin postcss-import, Nord can be simply imported like any JavaScript module:

@import "nord";

The CSS module provides all Nord colors as variables --nord0 to --nord15 nested inside the :root element selector.

Source Code Documentation

The Sass module is documented using the SassDoc comment syntax, a documentation system to build pretty and powerful docs from Sass files, while the Less and Stylus modules are documented using the KSS comment syntax, a documentation syntax that is human readable, but just structured enough to be machine parsable.

Both SassDoc and KSS can be used to generate a static, fully styled HTML document from the source code. Please see the official SassDoc documentation on how to get started and the official KSS documentation on how to create styleguides for more details.