Nord

<p align="center"> <a href="https://www.nordtheme.com" target="_blank"> <picture> <source srcset="https://raw.githubusercontent.com/nordtheme/assets/main/static/images/logos/heroes/logo-typography/dark/frostic/nord3/spaced.svg?sanitize=true" width="100%" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" /> <source srcset="https://raw.githubusercontent.com/nordtheme/assets/main/static/images/logos/heroes/logo-typography/light/frostic/nord6/spaced.svg?sanitize=true" width="100%" media="(prefers-color-scheme: dark)" /> <img src="https://raw.githubusercontent.com/nordtheme/assets/main/static/images/logos/heroes/logo-typography/dark/frostic/nord3/spaced.svg?sanitize=true" width="100%" /> </picture> </a> </p> <p align="center"> <a href="https://github.com/nordtheme/nord/releases/latest" target="_blank"> <img src="https://img.shields.io/github/release/nordtheme/nord.svg?style=flat-square&label=Release&logo=github&logoColor=eceff4&colorA=4c566a&colorB=88c0d0"/> </a> <a href="https://www.nordtheme.com/docs" target="_blank"> <img src="https://img.shields.io/github/release/nordtheme/nord.svg?style=flat-square&label=Docs&colorA=4c566a&colorB=88c0d0&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI%2BCiAgICA8cGF0aCBmaWxsPSIjZDhkZWU5IiBkPSJNMTMuNzQ2IDIuODEzYS42Ny42NyAwIDAgMC0uNTU5LS4xMzNMOCAzLjg0OGwtNS4xODgtMS4xOGEuNjY5LjY2OSAwIDAgMC0uNTcuMTMzLjY3Ny42NzcgMCAwIDAtLjI0Mi41MzF2OC4xMzNjLS4wMDguMzIuMjEuNTk4LjUyLjY2OGw1LjMzMiAxLjE5OWguMjk2bDUuMzMyLTEuMmEuNjY4LjY2OCAwIDAgMCAuNTItLjY2N1YzLjMzMmEuNjU5LjY1OSAwIDAgMC0uMjU0LS41MnpNMy4zMzIgNC4xNjhsNCAuODk4djYuNzY2bC00LS44OTh6bTkuMzM2IDYuNzY2bC00IC44OThWNS4wNjZsNC0uODk4em0wIDAiLz4KPC9zdmc%2BCg%3D%3D"/> </a> <a href="https://github.com/nordtheme/nord/blob/develop/changelog.md" target="_blank"> <img src="https://img.shields.io/github/release/nordtheme/nord.svg?style=flat-square&label=Changelog&logo=github&logoColor=eceff4&colorA=4c566a&colorB=88c0d0"/> </a> </p> <p align="center"> <a href="https://www.npmjs.com/package/nord" target="_blank"> <img src="https://img.shields.io/npm/v/nord.svg?style=flat-square&colorA=4c566a&colorB=88c0d0&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI2Q4ZGVlOSIgZD0iTTEyIDE0SDRhMiAyIDAgMCAxLTItMlY0YTIgMiAwIDAgMSAyLTJoOGEyIDIgMCAwIDEgMiAydjhhMiAyIDAgMCAxLTIgMnpNNCAzLjMzMkEuNjcuNjcgMCAwIDAgMy4zMzIgNHY4YzAgLjM2Ny4zLjY2OC42NjguNjY4aDhhLjY3LjY3IDAgMCAwIC42NjgtLjY2OFY0QS42Ny42NyAwIDAgMCAxMiAzLjMzMnptMCAwIi8+PHBhdGggZmlsbD0iI2Q4ZGVlOSIgZD0iTTggNmgyLjY2OHY2LjY2OEg4em0wIDAiLz48L3N2Zz4K" /> </a> <a href="https://www.npmjs.com/package/nord" target="_blank"> <img src="https://img.shields.io/npm/dt/nord.svg?style=flat-square&colorA=4c566a&colorB=88c0d0&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI2Q4ZGVlOSIgZD0iTTEyIDE0SDRhMiAyIDAgMCAxLTItMlY0YTIgMiAwIDAgMSAyLTJoOGEyIDIgMCAwIDEgMiAydjhhMiAyIDAgMCAxLTIgMnpNNCAzLjMzMkEuNjcuNjcgMCAwIDAgMy4zMzIgNHY4YzAgLjM2Ny4zLjY2OC42NjguNjY4aDhhLjY3LjY3IDAgMCAwIC42NjgtLjY2OFY0QS42Ny42NyAwIDAgMCAxMiAzLjMzMnptMCAwIi8+PHBhdGggZmlsbD0iI2Q4ZGVlOSIgZD0iTTggNmgyLjY2OHY2LjY2OEg4em0wIDAiLz48L3N2Zz4K" /> </a> </p> <p align="center"> <a href="https://github.com/svengreb/styleguide-javascript/releases/latest" target="_blank"> <img src="https://img.shields.io/github/release/svengreb/styleguide-javascript.svg?style=flat-square&label=JavaScript%20Style%20Guide&logoColor=eceff4&colorA=4c566a&colorB=88c0d0&logo=javascript" /> </a> <a href="https://github.com/svengreb/styleguide-markdown/releases/latest" target="_blank"> <img src="https://img.shields.io/github/release/svengreb/styleguide-markdown.svg?style=flat-square&label=Markdown%20Style%20Guide&colorA=4c566a&colorB=88c0d0&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOSIgaGVpZ2h0PSIzOSIgdmlld0JveD0iMCAwIDM5IDM5Ij48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNEOERFRTkiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMS41IDEuNWgzNnYzNmgtMzZ6Ii8%2BPHBhdGggZmlsbD0iI0Q4REVFOSIgZD0iTTIwLjY4MyAyNS42NTVsNS44NzItMTMuNDhoLjU2Nmw1Ljg3MyAxMy40OGgtMS45OTZsLTQuMTU5LTEwLjA1Ni00LjE2MSAxMC4wNTZoLTEuOTk1em0tMi42OTYgMGwtMTMuNDgtNS44NzJ2LS41NjZsMTMuNDgtNS44NzJ2MS45OTVMNy45MzEgMTkuNWwxMC4wNTYgNC4xNnoiLz48L3N2Zz4%3D" /> </a> <a href="https://github.com/svengreb/styleguide-git/releases/latest" target="_blank"> <img src="https://img.shields.io/github/release/svengreb/styleguide-git.svg?style=flat-square&label=Git%20Style%20Guide&logoColor=eceff4&colorA=4c566a&colorB=88c0d0&logo=git" /> </a> </p> <p align="center">An arctic, north-bluish color palette.</p> <p align="center">A total of sixteen, carefully selected, dimmed pastel colors for a eye-comfortable, but yet colorful ambiance.</p> <p align="center">Created for <strong>clear, uncluttered and elegant designs</strong> following a <strong>minimal and flat</strong> style pattern. For syntax highlighting it aims to ensure an <strong>undisturbed focus on important parts of the code</strong>, a <strong>good readability</strong> and a <strong>quick visual distinction</strong> between the different syntax elements.</p> <p align="center">Nord consists of four named color palettes providing different syntactic meanings and color effects for dark & bright ambiance designs.</p> <p align="center"> <a href="https://www.nordtheme.com/docs/colors-and-palettes" target="_blank"> <picture> <source srcset="https://raw.githubusercontent.com/nordtheme/assets/main/static/images/artworks/coloring/cards.svg?sanitize=true" width="100%" alt="Nord color palette cards" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" /> <img src="https://raw.githubusercontent.com/nordtheme/assets/main/static/images/artworks/coloring/cards.svg?sanitize=true" width="100%" alt="Nord color palette cards" /> </picture> </a> </p>

