Opens in a new tab

Use opacity to blend borders

A simple trick I learned when designing borders is to use black at 10 to 15% opacity instead of light gray.

It blends in with whatever background color your element has, and it works better in most cases.

By doing this, you only need one border color token instead of a different one for each component.

If you update the color of a component in the future, the border still blends in.

Just remember to use white at a low opacity for borders in dark mode.

George Wert
Created by George Wertgeorgewert.com

Get Free Design Lessons Every Monday Morning

Get Free Design Lessons Every Monday Morning

Three short lessons each Monday on a single design topic. They're written in plain language and give you ideas to use on your next site.

You're in!

Check your inbox for your first email.
Close