Layout & Grids
The grid is the tatami mat of the design.
Philosophy
The grid is the tatami mat of the design — a modular system that structures space without dictating content. Like asymmetry in Zen composition (Fukinsei), the most compelling layouts use the grid not to fill evenly but to create deliberate tension between occupied and empty zones. The empty column is as designed as the full one. The margin is ma.
Breakpoints
| Breakpoint | CSS Variable | Value | Columns | Margins | Gutters | Max Width |
|---|---|---|---|---|---|---|
| Mobile | --breakpoint-xs | 320px | 3 | 16px | 16px | Fluid |
| Tablet | --breakpoint-md | 768px | 6 | 32px | 24px | Fluid |
| Desktop | --breakpoint-xl | 1280px | 12 | 32px | 32px | 1440px |
| Wide | --breakpoint-3xl | 1800px | 12 | 32px | 32px | 1440px |
The 12-column grid is divisible by 2, 3, 4, and 6 — offering the flexibility to compose asymmetric layouts (e.g., a 5 + 7 split for the work section and a 3 + 9 for journal entries with labels in the narrow column).
Grid Overlay
Toggle between breakpoints to see how the column structure changes.
Composition Patterns
Asymmetric split (Fukinsei): Content occupies 7–9 columns; the remaining space is deliberate void. Labels sit in the narrow column, body text in the wide one.
Full-bleed moments (Datsuzoku): The Japanese poem strip breaks the grid entirely, edge to edge. This is the controlled exception — Datsuzoku — freedom from convention that makes the convention visible.
Centred minimal (Seijaku): Some pages use a centred column of 6–8 grid units maximum, surrounded by generous margins. The emptiness is the design.
The 4px Base Unit
Every measurement in the system snaps to multiples of 4px. The reason is optical and technical:
- Divisibility: 4 divides evenly into all common screen densities (1×, 1.5×, 2×, 3×). An 8px base forces larger jumps; 4px allows finer control.
- Scale harmony: 4px paired with a 12-column grid produces a consistent mathematical language — 4, 8, 12, 16, 24, 32, 48, 64, 96 — where each step has a clear relationship to the surrounding ones.
- Japanese influence: The ken (間) is the traditional Japanese modular unit for architecture. A base unit functions identically — the invisible module from which all visible structure grows.
Responsive Behavior
Convert all pixel values to rem. Use clamp() for fluid sizing. Use logical properties for all spacing.
--spacing-layout: clamp(1.5rem, 6.9375vw, 4.5rem); /* outer page margins */
--spacing-gap: clamp(1.5rem, 3.46875vw, 3rem); /* grid column gap */
--spacing-column: 6.9375vw; /* single grid column */