Notes on Calm Interfaces

Most interfaces try to grab attention. A few don't. The ones that don't tend to share a small set of habits.

What "calm" usually means

• Backgrounds are tinted, not pure white.
• Body text is not pure black either.
• A single, desaturated accent, used sparingly.
• One sans-serif, set at a comfortable size with generous leading.
• Code blocks share the page's mood instead of fighting it.

A rule of thumb: if you remove the accent color entirely and the page still reads beautifully, the typography is doing its job.

Spacing does the work

Rhythm matters more than density. A short paragraph followed by a generous gap reads as intentional. A short paragraph followed by a tight gap reads as cramped.

The reading column wants to sit somewhere between 620 and 760 pixels. Wider columns force the eye to track too far between lines; narrower ones break the rhythm of long sentences.

Restraint with accents

:root {
  --accent: oklch(50% 0.1 265);
}
a {
  color: var(--accent);
}

That's the entire accent system on most calm sites. One token. One use. No gradients, no second hue, no "primary / secondary / tertiary" hierarchy.

Math still belongs

Equations look at home in a quiet layout when they're set in the same neutral palette as the prose:

When decoration approaches zero, the interface starts to feel like a notebook. That's usually the goal.