Shadows
Shadow definitions used to create depth and visual hierarchy throughout the site.
Light Mode Shadows
--shadow-sm
…
--shadow-md
…
--shadow-lg
…
Dark Mode Shadows
Shadows in dark mode are more pronounced to create contrast against darker backgrounds.
--shadow-sm
…
--shadow-md
…
--shadow-lg
…
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.