Depths

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:

  • z100
  • z200
  • z300
  • z400

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.

z100

Sections, islands, buttons and other basic components.

1px border

No shadow

z200

Inline dialogs and dropdowns

Shadow shape is 2px smaller than bubble

Shadow
Teal darkest
32%
X: 0
Y: 4
Blur: 6
Spread: 0

z300

Modals

Shadow shape is 4px smaller than bubble

Shadow
Teal darkest
32%
X: 0
Y: 8
Blur: 10
Spread: 0

z400

Toasts

Shadow shape is 8px smaller than bubble

ShadowTeal darkest
42%
X: 0
Y: 24
Blur: 32
Spread: 0