> ## Content Index
> Fetch the complete content index at: https://blogga.themesbykyle.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# Notes on a Quiet Interface
- URL: https://blogga.themesbykyle.com/notes-on-a-quiet-interface/
- Published: 2026-09-18T08:00:00.000Z
- Updated: 2026-10-17T14:34:10.000Z
- Description: Subtraction, one typeface doing most of the work, and a single colour used sparingly — a few principles I keep returning to when I make things for the screen.
- Author: Blogga Admin
- Tags: Craft

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:

```css
: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:

```javascript
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:

[Ghost: Independent technology for modern publishingBeautiful, modern publishing with newsletters and premium subscriptions built-in.GhostGhost Foundation![](https://blogga.themesbykyle.com/content/images/2026/10/blogga-demo-plinth.jpg)](https://ghost.org/?ref=blogga.themesbykyle.com)

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