Cognitive Affordance: Communicating Interactivity and Drag States

Shadows are functional signifiers that communicate tactile state changes:

• Rest State: Subtle Elevation 1 indicates the card is distinct from the background.
• Hover State: Transitioning from Elevation 1 to Elevation 2 (shadow extends downward as the card visually lifts toward the user) communicates clickability.
• Active / Pressed State: Shadow collapses down to Elevation 0, signaling the button has been physically depressed into the screen.
• Drag-and-Drop State: The card leaps to Elevation 4 with a deep, diffused shadow and slight rotation, confirming to the user that it is detached from the grid and mobile.