Elevation

Elevation tokens define depth in the Persona Design System (PDS). They use shadows to create hierarchy, helping users understand how surfaces relate to one another. Instead of manually applying box-shadow values, elevation tokens provide reusable references that keep depth consistent across components.

PDS defines three levels of elevation:

Each elevation level combines multiple shadow layers to create depth that feels cohesive across the system.

Use elevation tokens whenever you need to apply depth to a component. For example, a menu should reference the Low elevation token rather than a custom shadow. By applying tokens instead of hard-coded shadows, updates to depth values cascade system-wide, keeping the experience consistent and easier to maintain.

Elevation tokens are not only visual—they also reinforce interaction. Higher elevation draws more attention and communicates focus, while lower elevation supports lightweight, supporting surfaces.