Opens in a new tab

Category: Color

  • A strip of eleven shades of one blue, numbered 50 to 950, with an arrow to the 500 step labeled your brand color. The light end is labeled backgrounds and the dark end text.

    September 29, 2026
    A single brand color rarely covers everything a website needs. You'll usually want a very light version for backgrounds, a…
  • Two rows of cards on white, light blue and blue. Light gray borders, marked with an X, stand out on the colored cards. Black borders at 12% opacity, marked with a check, blend in on all three.

    September 29, 2026
    A simple trick I learned when designing borders is to use black at 10 to 15% opacity instead of light…
  • A chain of color tokens. The primitive brand-500 feeds the semantic bg-brand, which feeds the component token button-color on a Book a call button. A dotted arrow from bg-inverse shows the button can change by switching one link.

    September 29, 2026
    Most of the time, we stop using our design system because it stops working. I know I’ve been in situations…

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