Colour

I sometimes forget that transparent colours can solve certain contrast and design issues like the following:

The panel is using a subtle gray (#ddd) to draw a border between its contents and the surrounding page. But when the page background gets closer to #ddd, the design doesn’t work as well.

Using transparency, we can keep the same effect on white backgrounds while ensuring increased contrast on other backgrounds. Here I use a black color set to 0.135 opacity instead: rgba(0, 0, 0, 0.135). This matches #ddd on white backgrounds but automatically appears darker on other backgrounds:

This technique also works well on lightly colored backgrounds. The panel will pick up the underlying colors and display them through the transparent black:

This is kinda cool. The author decided to try and create depth in a design system without using any drop shadows. The trick? use varying amounts of contrast to denote depth, with things in the background having less contrast than those in the foreground. It’s well worth a read.

Need colour inspiration? Here you go.