All colors are numbered from nord0 to nord15 where each palette contains a different amount of colors. The naming convention preserves the compatibility for terminal color schemes and allows an uncomplicated use as base for such.

Getting Started

Visit the [official website][17] to [learn all about Nord's colors and palettes][13] and how to [install and integrate Nord in your own projects][15] or use the [color swatches for your favorite applications][14].

Quick Start

Install Nord using [npm][18] or [yarn][19]:

# npm
npm install --save nord

# yarn
yarn add nord

Please see the complete [installation and usage guide][15] for more details.

Port Projects

Unify the appearance and usage experience for your favorite applications — from code editors, shell terminals to modern UIs and libraries.

Nord supports a broad and constantly growing spectrum that allows to [customize your daily tool stack][16].

<p align="center"> <a href="https://www.nordtheme.com/ports" target="_blank"> <picture> <source srcset="https://raw.githubusercontent.com/nordtheme/assets/main/static/images/artworks/ports/nordify.svg?sanitize=true" width="100%" alt="Nord port project illustration" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" /> <img src="https://raw.githubusercontent.com/nordtheme/assets/main/static/images/artworks/ports/nordify.svg?sanitize=true" width="100%" alt="Nord port project illustration" /> </picture> </a> </p>

Color Swatches

Next to the many ways of [integrating Nord into your project][15], all [color palettes of Nord][13] are also available in [various native color swatch formats][14].

Easily import Nord into macOS, Adobe products like Photoshop & Illustrator, GIMP/Krita/Inkscape and many more.

<p align="center"> <a href="https://www.nordtheme.com/docs/swatches" target="_blank"> <picture> <source srcset="https://raw.githubusercontent.com/nordtheme/assets/main/static/images/artworks/coloring/swatch_toolbar.svg?sanitize=true" width="100%" alt="Nord color swatch toolbox" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" /> <img src="https://raw.githubusercontent.com/nordtheme/assets/main/static/images/artworks/coloring/swatch_toolbar.svg?sanitize=true" width="100%" alt="Nord color swatch toolbox" /> </picture> </a> </p>

Contributing

Nord is an open source project and we love to receive contributions from the [community][12]!

There are many ways to contribute, from [writing- and improving documentation and tutorials][3], [reporting bugs][2], [submitting enhancement suggestions][4] that can be added to Nord by [submitting pull requests][8].

Please take a moment to read the full [contributing guide][11] to learn about the development process, the project's used [styleguides][9], [branch organization][1] and [versioning][10] model.

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

<p align="center"> <picture> <source srcset="https://raw.githubusercontent.com/nordtheme/assets/main/static/images/elements/separators/iceberg/footer/dark/spaced.svg?sanitize=true" width="100%" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" /> <source srcset="https://raw.githubusercontent.com/nordtheme/assets/main/static/images/elements/separators/iceberg/footer/light/spaced.svg?sanitize=true" width="100%" media="(prefers-color-scheme: dark)" /> <img src="https://raw.githubusercontent.com/nordtheme/assets/main/static/images/elements/separators/iceberg/footer/dark/spaced.svg?sanitize=true" width="100%" /> </picture> </p> <p align="center"> Copyright &copy; 2016-present <a href="https://www.svengre