← All palettes
Nature · No. 06

Forest

Deep pine, misty sage and amber gold, like late sunlight breaking through a canopy.

dark earthycalmmysterious
Get the tokens
The idea

Everything here comes from a forest floor at dusk. The pine-green background is dark but never black, sage text feels like morning mist, and amber is the single shaft of sunlight. Cinzel’s carved Roman capitals give headings an old-world gravity, softened by Inter for body text.

Mode
Dark
Family
Nature
Good for
blog, travel, photography
Fonts
Cinzel + 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#E2E8E4 on #1A2421
The quick brown fox jumps over the lazy dog
12.82:1
AAA
Headings on background#F0F4F1 on #1A2421
The quick brown fox jumps over the lazy dog
14.35:1
AAA
Muted text on background#97A69E on #1A2421
The quick brown fox jumps over the lazy dog
6.27:1
AA
Links on background#EBB65A on #1A2421
The quick brown fox jumps over the lazy dog
8.63:1
AAA
Text on raised cards#E2E8E4 on #23302C
The quick brown fox jumps over the lazy dog
11.04:1
AAA
Button label on accent#1A2421 on #E5A93B
The quick brown fox jumps over the lazy dog
7.64:1
AAA
Accent shapes on background#E5A93B on #1A2421
The quick brown fox jumps over the lazy dog
7.64:1
AAA

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
Cinzel

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 = "forest"; // 0O 1lI =>

In use

A page in Forest

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

Forest Journal EssaysNotesAbout
earthy · 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 = "forest";
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.

/* Forest: Deep pine, misty sage and amber gold, like late sunlight breaking through a canopy. */
:root {
  --color-bg:          #1A2421;
  --color-bg-alt:      #23302C;
  --color-surface:     #15201C;
  --color-text:        #E2E8E4;
  --color-heading:     #F0F4F1;
  --color-muted:       #97A69E;
  --color-accent:      #E5A93B;
  --color-accent-2:    #8FBF9F;
  --color-link:        #EBB65A;
  --color-border:      #31443D;
  --color-on-accent:   #1A2421;

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