A warm-gray design system

A design system is just a small set of decisions you refuse to relitigate. Here are mine, and why.

The palette

The site runs on one background, one text color, and one accent. Everything else is a tint of those.

:root {
  --background: 40 33% 98%;   /* #FAF9F6 warm cream */
  --foreground: 240 3% 11%;   /* #1C1C1E charcoal  */
  --accent: 0 75% 60%;        /* #E54B4B burgundy  */
  --code-bg: 20 12% 15%;      /* #2A2421 warm dark  */
}

The accent is the strictest rule on the whole site. It appears on heading links, on hover, and nowhere else. The moment you paint a border with it, it stops meaning anything.

Why warm, not neutral

Pure neutral gray reads as cold and corporate. Add four degrees of hue and the page reads as paper. That single change is the difference between a dashboard and an essay.

The type scale

I keep exactly four sizes in regular use, and a display size for the hero.

The 680px rule

maxWidth: {
  prose: '680px',
}

Beyond roughly 680px, the eye loses its place on the return sweep. A wider column does not hold more meaning — it only holds more fatigue.