Depth

Spirit provides a systematic language for conveying depth using shadows. To invite interaction or increase prominence, animate a component along the Z axis to simulate depth.

Elevation

Spirit provides six levels of elevation, from $spirit-elevation-0 (flat) to $spirit-elevation-5. These can be accessed via the spirit-elevation scss mixin.
@include spirit-elevation(0); @include spirit-elevation(1); @include spirit-elevation(2); @include spirit-elevation(3); @include spirit-elevation(4); @include spirit-elevation(5);

Guidelines

  • Scale the elevation with object size. Small objects lose context at high elevations, so use elevation 1, 2, and 3.
  • “Hover” an interactive object up to meet the cursor.
  • “Press” an interactive object when activated, reducing it one elevation level.
  • Animating an object up slightly can improve the illusion of depth. For example, button uses transform: translateY(-1px); on hover.
  • When animating elevation, use $spirit-transition-timing-default;

Use the following elevation recommendations:

Scenario At Rest Hover Activate
A Small Interactive
e.g. Button		 Flat or spirit-elevation(1) spirit-elevation(3) spirit-elevation(2)
A Container
e.g. Card		 Flat or spirit-elevation(1) spirit-elevation(4) spirit-elevation(3)

Shadow

Use shadow color to accent or compliment the color of the component. Shadow dimensions are determined by elevation, described above.

Grey Shadow
@include spirit-elevation(1); @include spirit-elevation(2); @include spirit-elevation(3); @include spirit-elevation(4); @include spirit-elevation(5);

Blue Shadow

Pass 'blue' as the second argument to the spirit-elevation scss mixin.

  @include spirit-elevation(3, 'blue');
@include spirit-elevation(1, 'blue'); @include spirit-elevation(2, 'blue'); @include spirit-elevation(3, 'blue'); @include spirit-elevation(4, 'blue'); @include spirit-elevation(5, 'blue');