CSS JavaScript
Clone or download
Latest commit 27a78e8 Feb 24, 2018
arcticicestudio Merge pull request #97 from lemmingz/bugfix/typo-css-description
Fix highlight typo in source code documentation descriptions

README.md


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 Palette Overview

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

  1. Polar Night nord0 - nord3
  2. Snow Storm nord4 - nord6
  3. Frost nord7 - nord10
  4. 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

Port Projects

Nord Alacritty

Nord Atom Syntax

Nord Atom UI

Nord Brackets

Nord Coda

Nord ConEmu

Nord dircolors

Nord Eclipse Syntax

Nord Emacs

Nord gedit

Nord GNOME Terminal

Nord Guake

Nord highlight.js

Nord Hyper

Nord iTerm2

Nord Java

Nord JetBrains Editor

Nord Konsole

Nord Mintty

Nord Notepad++

Nord PuTTY

Nord Slack

Nord Sublime Text

Nord Terminal.app

Nord Terminator

Nord Termite

Nord Tilix

Nord tmux

Nord Vim

Nord Visual Studio Code

Nord Xcode

Nord XFCE Terminal

Nord Xresources

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.

Copyright © 2016-present Arctic Ice Studio