# Sizing

## Purpose

Control heights, touch targets and fixed dimensions.

## Decisions

### Control heights and sizes

The rule is: control height = text line height + 2 × vertical padding. Buttons, text fields and icon buttons share the heights. Menu rows, tabs and text fields use the **Medium** height; a tag is always 24px.

| Size | Label / line | Control height | Vertical padding | Side padding | Icon |
|---|---|---|---|---|---|
| Small | 12px / 16px | **28px** (1.75× body) | 6px | 12px | 16px |
| Medium | 14px / 20px | **34px** (2.125× body) | 7px | 16px | 20px |
| Large | 16px / 24px | **40px** (2.5× body) | 8px | 20px | 24px |

The 8px gap between an icon and its label is the same at every size. Medium (34px) and its 7px padding sit slightly off the 4px grid. **Default size: Medium (34px)**.

**Mobile:** the same size scale as desktop, but each role moves up one size on mobile: a control that would be Small on desktop is Medium on mobile, and one that would be Medium is Large. This gives bigger tap targets without a separate scale. Large stays Large on mobile.

### Related decisions

- Text sizes: 12 / 14 / 16px (see [Typography](typography.md)).
- Spacing: 4px-based scale (see [Spacing](spacing.md)).
- Icon sizes: 16 / 20 / 24 / 32px (see [Iconography](iconography.md)).