Components

A capsule at every size. One filled button per form marks the next action; the rest step back.

A set of pressed-state buttons for choosing a view or a filter. Spacing 0 joins them into one segmented control.

A 44px field with an 8px corner. Invalid is a border state, and the focus ring is painted once, globally.

An immediate on/off. Its hit box reaches 44px on coarse pointers without the track growing.

A 4px-corner box for one of many choices. Indeterminate is a state of its own, never a styling trick.

A compact label. Status variants carry meaning and always travel with words; the brand tint marks a category.

A round portrait with initials as the fallback. A hairline keeps pale photos from dissolving into the card.

A key in the running text. Monospaced, quiet, and never a target of its own.

A tinted block for something the reader should know before going on. The icon partners the colour.

A measured bar with an optional label and value. Omit the value for indeterminate.

Pill tabs by default, a line variant for page sections. The list owns its own sideways scroll.

Where the page sits. The last crumb is the page itself and carries aria-current, not a link.