space.
spacing is one scale, used everywhere, and it is fluid: a component is measured against the box it sits in, not the window it happens to be shown through. that one decision is why a card looks the same nested in a sidebar as it does full width.
the scale
one geometric-ish ramp. you reach for a step, never a number, and the steps are far enough apart that two adjacent ones never read as a mistake.
00rem10.25rem20.5rem30.75rem41rem51.25rem61.5rem71.75rem82rem92.25rem102.5rem112.75rem123rem133.25rem143.5rem153.75rem164rem174.25rem184.5rem194.75rem205rem215.25rem225.5rem235.75rem246remcontainers, not viewports
the thing that breaks most layouts is sizing against the viewport. a hero built in vw looks right once, at the width it was drawn at, and wrong everywhere else it is placed. usva sizes against the container instead, in cqi, so a block carries its proportions wherever it lands.
font-size: clamp(2rem, 6cqi, 4rem);one column, clamped gutters
content is a single column with a comfortable measure, and the gutters that hold it are a clamp: they give ground on a phone and open up on a wide screen, without a single media query deciding where the breaks are. the layout bends; it does not snap.