← All palettes
Heritage · No. 15

Monsoon

Rain-cloud slate, paddy-field green and a flash of marigold. Kerala in June.

dark moodylushreflective
Get the tokens
The idea

The south-west monsoon arrives in Kerala every June: slate-grey skies, rain on red-tiled roofs, paddy fields so green they almost glow. The page is a rain-cloud slate, the accent is that electric paddy green, and marigold, from the flowers that survive every downpour, is the warm counterpoint. Fraunces headings bring a literary warmth.

Mode
Dark
Family
Heritage
Good for
blog, poetry, photography
Fonts
Fraunces + 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#DCE3E8 on #1B2228
The quick brown fox jumps over the lazy dog
12.40:1
AAA
Headings on background#F3F6F8 on #1B2228
The quick brown fox jumps over the lazy dog
14.81:1
AAA
Muted text on background#9AA8B3 on #1B2228
The quick brown fox jumps over the lazy dog
6.60:1
AA
Links on background#6FD3A3 on #1B2228
The quick brown fox jumps over the lazy dog
8.82:1
AAA
Text on raised cards#DCE3E8 on #232C33
The quick brown fox jumps over the lazy dog
10.95:1
AAA
Button label on accent#10171B on #4CC38A
The quick brown fox jumps over the lazy dog
8.17:1
AAA
Accent shapes on background#4CC38A on #1B2228
The quick brown fox jumps over the lazy dog
7.26: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
Fraunces

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

In use

A page in Monsoon

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

Monsoon Journal EssaysNotesAbout
moody · 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 = "monsoon";
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.

/* Monsoon: Rain-cloud slate, paddy-field green and a flash of marigold. Kerala in June. */
:root {
  --color-bg:          #1B2228;
  --color-bg-alt:      #232C33;
  --color-surface:     #151B20;
  --color-text:        #DCE3E8;
  --color-heading:     #F3F6F8;
  --color-muted:       #9AA8B3;
  --color-accent:      #4CC38A;
  --color-accent-2:    #F2C14E;
  --color-link:        #6FD3A3;
  --color-border:      #313D46;
  --color-on-accent:   #10171B;

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