Skip to contentShopify logoPolaris

Depth

Depth introduces a sense of realism, helps establish visual hierarchy, and creates focus.

Hierarchy

Depth can effectively establish visual hierarchy. The higher an element sits in the Z scale, the more important it will seem. This enables merchants to understand the importance of different elements and guides their navigation through the interface.

A dropdown menu with a shadow that separates the menu from the background.
Do

Use depth tactically, and to differentiate between primary and secondary elements.

A dropdown menu with a shadow that separates the menu from the background, with an bevel on the item selected.
Don't

Overuse depth, as it can lead to a cluttered and confusing interface. Too many elements pulling attention can disorient merchants.

A table with product with a bevel effect.
Don't

Add unnecessary depth to an element. The depth of an element should always be related to its importance or interactivity.

A dropdown menu that sticks out of the main container
Don't

Allow elements to protrude outside of their parent containers. This disrupts the natural perception of depth and hierarchy, leading to a visually confusing interface. Instead, maintain the integrity of parent-child relationship in the layout for a cohesive depth perception.

Interactivity

Depth indicates interactivity. Interactive elements, like buttons or cards, get more depth to signal to merchants that they can interact with such components.

Two buttons with a style that mimics real buttons.
Do

Use depth to indicate interactive elements, so it’s obvious what elements merchants can interact with.

An unfulfilled badge, and product tags with a style that mimics real buttons.
Don't

Give static elements unnecessary depth, as this can mislead merchants to think they’re interactive.

A button with a visual treatment that make it look like is being pressed down.
Do

Apply intuitive changes to an element's perceived depth upon interaction, like pushing a button down. This provides visual feedback and intensifies the sense of tactility.

A button with a visual treatment that make it look like is being elevated.
Don't

Apply unexpected changes to an element’s perceived depth. This causes disorientation and makes the interface feel ill-conceived.

Focus

Depth helps to guide the merchant's focus. By giving more depth to an element, you can guide the merchant's attention towards it.

A modal window overlapping the interface of a customer details page, with a semi-transparent background that separates the modal from the remaining interface.
Do

Use depth to highlight action and large pieces of information that overlay on top of other information, to ensure merchants see these first.

A modal window overlapping the interface of a customer details page.
Don't

Rely solely on depth to create focus. Not all merchants perceive depth in the same way, so it's important to use a combination of techniques to ensure your design is accessible to everyone.

    On this page