Axes — tone · appearance · variant

Styling axes are named by what they mean, and the name is enforced — a metadata lint fails the build when an axis is misnamed. That's what makes the API predictable for humans and machine-checkable for agents: an agent never has to guess whether variant="danger" exists (it doesn't — color intent is always tone).

tone

Color intent

From the shared vocabulary neutral · brand · info · success · warning · danger · discovery (plus component-specific tones like Stat's positive/negative). Color intent is never expressed through an axis named variant.

<Badge tone="danger" />

appearance

Fill / surface treatment

How the color is applied to the surface: solid · soft · outline · ghost · subtle · framed, and friends.

<Alert tone="warning" appearance="soft" />

variant

Kind / structure

Reserved for structural axes — line|bar, arc|needle, dot|icon — not color or fill. The one exception is Button, whose variant is the action-emphasis (fill) axis; its color intent still lives on the orthogonal tone axis.

<Sparkline variant="bar" />

Every enum axis also reflects to a matching data-<axis> attribute (data-tone, data-appearance, data-variant) so styling and testing can target semantics, not class soup. See it applied on any component page under Appearance — browse the roster →