← All palettes
Nature · No. 10

Arctic

Frosted white, slate ink and fjord blue. Nordic calm for product and documentation sites.

light coolminimalairy
Get the tokens
The idea

Pale ice-blue greys keep the page bright without the glare of pure white, slate text stays crisp, and a fjord blue does the work of links and buttons. Manrope is used for both headings and body, a single family that switches from friendly to formal through weight alone.

Mode
Light
Family
Nature
Good for
SaaS, docs, corporate
Fonts
Manrope
Colours

Eleven roles

Click any swatch to copy its hex code.

Accessibility

Contrast check

Worked out when the site is built, using the WCAG 2 formula.

Body text on background#1F2A37 on #F4F7FA
The quick brown fox jumps over the lazy dog
13.52:1
AAA
Headings on background#0F1A26 on #F4F7FA
The quick brown fox jumps over the lazy dog
16.33:1
AAA
Muted text on background#56657A on #F4F7FA
The quick brown fox jumps over the lazy dog
5.52:1
AA
Links on background#2563A6 on #F4F7FA
The quick brown fox jumps over the lazy dog
5.72:1
AA
Text on raised cards#1F2A37 on #FFFFFF
The quick brown fox jumps over the lazy dog
14.54:1
AAA
Button label on accent#FFFFFF on #2F6FB0
The quick brown fox jumps over the lazy dog
5.22:1
AA
Accent shapes on background#2F6FB0 on #F4F7FA
The quick brown fox jumps over the lazy dog
4.86:1
AA

AAA ≥ 7:1 and AA ≥ 4.5:1 for normal text. AA Large ≥ 3:1 is enough for large headings, icons and button shapes.

Typography

The font pairing

Every font is self-hosted, so pages load without calling a third-party font service.

Aa
Headings
Manrope

Small rooms full of light

Aa
Body
Manrope

Good body type disappears: you stop noticing letters and start reading the story they carry.

{}
Code
JetBrains Mono

const palette = "arctic"; // 0O 1lI =>

In use

A page in Arctic

Headings, links, quotes, code, buttons and cards together.

Arctic Journal EssaysNotesAbout
cool · 6 min read

What a colour remembers

14 October 2026 · by the editors

Colour is never just decoration. A background sets the temperature of a room before a single word is read, and an accent tells the eye where to go next. Choose them together and a site starts to feel like a place.

A palette is a promise about how a page will feel.
// apply the palette
const root = document.querySelector("html");
root.dataset.lbTheme = "arctic";
Subscribe Read the archive
Use it

Copy the tokens

Paste into your own project. The font names match the files listed on the Credits page.

/* Arctic: Frosted white, slate ink and fjord blue. Nordic calm for product and documentation sites. */
:root {
  --color-bg:          #F4F7FA;
  --color-bg-alt:      #FFFFFF;
  --color-surface:     #E8EEF4;
  --color-text:        #1F2A37;
  --color-heading:     #0F1A26;
  --color-muted:       #56657A;
  --color-accent:      #2F6FB0;
  --color-accent-2:    #2C8199;
  --color-link:        #2563A6;
  --color-border:      #D6DFE9;
  --color-on-accent:   #FFFFFF;

  --font-heading: 'Manrope', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Consolas, monospace;
}