Understanding what elevation communicates

Elevation creates the illusion of depth in a flat interface by placing surfaces on different depth levels, often described as a virtual z axis. Elements that appear higher feel closer to the eye because shadows make them look lifted. This is why a raised card, a floating action button, or a modal immediately draws attention. Elevation helps users understand what is more important without relying on extra borders or colors.

Elevation is not only about static hierarchy. Many design systems also use it to communicate interaction. When an element lifts slightly on hover, focus, or drag, it signals that the surface is interactive and can be acted on. This feedback helps users understand what is clickable or movable. When elevation is misused, for example when cards look raised but are not interactive, it can create confusion and false expectations.

A design system brings structure to elevation by defining clear levels and rules. Each level has a specific purpose, from base surfaces to cards to temporary overlays and interaction states. With consistent shadow values, lighting direction, and usage guidelines, new components naturally align with existing ones. This prevents teams from inventing random shadows and keeps the interface predictable, even when many layers and interactions appear on the screen at the same time.^[1]