The Force Design Spec / Shadows

Shadows

Elevation shadows for floating UI elements — modals, dropdowns, tooltips, and toasts. Do not use shadows on cards or content containers; use borders instead.

Elevation

--force-shadow-xs 0px 1px 2px 0px #00000014, 0px 0px 2px 0px #0000001a

Smallest elevation. Use for dropdown menus. Do NOT use on cards.

--force-shadow-sm 0px 2px 4px 0px #0000001a, 0px 0px 2px 0px #00000014

Small elevation. Use for popovers, select dropdowns.

--force-shadow-md 0px 4px 8px 0px #0000001a, 0px 0px 4px 0px #00000014

Medium elevation. Use for floating panels, persistent popovers.

--force-shadow-lg 0px 8px 16px 0px #0000001a, 0px 0px 8px 0px #00000014

Large elevation. Use for modals, drawers.

--force-shadow-xl 0px 16px 32px 0px #0000001f, 0px 0px 16px 0px #00000014

Largest elevation. Use for wizard panels, major overlays.

Focus Rings

--force-shadow-focus-ring 0px 0px 0px 3px #e0d0ff

Focus ring shadow using indigo-100. Apply alongside border.focus on keyboard focus. Do NOT use for hover states.

--force-shadow-focus-ring-error 0px 0px 0px 3px #f8d6da

Error focus ring shadow using cranberry-100. Apply on focused inputs with validation errors.