Sizes and space

Control sizes

Sizes depend on the input device, not on the width of the screen.

Token	Pointer	Touch	Use
size.control.sm	28px	40px
size.control.md	36px	48px
size.control.lg	44px	56px
size.target-min	24px	48px	The smallest area that reacts to a press, whatever the control looks like.
size.switch.width	36px	52px
size.switch.height	20px	32px
size.checkbox	18px	24px	The box, not the pressable area.
size.list-row	40px	56px	The least height of a row in a list.
size.bar	48px	56px	Top bars and tab bars.
size.button-radius	10px	9999px	Buttons are rounded rectangles where a pointer is used.
size.icon.sm	16px	16px
size.icon.md	20px	20px	Icons beside text.
size.icon.lg	24px	24px	Icons that stand alone: tab bars, top bars.
size.avatar.sm	24px	24px
size.avatar.md	32px	32px
size.avatar.lg	40px	40px
size.badge	24px	24px	The height of a badge.
size.progress	8px	8px	The thickness of a progress bar.
size.spinner.sm	16px	16px
size.spinner.md	24px	24px
size.spinner.lg	32px	32px

Space

Token	Value	Use
space.1	4px
space.2	8px
space.3	12px
space.4	16px
space.5	20px
space.6	24px
space.8	32px
space.10	40px
space.12	48px
space.16	64px
space.0-5	2px
space.1-5	6px
space.2-5	10px

Radius

Token	Value	Use
radius.sm	6px	Small parts inside a control: badges, checkboxes.
radius.md	10px	Controls: buttons, fields.
radius.lg	16px	Containers: cards, dialogs.
radius.xl	24px	Surfaces that float free of the screen edges: sheets, floating bars.
radius.full	9999px	Pills and circles.

Border and focus

Token	Value	Use
border.width.thin	1px
border.width.thick	2px	Selected and invalid states that must not rely on color alone.
focus.width	2px	Focus ring thickness. WCAG 2.2 asks for an indicator at least 2px thick.
focus.offset	2px	Gap between a control and its focus ring, so the ring reads against the control’s own fill.