Default
UI stateReady for interaction
Behavior / 04
Interaction foundations make every state, response, and transition understandable across keyboard, pointer, touch, and reduced-motion settings.
Every interactive control communicates availability, current input, and persistent choice without relying on color alone.
Ready for interaction
Signals pointer availability
Shows keyboard location
Confirms the current press
Persists a chosen state
Unavailable and not actionable
Focus follows a logical reading order and remains visually unmistakable.
Targets remain comfortable and reliable across precise and coarse input.
Use at least 44 × 44 px for primary touch targets. Keep destructive and adjacent actions separated so an imprecise tap cannot trigger the wrong outcome.
Match feedback strength to consequence and keep users oriented in the current workflow.
Validation and contextual guidance stay beside the relevant field.
Toasts confirm non-blocking outcomes and disappear without stealing focus.
Dialogs pause the workflow only when a decision is required.
Applied motion
Use restrained movement to clarify depth, action, and disclosure. These specimens are scoped to this page and stop moving when reduced motion is requested.
Layers travel at different restrained rates to communicate depth.
Participants need a clearer signal before committing a change.
Open a large, focused specimen to compare three parallax compositions and their recommended use.
Hover or focus to reveal lift, border emphasis, and directional intent.
Click or use Enter and Space to disclose supporting content.
Expansion keeps supporting detail nearby without making the initial scan dense. The trigger remains in place so context is preserved.
Animate height and opacity together, keep the duration brief, and return focus to a predictable location when content closes.
Motion explains change; it never delays work or becomes decoration.
State changes that must feel immediate.
Hover, focus, and compact control feedback.
Panels, menus, and small layout changes.
Larger spatial transitions that need orientation.