/07Grid
Gap-as-gridline construction is the default compartment method — §2 rule 1 of the brand law.
When to use
- Any time content is arranged in a regular grid of cells: cards, stats, table-like data
- As the default compartment method for a section, not an opt-in decoration
When not to use
- A single hairline between two stacked sections — use a plain Separator instead
- A free-form layout with no regular cell structure — use plain flex/block layout instead
Technique — live
1px gap over a hair-2-coloured parent, cells filled paper. Adjacent compartments share a single hairline — no floating cards, no doubled borders.
SECTOR01
SECTOR02
SECTOR03
SECTOR04
SECTOR05
SECTOR06
Calibration marks
Grid intersections can carry a small cross — one of the brand's own signature devices, reserved for compartments that should read as an instrument panel.
REGIONA1
REGIONA2
REGIONA3
REGIONB1
REGIONB2
REGIONB3
Breakpoints
Set explicitly at all three — no implicit fallback.
| Token | Value | Use for |
|---|---|---|
| mobile-max | 699px | Single column, stacked layout |
| tablet-max | 1099px | 2-column compartments |
| desktop-min | 1100px | Full grid, all columns active |
| content-max | 1340px | Outer content-width ceiling |
Usage
<Grid columns={3}> // 1px gap over a hair-2 parent, cells filled paper
<Cell/> <Cell/> <Cell/>
</Grid>
- Reserve visible guides for instrument-panel compartments; plain card lists can use an invisible grid instead
- Never nest more than one level deep — overlapping guides become noise