Component sizing principles

Component heights and icon sizes are curated, not formula-derived. A good ladder picks each height so it pairs cleanly with a font from the type scale, an icon from the icon set, and target-size requirements — and so each rung distinguishes visually from its neighbors. This skill names the universal principles; it is deliberately system-neutral. For one concrete instantiation — the per-density rung sets with their exact heights, fonts, and icon pairings — see udts-component-sizing-ladders.

When to use

• Picking a height for a button, input, chip, badge, dropdown, or any other rectangular interactive control.
• Proposing a control-height or icon-size ladder for a new density mode.
• Auditing one-off heights (h-7, h-9, h-11) drifting across a codebase.
• Code review: flag heights outside the curated ladder; propose the nearest curated rung with rationale.

When NOT to use

• One-off marketing CTAs designed for a specific page (e.g. hero buttons at 72 px). A ladder governs recurring controls, not single-surface designs.
• Non-rectangular controls (circular avatars, range thumbs) where the size is governed by the icon or asset, not a height token.

Ladders are curated, not formula-derived

A formula height → font-size → icon-size produces mathematically clean values that render poorly. Curate the rungs by hand instead, for three reasons: