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

The Hue, Brightness, Saturation (HSB) colour system lets you tweak brightness with no change to hue or saturation.
This guide will assume you use it. If you’re not familiar, you should look it up.

People need to be able to tell the difference between layers of an interface.
I’ve found there’s a minimum brightness difference you should use between layers to be sure.
For light mode that’s 3% brightness. e.g. if you start with white (100%), the next layer should be at most 97% brightness, and so on.
For dark mode it’s harder to tell the difference in brightness between dark colours.
So your first jump from black (0% brightness) has to be bigger. I’ve found 15% works.
Then each jump after that should be at least 5% brighter.

Borders around elements make it easier to tell where one element ends and another begins.
So if you use borders around elements on different layers you can have lower brightness contrast between the background colours.
These borders don’t need to be noticeable. They can be subtle, as long as they add more contrast than both of the layers.
You can also use borders if you want no background brightness contrast at all.
For example, you might have a black (0%) container on top of a black background, with only a border to show that it’s a container.
This is helpful if you want to save the next layer up for an element inside the container.

It’s common to add a little colour to your neutral interface palette.
The most common colour I see is blue. Probably because it’s a safe colour.
The colour saturation should be small. e.g. ~3% saturation.
This adds a bit more visual richness to the interface, and is usually not noticed consciously.

It’s common to change an element’s background colour on hover to something slightly darker.
One approach to this is to always use the next neutral shade up in your neutral palette.
Another approach is to overlay the background colour with your darkest shade, set to a low opacity. e.g. black at 5% opacity.
The opacity approach will mean you can use only one hover colour and it will make the background colour darker no matter what the background colour is.
One exception to this is that if the background colour is already dark (e.g. black, or close to it), this opacity approach won’t be noticeable. You might need a custom case if you run into this issue.

Two ways to think about layers in an application interface are elevation and visual weight.
In one case layers of an application appear elevated—closer to you—as they are stacked.
In another case layers are visually heavier as they are stacked.
You can use both of these approaches at the same time, but beware that they might clash.
This is because elevation relies on brightness to draw your eyes to something. But as things get darker they also draw your eye.
Note: in both cases you’ll have elements that ignore these approaches. For example, a primary button that is as far away from the base brightness as possible because that attracts the most attention.

With elevation layers get brighter as they get “closer”/stacked.
Generally you’d have a darker grey as a base layer, then lighter layers on top of that.
This approach can make it hard to have enough levels, since you might need to start with quite a dark grey as a base layer.
For some elements it might make sense to lower the elevation again, e.g. for form fields where data is entered.
You can also make use of shadows here. A shadow should be larger and softer as it gets farther from the layer behind it.

With the visual weight approach you’d use a base background colour that’s lightest (light mode) or darkest (dark mode).
Then you’d make layers visually heavier as they stack by moving brightness away from the base layer.
As element brightness moves away from the base layer they get visually heavier and attract more attention.
Noticeable borders can also be used to add visual weight, especially if you don’t want to add too much to the background colour.