Components

Shadows & Elevation

Shadows & elevation are crucial for creating a sense of depth and hierarchy within a flat digital interface. By systematically defining specific shadow values (e.g., blur, spread, offset, opacity) and associating them with distinct "elevation levels" (often represented as design tokens), the system visually communicates the stacking order and interactive potential of UI elements.
This consistent application guides user focus, indicating which elements are higher in priority or can be interacted with, thereby enhancing clarity and a realistic visual experience.

Shadows / Elevation - Penpot preview