# Depth

Source: https://design.ritchiebros.com/design/depth/

Depth establishes hierarchy, signals interactivity, and guides focus through the interface.

## Hierarchy

Depth can effectively establish visual hierarchy. The higher an element sits in the Z scale, the more important it seems, helping people understand the importance of different elements and guiding navigation.

**Do:** Use depth tactically to differentiate between primary and secondary elements.

**Don’t:** Overuse depth — too many elements pulling attention leads to a cluttered, confusing interface.

**Do:** Keep child elements within their parent containers to maintain a cohesive perception of depth.

**Don’t:** Let elements protrude outside their parent containers, disrupting the natural perception of hierarchy.

## Interactivity

Depth indicates interactivity. Interactive elements, like buttons or cards, get more depth to signal that people can interact with them.

**Do:** Use depth to indicate interactive elements so it’s obvious what can be interacted with.

**Don’t:** Give static elements unnecessary depth, which misleads people into thinking they’re interactive.

**Do:** Apply intuitive depth changes on interaction, like pushing a button down, for tactile feedback.

**Don’t:** Apply unexpected depth changes that cause disorientation.

## Focus

Depth helps guide focus. Giving more depth to an element draws attention toward it.

**Do:** Use depth to highlight actions and overlays so people see them first.

**Don’t:** Rely solely on depth to create focus — not everyone perceives depth the same way, so combine techniques for accessibility.