Layout
Spacing rhythm, page skeleton, measure, and density.
Rule
Density is correctness on product surfaces. Calm comes from hierarchy, not from hiding records or padding every region equally. Brand surfaces use the same grid with more sectional space and long-form composition.
Align content left and to the baseline. Keep rhythm tight inside a group, wider between groups, and sectional between arguments. Prefer a hairline or tonal step over a card. Use a card only when the whole region is independently actionable or navigable.
Token contract
The grid is carried by spacing.sidebar, spacing.gutter, spacing.margin, and
spacing.page-max. Use spacing.xs and spacing.sm inside components,
spacing.lg between groups, and spacing.2xl through spacing.section between
sections. Reading width is spacing.reading-max. Controls use only
spacing.control-sm, spacing.control-md, or spacing.control-lg.
Correct example
A product page places a page header and one primary action above a ruled filter row and
a dense collection. Groups use distinct spacing levels, identifiers stay visible, and
the content width respects spacing.page-max.
Rejected example
A page centers every heading, wraps each paragraph in a card, applies identical padding to every region, and moves state details into hover content. The screen looks sparse because it removed information, not because it established hierarchy.
Reasoning
See the canonical page skeleton and collection patterns and the scene that chose the density.