Overview
Designers often spend time talking about shadows on a component, but the intent is more than an arbitrary shadow.
Rather than thinking of it as a shadow, think about it as elevation. The key concept to grasp is that all of the pieces inside of the design are objects inside a 3D plane. Some objects are close to the user, offering an affordance that it can be interacted on. Other objects are distanced from the user and appear as static objects.
IDS Values |
Elevation level |
Web, ios, android |
None |
0 |
∑0,0,0,0 rgba(0,0,0,.20) |
Skim |
1 |
∑0,1,4,0 rgba(0,0,0,.20) |
Lifted |
2 |
∑0,2,8,0 rgba(0,0,0,.20) |
Raised |
3 |
∑0,4,16,0 rgba(0,0,0,.20) |
Floating |
4 |
∑0,6,24,0 rgba(0,0,0,.20) |