Depth cues

To communicate the depth cues of an interface to the user we use mainly colors mixed from the greyscale palette. Notice that as different surface layers stack on top of each they change color and generally become lighter. The roots of this behaviour comes from the theory that the closer the element is to an imaginary source of light, the brighter it gets. Therefore the foreground elements should always appear lighter than the background elements. There is only one style that is not following this approach and it’s called surfaceForeground.

‍

‍

A great functionality of UI surfaces emerges in the wait presents the depth cues of your interface and if it provides enough contrast.

In order to design semantic & real-to-life surfaces in our design we use a series of rule sets for how we apply color to the background and containers drawn on top of the background. In order to understand the logic of how different surface layers build on top of each other.

‍

‍