Shadows

Note: These are still SPOT-defined shadows and need to be replaced by primer

Shadows are important when certain components are displayed on top of other components. This is usually the case with contextual menus, drop-downs or dialogues that supplement or expand an existing view.

Although it is best to avoid layering beyond two levels (a base screen + an overlay), it is sometimes necessary and indeed unavoidable.

We use different shadows to communicate depth and allow the user to intuitively understand what is "on top".

Our shadows definitions divided between Light and Hard and three levels of elevation. The shadow is always based on a black #000000 transparency level, a X and Y px value and a spread px value.