State & Affordance

Affordance attributes define how a component communicates interactivity to the user before they actually commit an action.

Stable layout with no hover lifts, outlines, or shadow emphasis. Use for components that are purely reference material rather than interaction traps.

Contains active form controls, settings toggles, or direct manipulation sliders. Tells the design system to prepare for local state changes.

A component that invites hover. Reveals deeper metadata, traces, or structural guidelines when activated by the pointer or focus.

Usually reserved for hero or primary navigation features. Anchors the page flow and provides a firm return point for the user.