Owned components. Shared anatomy.

Consider every
interaction.

Explore canonical families, then try their behavior. Every specimen uses synthetic data and the current mood.

Choose your moodBeige mood selected

Actions / Canonical family

Button

A clear action with a 10 px radius and a practical touch target.

Choose an action to see its feedback.

Use it with intention

Choose primary for the next action, secondary for a supporting action, and ghost for a quiet action.

Keyboard & accessibility

Use a specific action label. Expose disabled and loading states with native semantics.

States: default, hover, focus, disabled, loading, destructive

Subtle authored presentation; Base UI and native HTML behavior.