Sizing
TokenHow sizes relate: icons to text, controls to each other, and the minimum target size.
Sizes are related to each other through a few shared tokens, so elements line up without manual tweaking.
Icon height matches the text line height
Icons render at --icon-size, which is --font-body × --leading-body. An icon therefore matches the line height of the text beside it and never needs resizing.
Inputs match button height for inline forms
Buttons, text inputs, selects and textareas share the same height (a --target-size minimum plus matching vertical padding), so they line up when combined on one row.
Labels align to the text line height
Labels and badges use the body line height, so they stay level with the text and controls around them.
Minimum target size
Every interactive control is at least --target-size (2.75rem) in both dimensions for comfortable, accessible tapping.