Colors

Swatches

As mentioned before, Nord UI uses Nord colors. Nord consists sixteen colors, placed in four color palettes:

Polar Night

Polar Night is made up of four darker colors that are commonly used for base elements like backgrounds or text color in bright ambiance designs.

Snow Storm

Snow Storm is made up of three bright colors that are commonly used for text colors or base UI elements in bright ambiance designs.

Frost

Frost can be described as the heart palette of Nord, a group of four bluish colors that are commonly used for primary UI component and text highlighting and essential code syntax elements.

Aurora

Aurora consists of five colorful components reminiscent of the „Aurora borealis“, sometimes referred to as polar lights or northern lights.

For more details about colors, refer to Nord Theme Documents.

Color Variants

Nord UI uses six colors as it's color swatch. these are core colors that commonly been used in components. some components even have special modifier class to easily switch to one of these colors.

• Primary: suitable for many UI states.
• Secondary: suitable for many UI states and in combination with Primary color.
• Info: useful when showing information or noticing user.
• Success: indicates a successful operation.
• Warning: to warn user about something.
• Danger: indicates an error, failure operation or dangerous actions.

Using Color

It's easy to modify Nord UI components and other UI element using these colors. each color comes with two modifier class. one for textual content and one for background color.

If you've installed Nord UI using package managers (link NPM and Yarn), you need to manually import colors classes.

Import Path

Import following style(s) to include colors classes in your app:

• Base: nord-ui/dist/colors.css
• Dark Theme: none

Texts

Each color has a modifier class that ends with the color's name, prefixed by text-. for example, nord-3's class is text-nord3.

<span class="text-nord11">Using nord-11 to display this text</span>
copy

Also, core colors, can be accessed with both variant name and color name. e.g. the Primary is nord-7 and has both text-primary and text-nord7 classes.

See Example:

<p class="text-success">A successful message</p>
<p class="text-nord14">Another successful message</p>
copy

Backgrounds

Like textual content, we can change background-color property of an element using modifier class, except we'll use bg- prefix on class name.

<div class="card">
    <div class="card-body bg-primary">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
</div>
copy