Elevation

Elevation in Bolt creates visual layers that help users understand what is primary, what is temporary and what requires immediate attention. By controlling depth through shadows and surface treatments, elevation guides focus and establishes context without relying on decorative effects.

Elevation should always serve a functional purpose. Depth is never applied arbitrarily.

---

Elevation helps users understand the relationship between interface elements. Higher elevation indicates temporary content that sit above the base interface.

Principles:

• Use the minimum elevation needed to establish hierarchy
• Avoid creating excessive or arbitrary depth that confuses visual relationships

---

• Use elevation to distinguish temporary surfaces (modals, dropdowns, tooltips) from permanent interface elements
• Higher elevation draws focus to critical actions, alerts or content requiring immediate attention
• Elevation separates overlays from underlying content, preventing visual confusion
• Avoid using elevation purely for decoration or to "add interest"

---

• Shadows and depth cues must remain visible and effective in both light and dark modes
• Elevation changes should be smooth and purposeful, reinforcing user actions
• Elevation should never obscure content or reduce readability
• High-contrast elevation differences are reserved for critical overlays (e.g., modals)
• When applied, subtle elevation is preferred as it helps avoid visual noise

---

Consistent elevation helps users understand interface hierarchy, focus their attention and distinguish temporary overlays from permanent content.

When elevation is applied predictably and purposefully, users can quickly identify what needs their attention, what is interactive and what sits in the background. Clear depth relationships reduce confusion and support faster, more confident interaction.

Simple rule of thumb: If the elevation doesn't clarify hierarchy, it's not needed.