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.
|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)|