← All palettes
Nature · No. 09

Dune

Sun-baked sand, burnt sienna and desert sage. Warm, open and inviting.

light warmsunlitearthy
Get the tokens
The idea

Colours lifted from a desert afternoon: sand-coloured backgrounds, burnt sienna for links and buttons, and a dusty sage as the cooling second accent. DM Serif Display gives headings a soft, high-contrast elegance, and DM Sans pairs with it naturally.

Mode
Light
Family
Nature
Good for
travel, food, lifestyle
Fonts
DM Serif Display + DM Sans
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#3B2A1E on #F3E9D7
The quick brown fox jumps over the lazy dog
11.36:1
AAA
Headings on background#2E1F14 on #F3E9D7
The quick brown fox jumps over the lazy dog
13.20:1
AAA
Muted text on background#6B5845 on #F3E9D7
The quick brown fox jumps over the lazy dog
5.62:1
AA
Links on background#A04A17 on #F3E9D7
The quick brown fox jumps over the lazy dog
5.00:1
AA
Text on raised cards#3B2A1E on #FAF4E8
The quick brown fox jumps over the lazy dog
12.48:1
AAA
Button label on accent#FFF6EA on #B5541C
The quick brown fox jumps over the lazy dog
4.62:1
AA
Accent shapes on background#B5541C on #F3E9D7
The quick brown fox jumps over the lazy dog
4.11:1
AA Large

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
DM Serif Display

Small rooms full of light

Aa
Body
DM Sans

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

{}
Code
JetBrains Mono

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

In use

A page in Dune

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

Dune Journal EssaysNotesAbout
warm · 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 = "dune";
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.

/* Dune: Sun-baked sand, burnt sienna and desert sage. Warm, open and inviting. */
:root {
  --color-bg:          #F3E9D7;
  --color-bg-alt:      #FAF4E8;
  --color-surface:     #EADCC3;
  --color-text:        #3B2A1E;
  --color-heading:     #2E1F14;
  --color-muted:       #6B5845;
  --color-accent:      #B5541C;
  --color-accent-2:    #5E7A6E;
  --color-link:        #A04A17;
  --color-border:      #DCCAA8;
  --color-on-accent:   #FFF6EA;

  --font-heading: 'DM Serif Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Consolas, monospace;
}