Light comes from above
One design tip you'll see everywhere once you know it:
Light comes from above.
🙄
Kind of obvious, but this means that:
- Objects are lighter at the top
- Shadows fall below elements
- Elements closer to you are brighter
This is why shadows spreading out evenly seem subtly wrong.
![circle with shadow spreading out](/img/2022/shadow.png)
This is why gradients that are darker on the top seem weird.
![gradient that is darker on top](/img/2022/gradient.png)
This is why darker cards on lighter backgrounds are off.
![darker box on light background](/img/2022/box.png)
Just remember: Light comes from above!
![Box where light comes from above](/img/2022/above.png)
As soon as you know this you’ll notice it everywhere!
![Example with components from Material UI and MacOs and iOS](/img/2022/everywhere.png)