Component sizing

Component heights and icon sizes are curated in UDTS, not formula-derived. The rungs are picked so each height pairs cleanly with a font from the type scale, an icon from the icon ladder, and tap-target requirements — and so each rung distinguishes visually from its neighbors at every density.

When to use

• Picking a height for a button, input, chip, badge, dropdown, or any other rectangular interactive control.
• Proposing a control-height 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). The ladder doesn't apply to single-surface designs.
• Non-rectangular controls (circular avatars, range thumbs) where the size is governed by the icon or asset, not a height token.

The curated ladders

UDTS ships three default density modes. Each is a 5-rung ladder labeled xs / sm / md / lg / xl — interactive rungs start at sm per the WCAG 2.5.8 floor (see spacing-system).