← All palettes
Nature · No. 08

Ocean

Midnight navy, foam-white text, coral and lagoon teal. The open sea after dark.

dark deepvibrantfresh
Get the tokens
The idea

A deep-water navy keeps the page immersive, while two warm-and-cool accents, coral and lagoon teal, give products and calls to action somewhere to shine. Space Grotesk adds a technical, slightly quirky voice to headings, and DM Sans keeps body copy friendly.

Mode
Dark
Family
Nature
Good for
startup, product, portfolio
Fonts
Space Grotesk + 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#DCE8F2 on #0B1D2E
The quick brown fox jumps over the lazy dog
13.72:1
AAA
Headings on background#F2F8FC on #0B1D2E
The quick brown fox jumps over the lazy dog
15.95:1
AAA
Muted text on background#93AABF on #0B1D2E
The quick brown fox jumps over the lazy dog
7.11:1
AAA
Links on background#6CC4FF on #0B1D2E
The quick brown fox jumps over the lazy dog
8.93:1
AAA
Text on raised cards#DCE8F2 on #12293F
The quick brown fox jumps over the lazy dog
11.92:1
AAA
Button label on accent#0B1D2E on #FF7F66
The quick brown fox jumps over the lazy dog
6.90:1
AA
Accent shapes on background#FF7F66 on #0B1D2E
The quick brown fox jumps over the lazy dog
6.90: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
Space Grotesk

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

In use

A page in Ocean

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

Ocean Journal EssaysNotesAbout
deep · 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 = "ocean";
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.

/* Ocean: Midnight navy, foam-white text, coral and lagoon teal. The open sea after dark. */
:root {
  --color-bg:          #0B1D2E;
  --color-bg-alt:      #12293F;
  --color-surface:     #081624;
  --color-text:        #DCE8F2;
  --color-heading:     #F2F8FC;
  --color-muted:       #93AABF;
  --color-accent:      #FF7F66;
  --color-accent-2:    #4FD1C5;
  --color-link:        #6CC4FF;
  --color-border:      #1F3B57;
  --color-on-accent:   #0B1D2E;

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