<aside> <img src="/icons/home_blue.svg" alt="/icons/home_blue.svg" width="40px" /> Home | Foundations | Components | Addons | Patterns

</aside>

Adding a sense of depth to a design can make that design seem more realistic and increase visual interest.

Elevation system

All Aqua DS surfaces, and components, have elevation values. Surfaces at different elevations do the following: Elevation can be depicted using shadows or other visual...

All Material Design surfaces, and components, have elevation values.

Surfaces at different elevations do the following:

• Allow surfaces to move in front of and behind other surfaces, such as content scrolling behind app bars
• Reflect spatial relationships, such as how a floating action button’s shadow indicates it is separate from a card collection
• Focus attention on the highest elevation, such as a dialog temporarily appearing in front of other surfaces

Elevation can be depicted using shadows or other visual cues, such as surface fills or opacities.

Elevation System

In Aqua Design System, all surfaces and components have an assigned elevation value. This system visually communicates depth, hierarchy, and spatial relationships across the interface.

Elevation can be represented using shadows, surface fills, or opacity overlays, and it serves three key purposes:

• 📚 Visual layering: Allows elements like app bars to remain above content that scrolls beneath them.
• ✨ Spatial relationships: A floating action button (FAB) casts a shadow to indicate it’s above other components like cards.
• 👀 User focus: Higher-elevation elements like dialogs draw attention by appearing in front of other surfaces.

Changing elevation

Components can change elevation in response to user input or system events. When this happens, components move to preset dynamic elevation offsets, which are the...

Components can change elevation in response to user input or system events. When this happens, components move to preset dynamic elevation offsets, which are the default elevations components move to when not resting.

Dynamic elevation offsets are the same across each type of component. For example, all cards use the same offset as other cards, and all floating action buttons use the same offset as other floating action buttons.

Once the user input (or system event) is completed or cancelled, the component swiftly returns to its resting elevation.

Component with depth

• Drawer
• Card
• Button
• Dialog
• Checkbox
• Radio
• Toast
• Popover

Untitled