Elevation

Elevation is a visual effect using shadows to make an element appear to float above the surface. It is reserved for UI that is truly floating — elements that appear temporarily above the main content.

Levels

There are two elevation levels:

Level	Token	Use case
Low	--eds-elevation-low	Tooltips, menus, popovers, autocomplete lists, snackbars
High	--eds-elevation-high	Dialogs, modals, drawers

Each level is composed of two shadow layers — a key shadow (directional, sharper) and an ambient shadow (diffuse, softer) — for a natural, grounded appearance.

Low elevation

--eds-elevation-low

High elevation

--eds-elevation-high

Low elevation

box-shadow: var(--eds-elevation-low);
/* 0px 1px 8px 0px rgba(0,0,0,0.2), 0px 4px 8px 3px rgba(0,0,0,0.12) */

High elevation

box-shadow: var(--eds-elevation-high);
/* 0px 4px 12px 0px rgba(0,0,0,0.2), 0px 12px 16px 6px rgba(0,0,0,0.12) */

Implementation in Figma

Elevation effect styles are available in both the Semantic and Dynamic libraries.

How to add

1. Locate the layer in the Layers Panel that needs elevation applied.
2. Locate the Design tab in the Inspector Panel.
3. Under the Effects section, open the Style library menu to view the elevation styles.
4. Choose Shadow/Low or Shadow/High depending on the use case.

Do's and Don'ts

Do

• Use elevation for UI that floats above the page (tooltips, menus, popovers, dialogs)
• Use --eds-elevation-low for small overlays near their trigger (menus, tooltips, snackbars)
• Use --eds-elevation-high for large overlays that take focus (dialogs, modals, drawers)
• Use borders to differentiate surfaces sitting on the canvas (cards, banners, nav bars)

Don't

• Add shadows to cards, banners, or navigation bars — use borders instead
• Use elevation on elements that are part of the normal document flow
• Mix elevation levels within the same layer of UI
• Use custom shadow values — always use the elevation tokens