Shadows

Elevation tokens for creating depth and visual hierarchy through shadows.

View current brand shadow values:

Shadow Scale

Small

--shadow-sm

Medium

--shadow-md

Large

--shadow-lg

Usage

1.card {
2  box-shadow: var(--shadow-sm);
3}
4
5.card:hover {
6  box-shadow: var(--shadow-md);
7}
8
9.modal {
10  box-shadow: var(--shadow-lg);
11}
12
13.dropdown {
14  box-shadow: var(--shadow-md);
15}

Guidelines

Token	Value	Use Case
`--shadow-sm`	0 1px 2px rgba(0,0,0,0.05)	Subtle elevation, cards at rest, inputs
`--shadow-md`	0 4px 6px rgba(0,0,0,0.1)	Hover states, dropdowns, popovers
`--shadow-lg`	0 10px 15px rgba(0,0,0,0.1)	Modals, dialogs, floating elements

Elevation Hierarchy

Use shadows consistently to indicate interactive states and element importance:

No shadow - Flat elements, backgrounds
Small - Cards, contained sections
Medium - Elevated interactive elements, hover states
Large - Overlay elements that float above content