Teamleader make use of a list of predefined depths to consistently layer elements on top of each other. This reinforeces hierarchy and clarity.
There are 4 layers elements can reside on:
Each layer is dedicated for a specific purpose and resides in it's own z-index so that elements can be stacked on top of each other when required.
Sections, islands, buttons and other basic components.
Inline dialogs and dropdowns
Shadow shape is 2px smaller than bubble
Shadow shape is 4px smaller than bubble
Shadow shape is 8px smaller than bubble