Elevation tokens

Elevation tokens define depth in the interface using consistent shadow values. In clinical environments, elevation helps visually distinguish layers without introducing distraction or visual clutter. These tokens are especially useful for layering elements like menus, dialogs, or surfaces with interactivity.

---

For designers

Elevation tokens are available in the clinical design system UI Kit as effects. These can be applied to components or frames to simulate depth. Each token/effect represents a specific shadow style aligned to our system’s hierarchy.

Guidance: Use lower elevations (shadow-1 or shadow-2) for most UI elements like cards, inputs, or containers. Reserve higher elevations (shadow-4 or shadow-5) for overlays such as modals, drawers, or floating panels. Avoid excessive elevation to maintain clarity and reduce cognitive load in clinical interfaces.

---

For developers

Use the following tokens to apply consistent elevation across components. These map directly to box-shadow values in code and inherit from the VADS token set.

Token	Box Shadow Value
$vacds-elevation-shadow-none	none
$vacds-elevation-shadow-1	0px 1px 4px 0px rgba(0, 0, 0, 0.1)
$vacds-elevation-shadow-2	0px 4px 8px 0px rgba(0, 0, 0, 0.1)
$vacds-elevation-shadow-3	0px 8px 16px 0px rgba(0, 0, 0, 0.1)
$vacds-elevation-shadow-4	0px 12px 24px 0px rgba(0, 0, 0, 0.1)
$vacds-elevation-shadow-5	0px 16px 32px 0px rgba(0, 0, 0, 0.1)

---

Elevation examples

$vacds-elevation-shadow-none
$vacds-elevation-shadow-1
$vacds-elevation-shadow-2
$vacds-elevation-shadow-3
$vacds-elevation-shadow-4
$vacds-elevation-shadow-5