Notes on a Quiet Interface

Most interfaces are loud because they are afraid. They are afraid you will not notice a button, or a promotion, or the fact that someone worked very hard on them. A quiet interface assumes you are intelligent and that you came for a reason.

Subtraction first

The most useful design question I know is not what should we add? but what can we take away before anyone misses it? Borders go first, then shadows, then the second typeface. What is left tends to be sturdier than you expect.

📐

The test. Remove an element. If nobody can tell you what broke, it was decoration.

Type does the work

A good serif at a generous size, set on a measure of about forty-two rems, will carry a page by itself. Everything around it — navigation, dates, captions — can then be set small, in a plain sans, and left alone. The contrast between the two voices is the whole layout.

One colour, used well

I like a single accent and a rule that it only ever means one thing: this is where to look, or where to go. Links, a dot, a focus ring. The moment it is also used for decoration it stops working.

A small piece of code

Quiet does not mean fiddly. Here is the whole of how I set up a hairline rule between list rows, using nothing but a custom property:

:root {
  --ink: #151515;
  --paper: #ffffff;
  --hairline: color-mix(in srgb, var(--ink) 10%, transparent);
}

.row {
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--hairline);
}

And a few lines of JavaScript to remember a reader's choice of light or dark, before the page paints:

const saved = localStorage.getItem('scheme');
const dark = matchMedia('(prefers-color-scheme: dark)').matches;

document.documentElement.dataset.theme =
  saved || (dark ? 'dark' : 'light');

Why not use a framework for this?

You can, and for large applications you probably should. For a page that is mostly words, every dependency is a promise to maintain something that is not the point. I would rather have forty lines I understand.

If you want to read more on the principles behind publishing without the noise, the Ghost homepage is a good place to start:

That is most of it. Quiet is not a style so much as a habit of asking what the reader needs next.