Expression
Composition
How a page is built: hierarchy, spacing, the single focal moment.
Every page has exactly one moment that is allowed to be big. Everything else steps down from it. The discipline is not in adding a strong element — it is in refusing to add a second one.
The hierarchy
| Level | What it is | How many |
|---|---|---|
| Focal | The one large statement — hero type, or a single image | One per page |
| Section | A heading plus its content block | As many as needed |
| Support | Cards, lists, tables inside a section | Grouped, never floating |
| Instrument | Mono labels, counts, timestamps | Quiet, at the edges |
Measure and rhythm
| Element | Value | Why |
|---|---|---|
| Reading measure | ~70 characters | Longer and the eye loses the line return. |
| Content column | max-w-3xl | The portal's own body column. Wider is not more generous, it is harder. |
| Section gap | 64px (2xl) | Enough that two sections never read as one. |
| Block gap inside a section | 24px (lg) | Related things stay visibly related. |
| Page top / bottom | 80px+ | The work needs air above and below it. |
A test that works
Rules
Do: Give the page one focal moment and let everything else be quiet.
Do: Align to a single left edge. The eye follows one line down the page.
Do: Use whitespace as the separator before reaching for a border.
Do: Keep related items in one visual group with tighter spacing than the gap around them.
Do not: Do not centre long-form text. Centre a headline at most.
Do not: Do not fill space because it is there. Empty space is doing work.
Do not: Do not use two accent elements in one view.
Do not: Do not box everything. A border should mean something is genuinely separate.