Layout
A gallery hangs few works and gives each a wall. Pages do the same: one idea per view, an index margin on the left, and space that is planned rather than left over.
Grid and widths
Twelve columns inside a 1440 px page. The first three columns are the index margin: section codes, labels and captions live there, and body copy starts at column four.
| Token | Value | Use |
|---|---|---|
--page-max | 90rem · 1440 px | Outer content width |
--gutter | 20 → 64 px | Page side margin, fluid |
--col-gap | 16 → 32 px | Column gap |
--measure | 66ch | Longest body line |
| Search and map views | Full bleed | Results are the one place the page width is released |
Spacing scale
A 4 px base with deliberate jumps. Small steps group; large steps separate. Nothing in between is allowed.
Section rhythm
Pages alternate density like rooms in a gallery: a full room, then a quiet one. Never two dense sections in a row; never more than one navy statement room per page.
- GalleryThe default room: white ground, index margin, generous space.
- PlasterThe alternate room, for plates, tables and comparisons.
- StatementRegistry Navy, one per page, for the single sentence the page exists to say, or the closing call to action.
- LedgerData at full width: search results, market tables. Ends with its source line.
- Spacing ruleMore space above a heading than below it; the page’s closing section is always anchored by a clear next step.
Editorial compositions
Five arrangements cover nearly every page. Each is asymmetric by default; centring is reserved for the single statement line.
Designed for each screen
Mobile is not a compressed desktop. Each range changes what the page prioritises, not just how wide it is.
| Range | Columns | What changes |
|---|---|---|
| Under 400 px | 4 | Single column; index margin becomes a line above the heading; tables scroll inside their frame; buttons go full width. |
| 400–767 px | 4 | Search is a bottom sheet over the map; list is default. Property facts wrap onto two lines, never truncate. |
| 768–1023 px | 8 | Two-up catalogue; plates and captions side by side; filters in a drawer. |
| 1024–1439 px | 12 | Index margin appears; split search list and map; filters inline. |
| 1440 px and up | 12 | Content stops at 1440; extra width becomes margin, except search, which keeps the map growing. |
- TouchEvery target at least 44 × 44 px with 8 px between neighbours.
- Thumb reachOn phones, primary actions for search and listing pages sit in a fixed bottom bar: Save, Share, Ask a question.
- ImagesResponsive sources at 480, 768, 1200 and 1800 widths with fixed aspect ratios, so nothing shifts as it loads.