Elevation

Elevation is the distance between objects along the z-axis.

It is used by Matchbox to provide visual heirarchy and spatial contrast. Users percieve elevation through shadows, which bring elements on the page forward and helps convey importance and areas of focus.

Shadows should be used infrequently on static, non-interactive UI elements. They should be used when interacting with elements that are focusable, hoverable and clickable, or are overlay elements such as modals, drawers and trays.


Application Background
Color White
Common Container
Box Shadow 0
none
Box Shadow 100
0px 1px 2px rgba(44,53,61,.2)
Box Shadow 200
0px 2px 4px rgba(44,53,61,.2)
Box Shadow 300
0px 4px 8px rgba(44,53,61,.2)
Box Shadow 400
0px 8px 16px rgba(44,53,61,.2)
High Contrast Overlays
Box Shadow 0
none

Box Shadow 0none
boxShadow_0
Box Shadow 1000px 1px 2px rgba(44,53,61,.2)
boxShadow_100
Box Shadow 2000px 2px 4px rgba(44,53,61,.2)
boxShadow_200
Box Shadow 3000px 4px 8px rgba(44,53,61,.2)
boxShadow_300
Box Shadow 4000px 8px 16px rgba(44,53,61,.2)
boxShadow_400