How many shadow variations are typically needed for a good elevation system?

TL;DR

  • Typically, three shadow variations are needed for an effective elevation system. This number ensures a clear progression in elevation, aiding in visual hierarchy and consistency across your designs.
  • You’ll use these different elevations to show how active an element is. The less active an element is, the lower the elevation. The more active an element is, the higher the elevation.

Detailed answer

By defining a fixed set of shadows, just as you would with color, typography, spacing, and sizing, you can streamline your workflow and ensure consistency across your designs.

Elements like toasts, cards, and menus need elevation to be noticeable. If these components lack elevation, they may appear as part of the background, leading users to overlook them and miss important interactions.

In establishing an effective elevation system, consistency and simplicity are key. 

Your interface needs at least three levels of elevation: low, medium, and high.

Low Elevation
Further away
No spread
Medium Elevation
Closer
Small spread
High Elevation
Closer
Large spread

Elevations differ based on the spread of their drop shadows. High elevation shadows have a wider spread compared to medium and low elevation shadows. This mimics real-world shadow elevation. Users appreciate shadows that appear natural, so aim for subtle and realistic effects.

The Soul design system defines six elevation levels. Elements in their resting state can be at levels 0 and 1, while levels 2, 3, and 4 are used for states like hover or drag interactions. The 5th level creates a new, focused layer in the UI to draw the user's attention.

The visualization of six elevation levels according to Soul design system.

Related reading: Soul Design System

Here’s an approach to defining shadow variations:

Start with the extremes

Begin by defining the smallest and largest shadows in your system. The smallest shadow should be subtle, enhancing elements without overwhelming them. The largest shadow should be significantly more pronounced, used for elements that need to stand out prominently on the interface.

The visualization of two extreme shadows in the design system.

Source

Fill in the gaps

Once you have your smallest and largest shadows set, create additional shadow sizes that transition smoothly between these two extremes. These intermediate shadows should increase in size and intensity linearly. This progression allows for a clear, logical escalation in elevation from one element to another, aiding in visual organization and hierarchy.

Elevation:0

Avoid excessive use of raised and overlay elevations

The shadows and surfaces of raised and overlay elevations can create cluttered UI if not applied intentionally.

Pro tip: People are very good at seeing things in 3D. Creating a system that uses this kind of logic makes the product easier to use and provides teams with ready-made choices for creating detailed yet organized interfaces. By combining elevation and vibrancy into one system, designers and developers remove the need to consistently make design choices focused on individual components, which are really part of a much larger system.

Related reading: Is there a recommended limit to the number of shadows to apply to a single element?

🛠️ Useful tools 

These tools will make your job easier and more effective. 

Elevation Scale Figma Plugin – create shadow systems and effect styles using your preferred steps from a custom function.

🤝 Credits

Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!

📚 Keep exploring 

Never stop growing. Explore resources thoughtfully handpicked by Cieden’s designers. 

start your project with us.

Getting in touch
is easy .
Thank you for your message. It has been sent