Use Depth to Make Product Hierarchy Clear

### The business goal

Help users understand and act on information quickly without visual overload.

### The UX choice

Use depth to communicate hierarchy and interaction, not merely to add decorative shadows.

### What to design

- Let elevation show which surfaces are interactive or temporarily in front.

- Use overlap to establish relationships between a control and its content.

- Keep shadow, blur, contrast, and motion consistent across layers.

- Reserve the strongest depth for the most important focus state.

- Preserve readability when surfaces overlap or move.

### Practical implementation rules

- Define a small elevation scale and reuse it.

- Keep stacking order predictable.

- Test overlays, focus states, and reduced-motion behavior.

### What to avoid

- Adding shadows to every element until hierarchy disappears.

- Letting overlays cover context without a clear dismissal path.

- Using depth that implies interaction where none exists.

### Quick takeaway

Good depth answers a simple question: what is in front, what is behind, and what deserves attention now?