Depth

Depth is the plane that elements are shown on. It is used to create groups of elements connected by meaning as well as establish hierarchy for elements that need to be distinct.

Level 0

Backgrounds

Example

div {
  background-color: #fff;
}

Level 1

Sidebar, Cards, and Buttons

Example

div {
  box-shadow: 0 1px 3px rgba(99, 107, 127, 0.2),
    0 2px 2px rgba(99, 107, 127, 0.12),
    0 0 2px rgba(99, 107, 127, 0.14);
}

Level 2

Link color, Primary buttons

Example

div {
  box-shadow: 0 1px 5px rgba(99, 107, 127, 0.2),
    0 3px 4px rgba(99, 107, 127, 0.12),
    0 2px 4px rgba(99, 107, 127, 0.14);
}

Level 3

Fixed footer

Example

div {
  box-shadow: 0 1px 10px rgba(99, 107, 127, 0.2),
    0 4px 5px rgba(99, 107, 127, 0.12),
    0 2px 4px rgba(99, 107, 127, 0.14);
}

Level 4

To be used in special cases, where an element needs to be higher in the layering order, but lower than Documents.

Example

div {
  box-shadow: 0 3px 5px rgba(99, 107, 127, 0.2),
    0 1px 18px rgba(99, 107, 127, 0.12),
    0 6px 10px rgba(99, 107, 127, 0.14);
}

Level 5

Documents

Example

div {
  box-shadow: 0 4px 5px rgba(99, 107, 127, 0.2),
    0 3px 14px rgba(99, 107, 127, 0.12),
    0 8px 10px rgba(99, 107, 127, 0.14);
}