← All palettes
Editorial · No. 04

Newsprint

Newspaper grey, heavy black headlines and a masthead red. Serious, sharp, unmistakably editorial.

light boldauthoritativeclassic
Get the tokens
The idea

A broadsheet translated to the screen. High-contrast Playfair Display headlines do the shouting, Source Serif 4 carries dense body copy comfortably, and a deep masthead red is used sparingly for links and section markers. White cards sit on a newsprint grey like clippings on a desk.

Mode
Light
Family
Editorial
Good for
magazine, news, essays
Fonts
Playfair Display + Source Serif 4
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#1C1C1C on #F5F3EE
The quick brown fox jumps over the lazy dog
15.37:1
AAA
Headings on background#0A0A0A on #F5F3EE
The quick brown fox jumps over the lazy dog
17.85:1
AAA
Muted text on background#5C5A55 on #F5F3EE
The quick brown fox jumps over the lazy dog
6.21:1
AA
Links on background#B3121B on #F5F3EE
The quick brown fox jumps over the lazy dog
6.27:1
AA
Text on raised cards#1C1C1C on #FFFFFF
The quick brown fox jumps over the lazy dog
17.04:1
AAA
Button label on accent#FFFFFF on #B3121B
The quick brown fox jumps over the lazy dog
6.96:1
AA
Accent shapes on background#B3121B on #F5F3EE
The quick brown fox jumps over the lazy dog
6.27: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
Playfair Display

Small rooms full of light

Aa
Body
Source Serif 4

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

{}
Code
JetBrains Mono

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

In use

A page in Newsprint

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

Newsprint Journal EssaysNotesAbout
bold · 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 = "newsprint";
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.

/* Newsprint: Newspaper grey, heavy black headlines and a masthead red. Serious, sharp, unmistakably editorial. */
:root {
  --color-bg:          #F5F3EE;
  --color-bg-alt:      #FFFFFF;
  --color-surface:     #ECE9E1;
  --color-text:        #1C1C1C;
  --color-heading:     #0A0A0A;
  --color-muted:       #5C5A55;
  --color-accent:      #B3121B;
  --color-accent-2:    #1D3B6E;
  --color-link:        #B3121B;
  --color-border:      #D9D5CC;
  --color-on-accent:   #FFFFFF;

  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Source Serif 4', Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Consolas, monospace;
}