# Overview

A graphic showing a rectangular layout tilted at 45 degrees, with each rectangle slightly elevated. Next to the layout are x, y, and z axes to indicate height, width and depth

# How designers create depth

Most digital interfaces are inherently flat—which is to say all objects within an interface are constrained by two spatial dimensions: width (x) and height (y). To add additional dimensionality designers must create an illusion of depth (z). While there are several techniques to achieve this, designers typically will use varying degrees of a drop shadow. The ranges of depth created are used to strengthen spatial relationships and provide additional interaction affordances.

While there are some parallels between an object's elevation and its z-index—specifically regarding overlapping content—the system chooses to not create dependencies between the two. The reasons are two-fold: 1) there are not enough tokenized elevation options to account for the wide range of z-index values, and 2) elevation may be applied to objects that are not intended to stack on top of or otherwise interfere with adjacent objects—forcing a z-index value in these cases could yield unpredictable results.

# Best practices

# Why designers chose to elevate interface objects

The shadow cast by an elevated object helps to communicate aspects of interactivity, order, and priority by drawing from real-world conventions. More specifically, designers use this implied sense of depth to:

A graphic showing content with a slightly elevated border with a standard pointer cursor nearby
Along with other attributes, convey an ability to be pressed.
A graphic showing two rectangles representing pieces of content. The left rectangle appears to be raised higher than the right rectangle because a link pointer is hovering over it
Respond to interaction by raising or lowering.
A graphic showing text next to elevated content on the right hand side
Focus a user's attention on a specific object.
A graphic showing a column of three identically sized rectangles with a grabber pointer over the first item. The first item appears to be elevated higher than the other two rectangles
Signal that an object can be moved across a surface.
A graphic showing two sets of three rectangles. The bottom set of rectangles appears to be elevated while the top three are not elevated
Visually separate dissimilar content or help group like items.
Graphic where the lower corner of a rectangle is superimposed over another rectangle
Create emphasize foreground and background relationships.

# Application

# Tokenized options

A graphic showing squares labeled 1 through 5 in ascending prominence
  1. Flat: cdr-prominence-height-flat
  2. Raised: cdr-prominence-height-raised
  3. Elevated: cdr-prominence-height-elevated
  4. Floating: cdr-prominence-height-floating
  5. Lifted: cdr-prominence-height-lifted

# When to use

  • Do use prominence to emphasize and respond to interaction or a change of state
  • Do use prominence to reinforce the hierarchy of a page
  • Do use a stronger prominence value for elements that overlap other areas of the UI

# When to use a different approach

  • Don't use prominence as the only means of conveying actionability
  • Don't rely solely on a drop shadow to meet accessibility contrast requirements
  • Don't elevate large proportions of the UI at the same time