Size
The physical footprint of a component — height, touch target, and padding scale.
Definition
Size controls the component's fixed footprint: height, touch target area, and the padding scale that defines its physical presence.
Size answers: how much space does this component occupy?
Values
| Value | Use |
|---|---|
xs | Extra compact — icon buttons, badges |
sm | Compact — toolbars, inline actions, dense tables |
md | Standard — forms, lists, content pages |
lg | Prominent — CTAs, onboarding |
xl | Maximum — marketing surfaces, hero elements |
Default: md
Why Not a Separate Density Dimension?
Earlier iterations of this model included a sixth dimension — Density — to control internal spacing independently of Size. In practice, this distinction created more confusion than clarity. When a component "felt too big," teams consistently reached for Size rather than Density, and the two dimensions correlated so strongly that maintaining them separately added complexity without meaningful flexibility.
This aligns with industry findings:
- Nathan Curtis (EightShapes): Density and size correlate strongly in practice — separating them yields diminishing returns for most systems.
- Material Design 3: Density adjustments are implemented as size reductions (smaller padding, shorter heights), not as an independent axis.
- Salt Design System (JP Morgan): Treats density as an environment-level setting (high / medium / low / touch) that adjusts component sizing globally, rather than a per-component dimension.
Size now absorbs the responsibility that Density was intended to fill. The xs through xl scale controls both the component's footprint and its internal spacing proportionally. For environment-level spacing adjustments (e.g., data-dense dashboards vs. content pages), use CSS custom properties or a layout context provider — not a per-component dimension.
Accessibility
Touch-safe minimum sizes should be enforced per size variant. Even the sm size must meet minimum interactive touch target requirements for the platform.