Every interface we create begins not on screen but on paper — a sheet of A2 cartridge divided into twelve equal columns with a gutter of 24 pixels. This is not a constraint. It is the foundation from which everything else is derived. The grid is not something the user ever sees. They experience it in the rhythm of the page, the intentional whitespace, the sense that every element has earned its position.
Why Twelve Columns
Twelve divides evenly by two, three, four, and six — giving you six different structural arrangements before you have decided on a single visual element. It is the most versatile grid available in two dimensions, and it underpins the most enduring print and digital layouts of the last century. We use it not because it is fashionable but because it works.
A layout that looks 'free' is usually operating on a very strict underlying grid. The asymmetry is deliberate, not accidental.
Asymmetry as a Design Decision
Our standard editorial treatment places primary content in columns one through eight, with secondary or contextual content beginning at column five and running through eleven. This deliberate overlap creates a sense of depth and narrative tension — the reader's eye is guided diagonally across the canvas rather than simply top-to-bottom.
The grid is not a cage. It is a rhythm. And like all good rhythm, its power comes from knowing exactly when to break it.
When the Grid Breaks
The rule of the grid is most powerful when broken with intention. A full-bleed image that violates the margins. A single headline that runs beyond the column into the gutter. These moments of rupture register as events precisely because the surrounding structure is so disciplined. Without the grid, the break means nothing.
- —Establish the grid before any visual decisions are made
- —Break the grid only once per composition — make it count
- —The gutter is breathing space, not dead space
- —All whitespace should be a multiple of the base unit (8px)
