Patterns

Recurring states solved once. If a screen needs one of these, it uses the pattern; it does not invent a variant.

Interaction ground rules

• Every clickable element shows a pointer cursor.Buttons, links, interactive cards, all of them, no exceptions.
• Primary actions press down: a 0.98 scale on active, on every real button.
• Toasts go through one shim. A single queue, one visual, errors mapped to the danger role. No page raises its own notification style.

Selected

Selection is a background tint of the brand color on an unchanged border. A selected chip may go further and fill solid with inverted text.

Loading and error

• Loading: one spinner style, tinted with the brand text color, inheriting the current color inside buttons. No page invents its own loading style.
• Error: danger-colored text with an alert icon, inline where the failure happened. Errors never restyle to match the brand (see Tokens).

Stepper

Multi-step flows use a numbered rail plus a top progress bar: the rail names the steps, the bar shows global completion.

Cards

Bordered surfaces grouped with vertical spacing utilities, never margins baked into the card. See Surfaces for the border rules and the corner scale.