Quick start guide: Application interface layers

The visual design of an application interface is often “layered”. For example, the container layer sits on the background layer.

In most cases the layers in an application interface are represented by a scale of neutral (grey) colours. Here’s how I usually think about that.

Colour choice

HSB colour system

Contrast between layers

Borders for contrast

Add a little colour

Hover state colour

Elevation or visual weight

Two possible approaches


Visual weight