nordtheme/nord

★ 6,807SCSSAudience · designerComplexity · 1/5LicenseSetup · easy

Mindmap

mindmap
  root((nord))
    Color groups
      Polar Night darks
      Snow Storm lights
      Frost accent blues
      Aurora accent colors
    File formats
      CSS variables
      Sass SCSS
      LESS
      Design tool swatches
    Design tools
      Photoshop
      GIMP
      Inkscape
      Krita
    Ecosystem
      Editor themes
      Terminal themes
      Community ports

mindmap root((nord)) Color groups Polar Night darks Snow Storm lights Frost accent blues Aurora accent colors File formats CSS variables Sass SCSS LESS Design tool swatches Design tools Photoshop GIMP Inkscape Krita Ecosystem Editor themes Terminal themes Community ports

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Import the Nord CSS or Sass stylesheet into a web project and use the named color variables to style components consistently

USE CASE 2

Apply the Nord swatches in Photoshop, GIMP, or Inkscape to design UI mockups using the arctic color palette

USE CASE 3

Build a custom code editor or terminal theme that references Nord's 16 named colors as a consistent base

USE CASE 4

Create a dark-mode web interface using Nord Polar Night colors for backgrounds and Frost colors for interactive elements

Tech stack

SCSSCSSLESS

Getting it running

Difficulty · easy Time to first run · 5min

Code is Apache 2.0, use freely including commercially. Creative assets are Creative Commons BY-SA 4.0, share with attribution and the same license.

In plain English

Nord is a carefully designed color palette built around cool, muted shades of blue and grey inspired by arctic landscapes. It contains exactly sixteen colors, organized into four named groups: Polar Night (dark background tones), Snow Storm (light foreground tones), Frost (icy accent blues), and Aurora (soft accent colors covering green, yellow, orange, red, and purple). The colors are numbered nord0 through nord15, which makes them easy to reference consistently across different tools and platforms. The palette was created for code editors and terminal environments, where spending long hours looking at a screen makes eye comfort important. The dimmed, pastel quality of the colors reduces visual strain while still providing enough contrast to distinguish different parts of code at a glance. Beyond code editors, the same palette works for designing user interfaces and other software with a consistent visual style. Developers and designers can use Nord in several ways. There are stylesheet files for CSS and popular CSS preprocessors like Sass and LESS, so web projects can pull in the color values directly. There are also color swatch files for design tools including Adobe Photoshop, GIMP, Inkscape, and Krita, so graphic designers can apply the palette there as well. The repository serves as the base definition for a wider ecosystem. Community members have built Nord themes for text editors and IDEs including Vim, Atom, IntelliJ IDEA, Eclipse, Notepad++, and the Terminix terminal. Those are separate projects that reference this palette as their source of truth. Nord is licensed under Apache 2.0 for the code and Creative Commons BY-SA 4.0 for the creative assets.

Copy-paste prompts

Prompt 1

Import the Nord Sass stylesheet into my web project and show me which variables to use for background, text, links, and button colors in a dark-mode design

Prompt 2

I'm building a VS Code theme extension. Give me all 16 Nord hex values organized by their four named groups so I can assign them to token colors

Prompt 3

Which Nord colors should I use for background, foreground, primary accents, and error states in a dark-mode web app?

Prompt 4

Show me how to add the Nord palette to a Tailwind CSS config file by mapping the 16 colors to custom Tailwind color names

Open on GitHub → Explain another repo

← nordtheme on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.