The Glacier colorscheme

Glacier is an extended version of Nord - a popular colorscheme that is typically used for syntax highlighting, but has since been adopted for modern minimal UIs.

Glacier was developed to be a bridge between Nord and Tailwind’s palettes, adding extra shades to support elegant light & dark themes for web UI.

Of couse, if you would prefer to simply use Nord as-is in Tailwind, we have a guide to adding the Nord theme to Tailwind’s palette of colors.

In essence, Glacier adds a few extra colors to the Nord theme, and it renames the colors to fit inline with the Tailwind color naming system for easier porting from Tailwind’s default gray scales. And while it’s not a direct 1:1 port to switch from a Tailwind grayscale to Glacier, it’s a good starting point.

Like Nord, the Glacier colorscheme is open and free to use under the MIT license.

Here is our Tailwind play implementation of Glacier, showing the palette.

Mapping Nord to Glacier

First, Glacier combines Nord’s Polar Night and Snow Storm into a single shade scheme. The single shade scheme diverges from Tailwind’s typical implementation slightly, as the Polar Night and Snow Storm colors can’t be interpolated whilst maintaining harmony throughout the palette. There are now five shades for each color, rather than 4 and 3 respectively.

glacier-50 through to glacier-400 are Snow Storm colors with 2 lighter color additions. Whereas glacier-500 through to glacier-900 are Polar Night with 1 darker color addition. Like Tailwind’s palettes, the lightest color is 50, and the darkest is 900.

Then, Nord’s Frost and Aurora colors become named colors instead of numbered ones for readability. There have been no color modifications or additions here as of yet.

Here’s a table mapping Glacier’s colors to Nord’s. The Nord Colors and Palettes doc outlines each of the Nord colors and their names if you need a reference.

Adding Glacier to Tailwind

Adding Glacier is simple. With Tailwind installed, you just need to extend Tailwind’s color palette in your tailwind.config.js file with the definitions of the Glacier colors:

module.exports = {
  theme: {
    extend: {
      colors: {
        'glacier': {
          '50': '#F6F7F8', 
          '100': '#F2F4F8', 
          '200': '#ECEFF4', 
          '300': '#E5E9F0', 
          '400': '#D8DEE9', 
          '500': '#4C566A', 
          '600': '#434C5E', 
          '700': '#3B4252', 
          '800': '#2E3440', 
          '900': '#242933',
          'bluegreen': '#8FBCBB',
          'cyan': '#88C0D0',
          'blue': '#81A1C1',
          'darkblue': '#5E81AC',
          'red': '#BF616A',
          'orange': '#D08770',
          'yellow': '#EBCB8B',
          'green': '#A3BE8C',
          'purple': '#B48EAD',
        }
      },
    },
  },
}

In a future blog post, we’ll detail some of the conventions for using Glacier effectively for building elegant web UIs. In the meantime, you’re welcome to explore our Tailwind components that utilize Glacier.