Shadows

Six shadow tokens map to six elevation levels. Depth is not decoration — every shadow communicates that an element floats above the surface beneath it.

Elevation Scale

Small

shadow.sm

Subtle card lift, input fields

0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06)

Medium

shadow.md

Dropdowns, popovers

0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.06)

Large

shadow.lg

Floating panels, sheets

0 8px 32px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06)

Extra Large

shadow.xl

Modals, dialogs

0 16px 48px rgba(0,0,0,0.14), 0 8px 20px rgba(0,0,0,0.08)

Glass

shadow.glass

Frosted surfaces, sidebars, headers

0 0 0 1px rgba(0,0,0,0.06), 0 8px 32px rgba(0,0,0,0.08)

Glow

shadow.glow

Focused inputs, active brand elements

0 0 0 1px rgba(52,168,101,0.3), 0 0 20px rgba(52,168,101,0.15)

Token Reference

Token	Name	Use case
`shadow.sm`	Small	Subtle card lift, input fields
`shadow.md`	Medium	Dropdowns, popovers
`shadow.lg`	Large	Floating panels, sheets
`shadow.xl`	Extra Large	Modals, dialogs
`shadow.glass`	Glass	Frosted surfaces, sidebars, headers
`shadow.glow`	Glow	Focused inputs, active brand elements

Principles

Elevation communicates depth

Use larger shadows for elements that float further above the page. A tooltip sits higher than a card, and its shadow should say so.

One shadow per surface

Never stack multiple shadow tokens on the same element. If the built-in value isn't enough, reconsider whether the element needs to float at all.

Glow is for interaction

The glow shadow is brand-colored and reserved for focus states and active selections. It draws the eye — use it sparingly.