Elevation

Foundation

How each system shows that one surface sits above another.

Systems to compare (up to 4)

Showing 4. Turn one off to add another.

Show system

SGDSSingapore

Surface, edge and opacity

Surface elevation: things that temporarily appear in front, such as dropdown menus and tooltips.
Edge: a shadow on a header or action bar that content scrolls behind.
Opacity backgrounds focus layered surfaces such as modals.
Keep elevation subtle so it does not take focus from content.

SGDS, Elevation

Design-system conventionVerified 7 Oct 2026

Material

Mainly tonal colour, plus shadows

Material 3 represents elevation mainly using tonal colour overlays.
Higher tonal elevation uses a more prominent tone.
A surface can take tonal elevation, shadow elevation or both.

Android Developers, Material Design 3 in Compose

Design-system conventionVerified 7 Oct 2026

Apple

Materials, not drop shadows

A material creates depth, layering and hierarchy between foreground and background.
Liquid Glass forms a layer for controls and navigation that floats above content.
Do not use Liquid Glass in the content layer.
Thicker materials give better contrast for text.

Apple HIG, Materials

Design-system conventionVerified 7 Oct 2026

GOV.UK

No elevation guidance

The Styles section has no page for elevation or shadows.

GOV.UK Design System, Styles

Design-system conventionVerified 7 Oct 2026

Not yet read on this topic: Carbon, Primer, USWDS. Nothing is shown for a system until its own page has been read.

Shortcut takeaway

Of the first four, only one leans on drop shadows, and it asks for subtle ones. Material uses colour, Apple translucent materials, GOV.UK nothing. Atlassian and Fluent do use shadows; Atlassian only on its two highest levels. Height is mostly kept for things that sit above the page.

These sources do not carry equal weight

Standard requirement.: A testable criterion in a published standard. Whether it is legally required depends on your jurisdiction and contract.
Government control.: A control the issuing government expects its agencies and their partners to apply. It does not bind other organisations.
Design-system convention.: How one design system does it. Binding only on teams that have adopted that system.
Research-based best practice.: Advice drawn from usability research. Persuasive, not mandatory.
Industry convention.: A range many shipping products use. Written by Shortcut; no standard or organisation requires it.
Craft guidance.: Judgement of the kind given in design review. Written by Shortcut; reasonable designers may disagree.