All posts

September 3, 2026 · Design · 3 min read

Restraint is a design system.

One idea per screen, type doing the heavy lifting, and why our quietest pages took the longest to make.

0on0

By 0on0

Restraint is a design system graphic

Restraint is a design system.

Our homepage hero is one sentence. No badge row, no pill stack, no background video. Reduction is not the absence of design. It is design with nowhere to hide.

The reference we keep open

Locomotive keeps a tab open in our studio. The Montreal agency built its reputation on the same bet: few elements per viewport, typography carrying hierarchy, scale and rhythm replacing decoration. Their own writeup of the approach is blunt. The site focuses on typography, colors and thoughtful animation instead of imagery. A design breakdown of their current homepage puts it plainer: ruthless reduction, every word earning its place.

We borrowed the discipline, not the look. Our stack is different. Our type is Space Grotesk and Space Mono. Our palette is paper and ink. The principle survived the transplant: cut copy until it hurts, then cut once more.

What restraint looks like in practice

Three rules run every 0on0 layout.

One idea per section. The hero states what we are. Selected work shows the work. Services lists what we do. Nothing cross sells inside another section. When a client asks to add a testimonial slider to the hero, the answer is a second section or nothing.

Type does the heavy lifting. Our hierarchy is size, weight and spacing. H1 at 5xl to 7xl, tight tracking, 1.02 line height. Body at 15px with a 28px rhythm. Muted color for everything that is not the point. If a section needs an icon to be understood, the copy failed.

One CTA per screen. The hero gets a single pill plus a quiet text link. Service pages end with one estimate band. The footer closes with one action. Multiple equal buttons is a decision deferred to the visitor.

The parts we removed

The honest version of this article lists deletions. Our first homepage had all of these. None survived.

  • A DEV/DES badge row above the hero. It described us before we spoke.
  • An all caps statement with outlined stroke text. It shouted in a quiet room.
  • A marquee strip under the hero. Motion without a message.
  • Pill CTAs in every section. Three equal asks means zero asks.
  • Arrows on every link. Decoration that added noise to the scan path.

Each removal made the remaining elements work harder. The statement got bigger when the badge left. The single pill got more clicks when its siblings left. We did not A/B test our way here. We read the page out loud and deleted everything we mumbled through.

How to apply it without copying us

Steal the process, not the palette.

  1. Write the page as plain text first. No layout, no images. If the argument is unclear in text, layout will not save it.
  2. Design the hero with type only. No imagery until scale and weight carry the message alone.
  3. Count the asks per viewport. More than one means ranking them.
  4. Read every section header as a sentence with a period. "What we do." "What we stand by." If a header cannot end with a period, it is a label, not a thought.
  5. Remove one element the day before launch. The page will feel tighter and nobody will miss the piece.

What restraint costs

It costs time. A busy page can be finished in a day because every gap gets filled. A quiet page takes weeks because every remaining element gets argued about. Spacing, line breaks, the exact fifteen words under the headline. That arguing is the work. Our about page says it directly: we argue about the details so you do not have to.

It also costs nerve. A sparse page feels unfinished to stakeholders who equate density with value. The answer is not taste. It is mechanics. Fewer elements per viewport means each one lands with full weight. Locomotive proved it over fifteen years of client work. We are proving it on a smaller sample, one launch at a time.

Takeaways

  • Reduction is a system: one idea per section, type led hierarchy, one CTA per screen.
  • Design the hero in text first. Add imagery only after the words work.
  • List what you removed before launch. If the list is empty, you did not edit.
  • Quiet pages take longer. Budget the arguing time.

Sources: Locomotive agency site and project notes at locomotive.ca; Norrly design breakdown of locomotive.ca (July 2026); Communication Arts Webpick on Locomotive's type led approach.