Skip to content

Why we print the grid on every page

A visible grid keeps a team honest about alignment. Here is how we use one from the first sketch to shipped code, and the three places we break it on purpose.

Every page we make carries faint vertical lines across its header. Clients ask about them in the first meeting, and the answer is always the same: they're there for us as much as for the reader.

1The lines settle arguments

Alignment arguments are expensive because they're arguments about feelings. "That caption looks off" is hard to answer. "That caption starts in column four and the text above starts in column three" is a fact, and facts end meetings.

When the grid is visible, everyone in the room can see the fact. In our studio reviews last year, we counted how long layout disagreements lasted before and after we started projecting the grid: the median fell from eleven minutes to three.1

If two things almost line up, they look like a mistake. If they line up exactly, they look like a decision.

2Twelve, eight, four

We use one grid for everything: twelve columns on a wide screen, eight on a tablet, four on a phone. The gutter grows with the screen, between 16 and 24 pixels, and the outer margin between 20 and 40.

ScreenColumnsGutterMargin
Under 640px416px20px
640 to 959px820px28px
960px and up1224px40px

Twelve is useful because it divides by two, three, four and six. Content can sit in halves, thirds or quarters without a new grid, and every one of those layouts still lands on the same lines.

3Content left, metadata right

Most of our pages split the same way. The thing you came to read sits in columns one to seven. The facts about it (dates, authors, sources, the spec of a project) sit in columns nine to twelve. Column eight stays empty.

Fig. 1. The open-data portal for Arden Water Board, where every chart's source sits in the right-hand columns.

The empty column matters more than it looks. It's the gap that tells the eye these are two different kinds of thing, without a box or a rule between them.

4Numbers need sources

The grid's other job is to make room for evidence. A giant figure is only honest with a source line under it, and the source line needs a place to go that isn't an afterthought.

So every figure we set has three parts, always in this order:

  1. The number, as large as its column allows.
  2. A caption that says what it counts, in a full sentence.
  3. A source: the dataset, the sample and the date.2

5Where we break it on purpose

Three things are allowed off the grid: the hanging quotation mark on a pull quote, the side bearing of a giant figure (we pull it left by about 5% of its size so the stem sits on the line), and the closing call to action, which runs edge to edge.

  • Each break is written into the system, so nobody breaks it by accident.
  • Anything else off the grid is a bug, and we file it as one.

The rule has held for nine years and about thirty projects. When a client's team takes the system over, the lines go with it, and in our experience that's the main reason the pages still line up a year later.3


  1. 1Halden review log, 212 layout discussions timed in 2024 and 2025. Back
  2. 2Studio Halden, figure and source guidelines, revision 6, May 2026. Back
  3. 3Follow-up reviews of 9 handed-over systems, 12 months after hand-over, 2021 to 2026. Back
01

All notes

Part of the Design Systems Library