How this palette came about

One background

The page sits on #f5f4ed. It is a little darker than pure white and leans warm, so it looks like paper that has been around a while rather than a fresh sheet out of the printer.

Pure #ffffff reflects too much, especially on a phone. Darken it by four percent and push it slightly warm, and long reading gets noticeably easier. Almost nobody notices the change, but take it away and the whole page instantly looks cheap.

One pen colour

There is exactly one accent: #1b365d. Links, list markers, tags, the quote rule — all of it. Keep it under five percent of the page. Past that it stops being emphasis and becomes decoration.

Early on I wanted a second, warmer orange for tags. I tried it, and what happened was that the eye compared the two colours before it read the words. Removing it made the page clearer, not duller.

Four greys

Text uses four levels, all of them warm:

A fifth level is pointless. Nobody can tell #6b6a64 from #77766f; they just sense that the page is misaligned.

In the stylesheet

:root {
  --parchment: #f5f4ed;
  --ivory: #faf9f5;
  --near-black: #141413;
  --brand: #1b365d;
  --border: #e8e6dc;
}

body {
  background: var(--parchment);
  color: var(--near-black);
}

Six variables. Changing the theme means changing these six lines, not hunting through components.

Two weights

The serif ships in 400 and 500 only. No 700, and the browser is not allowed to fake one:

html {
  font-synthesis: none;
}

strong {
  font-weight: 500;
}

Synthetic bold smears the strokes together, especially in CJK glyphs. Better to underplay emphasis than to render it dirty.