← All palettes
Nature · No. 07

Mountain

Granite grey, snow-white text and glacial teal. Clean alpine lines for modern sites.

dark coolmodernsteady
Get the tokens
The idea

Cool granite tones and glacier highlights. Slate containers frame content like carved rock, while glacial teal marks the path. Outfit’s geometric shapes echo ridgelines, and Inter keeps paragraphs clear and neutral.

Mode
Dark
Family
Nature
Good for
portfolio, startup, docs
Fonts
Outfit + Inter
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#EAEFEE on #2B303A
The quick brown fox jumps over the lazy dog
11.40:1
AAA
Headings on background#FFFFFF on #2B303A
The quick brown fox jumps over the lazy dog
13.24:1
AAA
Muted text on background#A3ADBB on #2B303A
The quick brown fox jumps over the lazy dog
5.83:1
AA
Links on background#8FD3D5 on #2B303A
The quick brown fox jumps over the lazy dog
7.84:1
AAA
Text on raised cards#EAEFEE on #363C48
The quick brown fox jumps over the lazy dog
9.53:1
AAA
Button label on accent#1C2027 on #78C2C4
The quick brown fox jumps over the lazy dog
8.02:1
AAA
Accent shapes on background#78C2C4 on #2B303A
The quick brown fox jumps over the lazy dog
6.50: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
Outfit

Small rooms full of light

Aa
Body
Inter

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

{}
Code
JetBrains Mono

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

In use

A page in Mountain

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

Mountain 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 = "mountain";
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.

/* Mountain: Granite grey, snow-white text and glacial teal. Clean alpine lines for modern sites. */
:root {
  --color-bg:          #2B303A;
  --color-bg-alt:      #363C48;
  --color-surface:     #232832;
  --color-text:        #EAEFEE;
  --color-heading:     #FFFFFF;
  --color-muted:       #A3ADBB;
  --color-accent:      #78C2C4;
  --color-accent-2:    #E8B27D;
  --color-link:        #8FD3D5;
  --color-border:      #454C59;
  --color-on-accent:   #1C2027;

  --font-heading: 'Outfit', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Consolas, monospace;
}