The grid.
A grid frames the field, divides it into columns, and crosses those columns with a baseline to make modules. Content keys to this structure, especially the hanging line. These standards apply across posters, reports, slides, and screens; each application fixes its own numbers.
- Structure
- margin · column · module
- Rhythm
- 8px baseline for running text
- Alignment
- the hanging line
- Canvases
- poster · report · slide · screen
The field & the margin
The margin frames the live field. It is active space, not leftover space. Set it in proportion to the format so the same decision holds across a portrait report, a landscape slide, or another canvas.
The column grid
The field divides into equal columns, separated by gutters. Columns are the ruler the whole page is measured against: text sets in them, images span them, space falls between them. The system's working grid is twelve columns, the least common multiple of 2, 3, and 4, so one grid serves every simple division without remainder. A finer grid than the content needs is noise; a grid the content can't sit on is worse.
The module
Columns give horizontal structure. Cross them with baseline rows to make modules. Images, captions, headings, and data each occupy whole groups of modules, keeping mixed content ordered.
The baseline
Running text sits on an 8px baseline grid, so lines of text align across columns whatever their content. At the reading size, type is set 16 on 24, so each line lands on a grid line and columns stay level with one another. Display headings can use their named leading values, and key baselines can still meet the composition without every line-height being divisible by eight. The baseline is the horizontal ruler to the column grid's vertical one; together they are the modular field.
Every line of text rests on the baseline grid. Reading copy is set at sixteen on twenty-four, so each line advances exactly one rhythm unit and columns of different content stay aligned, line for line. The quiet discipline behind a calm, ordered page.
The hanging line
Key headings, images, and captions to one shared edge. This hanging line is an Alix signature across fluid and fixed media. Each application defines where the line sits and how the wordmark relates to it; the composition then organises itself around that edge.
Proportion
For proportional compositions, start with halves, thirds, quarters, or the 2 : 1 asymmetry. Each is a clean grouping of twelve columns: six, four, three, or eight beside four. Applications may combine these proportions with fixed tracks or specialised grids when their medium requires it.
Halves
Two groups of six columns.
Thirds
Three groups of four.
Quarters
Four groups of three.
The two-thirds
Eight columns beside four. The one asymmetry, always 2 : 1.
Hierarchy
Every composition needs one clear first reading, with the other elements supporting to varying degrees. The dominant element may be type, data, or imagery. Order the elements by intent, then size and place them on the grid to match that order.
- 1Primary message or measureWhat must be understood first
- 2Supporting evidenceWhat proves or explains it
- 3Navigation and contextWhat locates the reader
- 4IdentityWhat signs the work
Composition
The same grid supports quiet, information-led pages and loud, expressive ones. Keep the structure and vary how much of the field the leading element occupies. White space is active material, not a gap to fill.
Misuse
The grid only works if the page is built on it: content keyed to the columns and margins, divisions taken from the grid's own groupings, one element leading.