Brand
Brand identity elements
Atoms
Atoms
Molecules
Molecules
Organism
Organism

Elevation

The elevation system treats the relative distance between two elements, which helps the user understand and feel their hierarchy and dynamic.

Elevation

Principle

This is a scale that use the Z axe (in a 3D environnement).
Create a scale of elevation is use to create a hierarchy between elements.

Principle

This is the ground

Elevation guidelines

Shadow Scales

Elevation 5

Dialog and Picker

box-shadow:

0 0 16px rgba(0, 0, 0, 0.25)

Elevation 4

Navigation and Header

box-shadow:

0 0 12px rgba(0, 0, 0, 0.25)

Elevation 3

SubNavigation and Floating button

box-shadow:

0 0 8px rgba(0, 0, 0, 0.25)

Elevation 2

Selector list, bottom bars

box-shadow:

0 0 4px rgba(0, 0, 0, 0.25)

Elevation 1

Cards

box-shadow:

0 0 2px rgba(0, 0, 0, 0.25)

Shadow Grid

Principle

Example

Here is an example of the elevation principle applied to a header and a navigation design element.

PrinciplePrinciple

Help & Contact

Any question?