← All palettes
Classic · No. 02

Dark

Charcoal canvas, soft white text and a warm coral spark. The Light palette after sunset.

dark calmmodernfocused
Get the tokens
The idea

Pure black is harsh on the eyes, so this palette starts from a deep charcoal and lifts cards one step lighter. Body text is a soft off-white rather than pure white to reduce glare, and a warm coral accent carries the Light palette’s personality into the dark.

Mode
Dark
Family
Classic
Good for
blog, portfolio, docs
Fonts
Libre Baskerville + Geist
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#E6E6E6 on #121316
The quick brown fox jumps over the lazy dog
14.88:1
AAA
Headings on background#FFFFFF on #121316
The quick brown fox jumps over the lazy dog
18.58:1
AAA
Muted text on background#A0A0A0 on #121316
The quick brown fox jumps over the lazy dog
7.10:1
AAA
Links on background#FF8A80 on #121316
The quick brown fox jumps over the lazy dog
8.14:1
AAA
Text on raised cards#E6E6E6 on #1B1C20
The quick brown fox jumps over the lazy dog
13.64:1
AAA
Button label on accent#121316 on #FF6A5F
The quick brown fox jumps over the lazy dog
6.62:1
AA
Accent shapes on background#FF6A5F on #121316
The quick brown fox jumps over the lazy dog
6.62: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
Libre Baskerville

Small rooms full of light

Aa
Body
Geist

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

{}
Code
Geist Mono

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

In use

A page in Dark

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

Dark Journal EssaysNotesAbout
calm · 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 = "dark";
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.

/* Dark: Charcoal canvas, soft white text and a warm coral spark. The Light palette after sunset. */
:root {
  --color-bg:          #121316;
  --color-bg-alt:      #1B1C20;
  --color-surface:     #0D0E10;
  --color-text:        #E6E6E6;
  --color-heading:     #FFFFFF;
  --color-muted:       #A0A0A0;
  --color-accent:      #FF6A5F;
  --color-accent-2:    #7FB2FF;
  --color-link:        #FF8A80;
  --color-border:      #2C2D32;
  --color-on-accent:   #121316;

  --font-heading: 'Libre Baskerville', Georgia, serif;
  --font-body:    'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, Consolas, monospace;
}