Shadows
Shadow definitions used to create depth and visual hierarchy throughout the site.
Light Mode Shadows
shadow-sm (Subtle)
0 1px 2px rgba(0, 0, 0, 0.05) — Minimal shadow for slight elevation
shadow-md (Standard)
0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04) — Default shadow for cards and surfaces
shadow-lg (Prominent)
0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06) — Elevated shadows for modals and dropdowns
Dark Mode Shadows
Shadows in dark mode are more pronounced to create contrast against darker backgrounds.
shadow-sm (Subtle)
0 1px 2px rgba(0, 0, 0, 0.3)
shadow-md (Standard)
0 2px 8px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3)
shadow-lg (Prominent)
0 8px 32px rgba(0, 0, 0, 0.65), 0 2px 8px rgba(0, 0, 0, 0.4)
Usage Guidelines
shadow-sm for Subtle Elevation
Use on elements that need slight visual separation but should not draw attention. Examples: input fields, muted cards.
shadow-md as Default
Apply to most cards, surfaces, and interactive containers. This is the standard shadow for the design system.
shadow-lg for Focus
Use for modals, dropdowns, tooltips, and other elements that should appear above all other content.
Avoid Custom Shadows
Stick to the provided shadow scale. Custom shadows can break visual consistency and increase CSS bloat.