Elevation & Shadows

Shadows and elevation are used to create depth and visual hierarchy in the interface. This section defines the standard shadow styles and elevation levels, helping to establish a sense of space and focus across components for a consistent user experience.

0 2px 8px 0 rgba(0,0,0,0.1)

shadow-100

0 4px 12px 0 rgba(0,0,0,0.2)

shadow-200

0 8px 24px 0 rgba(0,0,0,0.25)

shadow-300

0 0 0 2px rgba(210,194,255,0.7)

focus-ring

0 12px 32px 0 rgba(0,0,0,0.25)

shadow-400