Elevation

Shadows add depth by giving the appearance of distance, or elevation, between surfaces. The distance, measured along the z-axis determines the cast of the shadow.

Elevation styles are used to create separation between surfaces. Eight elevation styles are available in a range of depths.

Elevation General Example

Some elevation styles are used on specific components within the Goldman Sachs Design System.

Depth LevelUses
Elevation 00Background
Elevation 01 Panels, Cards Minimal
Elevation 02Panels, Cards Subtle
Elevation 03No Specific Use
Elevation 04Panels, Navigation Bars, Cards Bold
Elevation 05Menus, Date Picker
Elevation 06Modals
Elevation 07No Specific Use
Elevation 08 No Specific Use

Panels, Cards Minimal

Elevation Example

Panels, Cards Subtle

Elevation Example

Panels, Navigation Bars, Cards Bold

Elevation Example
Elevation Example
Elevation Example

Don't use excessively large shadows in very dense areas. Reserve for more singular uses, like a Modal.

Elevation Example (Dont Do)

Don't mix shadows on like items.

Elevation Example (Dont Do)

Don't use too many shadows as it will create a confusing hierarchy.

Elevation Example (Dont Do)