color

The unpushed button (top) has a dark bottom edge. Sun don’t shine there, son.
The unpushed button is slightly brighter at the top than at the bottom. This is because it imitates a slightly curved surface. Just as how you’d need to tilt a mirror held in front of you up to see the sun in it, surfaces that are tilted up reflect a biiiiit more of the sun’s light towards you.
The unpushed button casts a subtle shadow– perhaps easier to see in the magnified section.
The pushed button, while still darker at the bottom than at the top, is overall darker– this is because it’s at the plane of the screen and the sun can’t hit it as easily. One could argue that all the pushed buttons we see in real life are darker too, because our hands are blocking the light.
That was just a button, and yet there are these 4 little light effects present. That’s the lesson here. Now we just apply it to everything.


iOS 6 is a little outdated, but it makes a good case study in light behavior.
Here is a pair of iOS 6 settings— “Do Not Disturb” and “Notifications”. NBD, right? But look how many light effects are going on with them.

The top lip of the inset control panel casts a small shadow
The “ON” slider track is also immediately set in a bit
The “ON” slider track is concave and the bottom reflects more light
The icons are set out a bit. See the bright border around the top of them? This represents a surface perpendicular to the light source, hence receiving a lot of light, hence bouncing a lot of light into your eyes.
The divider notch is shadowed where angled away from the sun and vice versa