Balanced split
Use for equal copy/media, paired comparisons, or two related work panes.
Layout, spacing, and splits
Gutters, max widths, split ratios, rails, full-width bands, stacks, and responsive collapse rules that stop downstream primitives from inventing page structure.
Production answer
Layout, spacing, and splits is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Primary CTAReview Layout, spacing, and splits states
Generative search brief
Layout, spacing, and splits: Gutters, max widths, split ratios, rails, full-width bands, stacks, and responsive collapse rules that stop downstream primitives from inventing page structure.
Layout contracts
The approved structural moves
These are the only default page and section structures. Product routes can compose them, but they should not create unrelated split ratios, hidden gutters, or isolated responsive behavior.
Primary split
Use when one side carries the decision and the other side carries proof or media.
Workbench split
Use for editor/canvas plus inspector, dense dashboards, and operational consoles.
Rail layout
Use for navigation, filters, file trees, command palettes, and inspector rails.
Full band
Use for full-width sections, heroes, CTAs, tables, and page-level state bands.
Responsive stack
Use below tablet width; content stacks before text, controls, or media squeeze.
Spacing rules
Rhythm that every section inherits
Page gutter
28px desktop, 18px mobile, inherited from the Shared DNA shell.
Section gap
Use space 7/8 for dense app routes and space 12+ for marketing bands.
Card gap
Use space 3/4 for internal card rhythm; do not invent local micro-grids.
Split collapse
All two-column splits collapse to one column before content overflows.
Rails
Rails keep fixed intent and flexible body; avoid nested scroll containers unless needed.
Full bleed
Full sections may fill width, but inner content still has a constrained readable line.