Elevation
Three shadow levels. Used to establish hierarchy, never to decorate. Shadows are tinted toward ink, not black, so they read as soft depth on sand.
Scale#
shadow-card
0 1px 2px rgba(26,26,46,0.04), 0 1px 1px rgba(26,26,46,0.03)--shadow-card
Default surface lift. Product cards, filter chips, brand cards at rest.
shadow-hover
0 10px 24px -8px rgba(26,26,46,0.12), 0 2px 6px rgba(26,26,46,0.05)--shadow-hover
Hover state for interactive cards. Pairs with a 1px upward translate.
shadow-modal
0 24px 48px -16px rgba(26,26,46,0.18)--shadow-modal
Overlays that need to feel decidedly above the page. Dialogs, dropdowns, tooltips.
Rules#
- Shadow is a semantic signal, not a texture. Use it only to establish layers. Two layers at the same elevation is a layout problem, not a shadow problem.
- Hover state always combines shadow and translate. A 1 px upward nudge +
shadow-hover. Shadow alone reads flat; translate alone reads twitchy. - Never stack shadows. If something feels undercooked, fix the contrast or the border — not the shadow.