Color within Constraints

A scalable color system for digital products

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

On the surface color seems simple, but getting 100+ designers and engineers to follow guidelines that are a part of literally everything they make is a huge undertaking. To put it in perspective: over 50% of Lyft’s design system team’s office hours, high visibility projects and inner team disagreements are color related. We’ve learned a lot over the past three years. It sure as hell ain’t perfect, but it’s working pretty well so far.

These are the constraints that defined the construction of our system and the top issues we commonly face:

Constraints

To determine how to construct your system, consider the following:

Accessibility

Image for post
Image for post
Testing the contrast of a gradient. (We try to avoid gradients for this reason.)
  • Ask your leadership, legal or accessibility team which WCAG level your product has agreed to meet.
  • If the company hasn’t considered accessibility before your conversation, get leadership to make it a requirement before baking it into the system. Getting feature teams to choose the more accessible design over the more visually beautiful one is near impossible when the only reason is it’s the right thing to do.
  • Get a color contrast checking app to be given out as part of onboarding. We recommend Contrast for Mac, built by Sam, or A11y — Color Contrast Checker for Figma.

Flexibility

Complex products are a balance — common colors that cover most the majority and valid use cases where a larger variety is needed.

Image for post
Image for post

Build a more rigid system if color usage can be clearly documented and there are very few use cases that currently break the system. Build a more flexible system if color usage is complex, like having large data / graphs, marketing, sub-brands and/or programs.

Expansion

Image for post
Image for post

Keep color names and aliases as generic as possible and build a way to easily switch between brand and mode directories for complex products. Be as specific as you’d like with simple ones.

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
  • Accessibility It is incredibly hard to build accessibility into the spectrum because of the different WCAG requirements for different elements and varying contrast levels for different colors (ex: yellow has less contrast than blue.) Feature designers choosing to use colors from spectrum must be held accountable to remain accessible, ideally by their team and leadership.
  • Flexibility The spectrum offers the flexibility of the rainbow, while maintaining the consistency of identifiable names to a subset of hex values.
  • Expansion A light and dark spectrum with the same name for colors can be created to easily swap between light and dark mode.
Image for post
Image for post

Palettes

Image for post
Image for post
Created by Evan Maeda
  • Accessibility Text, icon, and stroke palettes must be designed to be accessible when paired with the surface and background palettes. When a designer uses palettes they should feel confident that it is accessible.
  • Flexibility Palettes are more rigid because they denote specific uses for colors. In a very rigid system designers can only use palettes that must cover all use cases. In a more flexible system, with both spectrum and palettes available for use, designers should be encouraged to only use spectrum when their use case isn’t covered by the palettes.
  • Expansion Palettes aliases make re-branding the app simple. Each brand keeps the same alias names and swaps out the spectrum colors used.
Image for post
Image for post

Linters

  • Accessibility Using linters is the only way to ensure your product is meeting color contrast accessibility requirements.
  • Flexibility Linters are the definition of rigidity for consistency. Offer education (why it’s a requirement) and quick fixes (like snapping to the closest spectrum or palette color) to avoid increasing the need for hands-on support.
  • Expansion It is easy to add or change linters as the product evolves.
Image for post
Image for post
Created by Alex Lockwood

Top Issues

Brand Color Usage

  • Repeatedly defending the rationale to new brand & product designers. We’d even encounter engineers styling the purple button component to be pink and designers using the brand color for other UI.
  • The color used most frequently in the product can define the brand. Make sure your brand outside of the app is strong enough that users still associate you with the desired brand color.
Image for post
Image for post
Image for post
Image for post
Lyft Pink (main brand) vs Purple 60 (main interactive)

Screen Goals & Hierarchy

  • Encourage teams to have clear goals documented for every screen within a main flow.
  • Feature teams should get agreement from the product platform team or leadership on the level of importance of their feature before designing a solution.
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

  • Assess the importance of a feature by referring to the screen goals / hierarchy when compared to other features.
  • Suggest adding extra oomph in other ways, like iconography or styling.
Image for post
Image for post
Uber’s ‘Safety Blue’

Last thoughts

This color system was created over 3 years by the Design System team at Lyft. Special shout-outs to Kevyn Arnott, Evan Maeda, Alex Lockwood, Kathy Ma, Gabriel Lanata, Jeremy Dizon and Sam Soffes. I’m Linzi Berry, currently product design manager of the team. My hope in documenting system design thinking and process is to contribute and learn from the design community at large. Please subscribe!

Tap to Dismiss

Sweating the details so you don’t have to

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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