Column patterns
Production uses columns sparingly. These are its two recurring patterns, with the grid-gap utility for the gutter. Helix switches columns on container width rather than viewport width.
Form fields — 1, then 2, then 3 columns
1
2
3
Navigation rail + content — in production an 18.4rem rail on the left, stacked below 992px
Main content (flex: 1)
Sidebar (w-64, fixed)
Section rhythm
Pages stack Section components inside section-flow, which puts --section-gap (4.8rem) between them and pads the page by --page-gutter (4rem). Seamless sections — background bands — butt up against each other with no gap.
--section-gap
0 gap
--section-gap
Constrained content (default)
Full-bleed background, constrained content
Layout tokens
| Token | Value | Use case |
|---|---|---|
| container-max | 144rem | Max content width — production sizes.max-width-main; the preferences footer bar is 144.3rem |
| page-gutter | 4rem | Page side padding — My Trips, Moai Club and preferences on mobile |
| section-gap | 4.8rem | Gap between page sections — preferences sectionGap default, Elite Club |
| grid-gap | 1.6rem | Column gutter — production’s most common gap, and its form-field grids |
| container-narrow | 70rem | Narrow content width — Helix only, no production equivalent |
| @sm | 480px | Container query — production breakpoint sm |
| @md | 768px | Container query — production breakpoint md (the sidebar switch) |
| @lg | 992px | Container query — production breakpoint lg (the main layout switch) |
| @xl | 1280px | Container query — production breakpoint xl |