Grid & Layout
A 12-column grid, a 4px spacing scale, and four breakpoints. The layout system is restrained on purpose — generous margins, single-rule containers, no shadows, no rounded corners.
Twelve columns, sixteen-pixel gutter
One grid for everything: web, print, decks. 12 columns lets us run halves, thirds, quarters, and sixths without fractional widths. Gutters are 16px on web, 4mm on print.
Five canonical splits
The grid composes a finite set of layouts. Get fluent in these five — they cover ~90% of pages, slides, and datasheet spreads.
A 4px scale
One scale governs every gap, padding, and margin. Multiples of 4 only — no off-grid values. Rhythm comes from consistency, not variety.
Four breakpoints
The grid stays at 12 columns; what changes is the margin, gutter, and which compositions collapse. Mobile first, always.
The page envelope
Generous side margins are non-negotiable. Daylight is part of the brand — it lets the type breathe and the rules sit clean.
Three working layouts
Composed from the grid, ready to use. Documentation site, marketing landing, datasheet.
Layout principles
Six rules that keep pages feeling like they came from the same hand.
Always on the grid
If it's measurable, it sits on the 12-column grid and the 4px scale. No off-grid spacing — ever.
Daylight first
Generous margins are part of the brand. Cramped pages read as urgent — we are not urgent.
One axis of variation
If columns vary, rows are uniform. If rows vary, columns are uniform. Don't fragment both at once.
No nested cards
A card inside a card is a maintenance trap. Use the grid to compose; don't decorate with surface stacking.
Rules over shadows
Surfaces are separated by 1px rules, never by drop-shadows or blur. Material, not chrome.
Square corners
Border-radius is 0. The aesthetic is engineered, not soft. Round corners belong to other systems.