A Grammar of Restraint

Every interface is a sentence written in the grammar of its makers. The font has a tone. The spacing has a tempo. The colour has a temperature. The corner radius has an opinion about how serious the room intends to be. Most software is written in the grammar of the trade show: bright, urgent, and trying very hard to be liked. A small number of products are written in the grammar of the gallery, which is a much older and more difficult thing to compose. This essay is about the rules we set ourselves when we wrote REN, and why we wrote them in that grammar.

The discipline of restraint, in interface design, is not the same as minimalism. Minimalism is a style. Restraint is a posture. A minimal interface can still shout, if its shouting is monochromatic. A restrained interface holds its volume even when nobody is watching. The distinction matters, because the second is much harder to keep up.

The Eight Rules

We work to a small number of fixed rules. They are written down because the temptation to break them is constant.

The first is the typeface. We use Playfair Display for headlines, names, and the few places where the page is allowed to declare itself, and Inter for the body and every interface label. There is no third typeface. There has never been a third typeface. The two have been chosen so that the serif carries the editorial weight and the sans carries the operating weight, and the difference between them does the work that a third typeface would have done badly.

The second is the colour. We work in three palettes only: the Light palette, in which the page is the warm off-white of a museum wall; the Lux palette, in which the page is the deep near-black of a cinema before the projector starts; and the Lights Out palette, in which the page is true black, designed for the OLED screens that punish anything else. There is no accent colour, no brand red, no link blue, no warning amber. A button is the same colour as the text. A focus ring is the same colour as the text. The colour palette is a moral position, and the position is that we will not buy attention with chroma.

The third is the spacing. Every measurement on the page is a multiple of eight. Eight, sixteen, twenty-four, thirty-two, forty-eight, sixty-four, ninety-six. Any spacing not on this scale will be visible to the eye as a wrongness, even if the eye cannot say why. The grid is the silent governor of every layout decision, and we let it govern.

The fourth is the corner. We allow four radii: zero, two, four, and eight. We do not allow pills. A pill button is the punctuation of an enthusiastic platform, and we are not enthusiastic. A four-pixel corner reads as engineered. A pill reads as desperate.

The fifth is the motion. Animations are between two hundred and three hundred milliseconds, and they ease out. There are no springs, no bounces, no elastic returns, no rubber bands, no overshoot. Motion is a way of telling a viewer that something has changed; it is not a place to perform. A spring animation, in our reading, is the design equivalent of an exclamation point.

The sixth is the punctuation. We do not use the em dash. We use the comma, the full stop, the colon, and the semicolon. The em dash is a typographer's convenience that has, in the era of the messaging app, become a tic. It announces interruption, and we do not interrupt. We finish the sentence and start the next one. The same logic governs the absence of the exclamation point and the asterisk and the parenthetical wink. Quiet writing demands quiet punctuation.

The seventh is the language. We default to British English, because the brand is built in London and the spelling carries a particular history of editorial restraint. We avoid the second-person sales tense. We do not write you will love this. We do not write your dream platform. We do not address the reader as if the reader were a buyer. The reader is a peer.

The eighth is the absence. The most aggressive design decisions we have made are decisions to leave things off the screen. There is no follower count on a profile. There is no like button on a photograph. There is no notification dot on a tab. There is no algorithmic feed. There is no trending list. The interface refuses to play the games the rest of the screen has agreed to play. This is the rule that took the longest to write down, because each absence had to be argued for individually and defended against the assumption that more is helpful.

Why the Rules Matter

A rule, properly formulated, is a way of removing a decision from the table. A designer who has decided in advance that no animation will overshoot does not have to deliberate about whether this particular animation should overshoot. The decision is gone. The energy that would have been spent on it is available for the things that actually require judgement.

This is the practical case for restraint. The decorative case is harder to articulate. It is something like the case for a uniform. A uniform does not flatten the person inside it; it isolates the person from the noise of clothing. A restrained interface does not flatten the work it presents; it isolates the work from the noise of the interface. The viewer is allowed to look at the photograph instead of looking at the chrome around the photograph. This is the gift the gallery has always given the work it hangs.

The rules also defend the brand against its own future weakness. There will be a meeting, in any company that survives long enough, in which someone will propose adding a primary colour to the buttons in order to lift conversion. There will be another meeting in which someone will propose softening the corners to feel friendlier. There will be a third meeting in which someone will propose a small notification dot on the inbox icon. These meetings will be reasonable. The case for each addition will be quantitative and persuasive. The rules exist so that the meetings end quickly.

What Restraint Sounds Like

If the visual language is the grammar, the writing is the literature, and the two have to agree. We write the way we design. The interface label is as composed as the headline. The error message is as edited as the marketing page. We do not say oops. We do not say something went wrong. We say what happened, in plain language, in the same tone the rest of the product uses. There is no separate voice for the moment something breaks, because the brand is the same brand whether it is working or not.

The same discipline runs through the email, the receipt, the legal page, the unsubscribe confirmation, and the small text under the form field. A platform that whispers in one place and shouts in another is a platform that does not yet know what it is. We knew what we wanted REN to be before we wrote the first line of CSS, and the rules above are the way we made the knowledge survive contact with the codebase.

The Whole of It

The grammar of restraint is the grammar of confidence. It is the posture of a product that does not need to convince the room. It assumes the room came to look. It declines the urgencies of growth-hacking, the brightness of conversion design, the small dishonesties of friendly chrome. It is, in interface terms, the cashmere coat without a label.

Every rule above can be broken by a single hurried decision. So we have written the rules down, and we read them back to ourselves before every release, and we hold the line.

That is the grammar.