foundations icon

Elevation

Elevation uses shadows and blurs for a layered effect that gives users a visual cue that an object or experience is “elevated” in priority or hierarchy.


Status

Documentation
PublishedElement can be used in production
PublishedElement can be used in production
Adobe XD
Adobe XD Kit
In backlogElement is in backlog
PublishedElement can be used in production

What's new

Elevation is a new foundation for the Dell Design System v2. The standards have been unified to create depth and shadow effects for components with differing spatial relationships.

Elevation values

Each elevation level produces a three-dimensional appearance to an object with shadows and blur spans applied. As the elevation levels increase from 1 to 4, the elevation level’s shadow and blur span increases along the X-axis and Y-axis. This increase in elevation level allows the object to achieve a three-dimensional appearance of more depth along the Z-axis. There are three different options for elevation positioning: left shadows, bottom shadows, and right shadows. See light positioning guidance

The design system offers 3 shadow positions: left, bottom, and right. Each has 4 levels of elevation, shown here from lowest to highest.
A: Elevation levels 1 through 4, showing left shadow treatment
B: Elevation levels 1 through 4, showing bottom shadow treatment
C: Elevation levels 1 through 4, showing right shadow treatment

The design system offers three shadow positions: left, bottom, and right. Each has four levels of elevation, shown here from lowest to highest.

A: Elevation levels 1 through 4, showing left shadow treatment
B: Elevation levels 1 through 4, showing bottom shadow treatment
C: Elevation levels 1 through 4, showing right shadow treatment

Elevation settings

While the UI kits will automatically contain the correct settings by level, it’s important to understand how those values are configured. Also note that when increasing elevation levels, the defined axes weight and blur increases.

X-axis: This is the offset of the drop shadow along the horizontal plane or X-axis, which controls the top and bottom shadow.

Y-axis: This is the offset of the drop shadow along the vertical plane or Y-axis, which controls the direction of the right and left shadows.

Blur: This adjusts the blur or feathering of the shadow color.

Spread: This adjusts the size of the shadow to represent the distance between the foreground and background.

Inner shadow: Inner shadows can be used to simulate depths to make something look sunken, for example. The shadow will be applied within the layer or object and is contained within the layer’s bounds.

Drop shadow: This shadow is applied to the outside of the layer, creating the illusion of three-dimensionality.

Usage

Elevation is commonly used to create distance between objects, to set the direction of a light source, to make objects stand out against a background, and to give more dimension to elements.

To distinguish between two levels of elevation

If there are two different levels of elevation in an experience, raise the elevation level on the highest-priority item to eliminate confusion and differentiate between surfaces.

Different levels of elevation should be layered to show contrast between design elements. Here, the modal notification is given a higher visual priority via a higher elevation level than the cards behind it.

Different levels of elevation should be layered to show contrast between design elements. Here, the modal notification is given a higher visual priority via a higher elevation level than the cards behind it.

For overlapping experiences

Elevation is commonly used with notifications that require user interaction or when backgrounds are the same color but don’t offer enough contrast. Adding more depth to objects helps prioritize that action above others.

To highlight the priority of this notification, this example uses elevation to draw the user's attention to that element and highlight its importance on the page.

To highlight the priority of this notification, this example uses elevation to draw the user’s attention to that element and highlight its importance on the page.

To distance objects or highlight motion

For some components, elevation is used for hover states, such as an accordion hover.

Elevation can form a part of an element's hover state in order to highlight a user's interaction with it more clearly.

Elevation can form a part of an element’s hover state in order to highlight a user’s interaction with it more clearly.

To show visual hierarchy

The higher an object is along the Z-axis, the more depth it will appear to have, helping users visually prioritize that element above others. Lowering the Z-axis value makes the object appear flatter.

Objects exist in a three-dimensional plane at different depths, represented here by the Y-axis. Each higher depth uses increased shadows to create four levels of elevation:
Elevation Level 1 in this diagram will appear to have the least amount of depth on a page because it falls lower on the Z-axis.
Elevation Level 2 is higher on the Z-axis, rising above Level 1.
Elevation Level 3 will fall between the highest level and the lowest levels of elevation.
Elevation Level 4 is highest on the Z-axis and will appear to have the most depth and dimension on a page.

Objects exist in a three-dimensional plane at different depths, represented here by the Y-axis. Each higher depth uses increased shadows to create four levels of elevation:

  1. Elevation Level 1 in this diagram will appear to have the least amount of depth on a page because it falls lower on the Z-axis.
  2. Elevation Level 2 is higher on the Z-axis, rising above Level 1.
  3. Elevation Level 3 will fall between the highest level and the lowest levels of elevation.
  4. Elevation Level 4 is highest on the Z-axis and will appear to have the most depth and dimension on a page.

Light position

The elevation direction is dictated by the component’s position. Make sure to choose one light source direction per screen or experience for consistency.

Left shadow: Light is cast from the right side and the shadow appears on the left side.

Left shadow: Light is cast from the right side and the shadow appears on the left side.

Bottom shadow: Light is cast from the top and the shadow appears on the bottom.

Bottom shadow: Light is cast from the top and the shadow appears on the bottom.

Right shadow: Light is cast from the left side and the shadow appears on the right side.

Right shadow: Light is cast from the left side and the shadow appears on the right side.

Choosing elevation

When deciding which elevation level to use, consider these best practices:

Narrow a user’s focus by increasing elevation
Users will focus more on objects that appear closer to the eye. If you want users to prioritize one action above others, increase the elevation level.

Choose an elevation that simulates real lighting
Ambient light requires a softer edge or less elevation, whereas more direct light would use a higher contrasting shadow or elevation level.

Don’t overuse elevation
Applying elevation to too many objects can lead to a poor experience that distracts the user. Use it sparingly.

Elevation color: light mode

ColorUse casesHexRGBA
Blue 900Shadow Light#002A58rgba(0, 42, 88, 0.08)

Accessibility

Don’t use a shadow for style only
Drop shadows or similar effects create confusion for sighted users when viewed alongside elevated elements, and should be avoided.

Storybook demos

Vanilla elevation demo

View the elevation demo and code in Vanilla.

Web Components elevation demo

View the elevation demo and code for Web Components.

React elevation demo

View the elevation demo and code in React.

Feedback