Elevation
Shadows are used to give the impression of distance or elevation between surfaces, which adds depth to our designs.
Global elevation tokens
Our global elevation tokens are created using multiple shadows to give elevated elements a more natural appearance.
| $box-shadow-01 | 0px 2px 2px 0px rgba(0,0,0,0.03), 0px 3px 1px -2px rgba(0,0,0,0.07), 0px 1px 5px 0px rgba(0,0,0,0.06) |
| $box-shadow-02 | 0px 4px 6px 0px rgba(0,0,0,0.02), 0px 2px 12px -2px rgba(0,0,0,0.08), 0px 3px 6px 0px rgba(0,0,0,0.06) |
| $box-shadow-03 | 0px 2px 6px 0px rgba(0,0,0,0.04), 0px 8px 12px -2px rgba(0,0,0,0.06), 0px 4px 6px 0px rgba(0,0,0,0.04) |
| $box-shadow-04 | 0px 8px 8px 0px rgba(0,0,0,0.04), 0px 8px 20px -3px rgba(0,0,0,0.10), 0px 4px 8px -2px rgba(0,0,0,0.06) |
| $box-shadow-05 | 0px -4px 6px 0px rgba(0,0,0,0.02), 0px -2px 12px -2px rgba(0,0,0,0.08), 0px -3px 6px 0px rgba(0,0,0,0.06) |
| $box-shadow-06 | 0px 2px 2px 0px rgba(0,0,0,0.12), 0px 3px 1px -2px rgba(0,0,0,0.28), 0px 1px 5px 0px rgba(0,0,0,0.24) |
| $box-shadow-07 | 0px 4px 6px 0px rgba(0,0,0,0.08), 0px 2px 12px -2px rgba(0,0,0,0.32), 0px 3px 6px 0px rgba(0,0,0,0.24) |
| $box-shadow-08 | 0px 2px 6px 0px rgba(0,0,0,0.12), 0px 8px 12px -2px rgba(0,0,0,0.24), 0px 4px 6px 0px rgba(0,0,0,0.16) |
| $box-shadow-09 | 0px 8px 8px 0px rgba(0,0,0,0.16), 0px 3px 20px -3px rgba(0,0,0,0.40), 0px 4px 8px -2px rgba(0,0,0,0.24) |
| $box-shadow-10 | 0px -4px 6px 0px rgba(0,0,0,0.08), 0px -2px 12px -2px rgba(0,0,0,0.32), 0px -3px 6px 0px rgba(0,0,0,0.24) |
| $box-shadow-11 | 0px 0px 1px 0px rgba(0,0,0,0.12), 0px 1px 5px 0px rgba(0,0,0,0.04), 0px 0px 4px 0px rgba(0,0,0,0.10) |
| $box-shadow-12 | 0px 0px 1px 0px rgba(0,0,0,0.24), 0px 1px 5px 0px rgba(0,0,0,0.08), 0px 0px 4px 0px rgba(0,0,0,0.16) |