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);
}