Color within Constraints

A scalable color system for digital products

Linzi Berry
Sep 14 · 8 min read
Image for post
Image for post

Constraints

Accessibility

Image for post
Image for post
Testing the contrast of a gradient. (We try to avoid gradients for this reason.)

Flexibility

Image for post
Image for post

Expansion

Image for post
Image for post
Image for post
Image for post
The ‘surface interactive’ palette alias can be themed to match alternate brands & sub-brands.

Construction

Spectrum

Image for post
Image for post
Created by Kevyn Arnott
Image for post
Image for post

Palettes

Image for post
Image for post
Created by Evan Maeda
Image for post
Image for post

Linters

Image for post
Image for post
Created by Alex Lockwood

Top Issues

Brand Color Usage

Image for post
Image for post
Image for post
Image for post
Lyft Pink (main brand) vs Purple 60 (main interactive)

Screen Goals & Hierarchy

Image for post
Image for post
The largest percentage is typically the neutral background color, then easy-to-read text, then the vibrant CTA — purposely standing out to lead the user’s eye to the action we want them to take next.

Exclusive Use of Color

Image for post
Image for post
Uber’s ‘Safety Blue’

Last thoughts


Tap to Dismiss

Sweating the details so you don’t have to

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store