Elevation
Elevation is the distance at which a surface sits above another, drawn as a shadow, a tint or a material. Material 3 sets it in dp levels, and iOS has no named shadow ramp.
Why it matters
Elevation tells people what is on top and what can be dragged. It is also the easiest property to overuse: a shadow on every card flattens the signal.
The two platforms answer differently, so a shared design needs one ramp that both can read.
Elevation on iOS and Android
Also called Shadow, Drop shadow. The same idea in each system, with the values Appetite UI gives it.
| Value | iOS | Android | Appetite UI |
|---|---|---|---|
| Name | No named ramp: materials and depth | Elevation levels | dropShadow/xs to 2xl |
| Card, resting | Not named | 0 dp outlined or filled, 1 dp elevated | See below |
| Menu | Glass material | 3 dp | See below |
| Slider thumb | Soft shadow in the file | 2 dp | See below |
In Appetite UI
The Effects page holds dropShadow/xs to 2xl as one ramp for both platforms, with the same values in Brand and System mode. Liquid Glass is a separate set of styles for iOS.
Example
A card rests on the ground with dropShadow/xs. When it is dragged, it moves up one step on the ramp, and a menu above it sits higher still.
Common mistakes
- Shadow on every surface. Reserve it for what floats or moves.
- Reading the same dp on iOS. Apple’s depth is a material, not a number.
- Stacking a shadow on a tinted background. Separate with a hairline or a fill.
- Typing shadow values per component. Bind to the ramp.
Questions
Does iOS have elevation?
Not as numbered levels. iOS shows depth with materials such as Liquid Glass and with layering; Material 3 uses levels in dp. Appetite UI keeps one shadow ramp for both.
How do I design elevation for iOS and Android together?
Use one ramp of shadow tokens and bind surfaces to it, rather than copying dp levels to iOS. Appetite UI’s dropShadow/xs to 2xl is that ramp.
Sources
The pages the facts above rest on, each read October 30, 2026.