📝 CSS-Tricks 218: Web Components, Colorful Design Systems, Onboarding Animations

View this newsletter on the web.

Color within Constraints

Here’s a fantastic piece by Linzi Berry about the design systems team at Lyft and how they work on their color guidelines:

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.

This is partly the reason why, at Sentry, we decided to make two color systems: UIs and charts. For most of the UI we can work within an extremely small band of colors — buttons, text, etc. — because we often don’t need that much variation in styles. But charts most certainly do. And since our app has a whole bunch of complex chart variants then that helps us draw this line between them.

That distinction between UI colors and chart colors helps us keep things consistent. But also it’s worth noting that the problems Linzi’s team at Lyft are trying to tackle are much more complex, with hundreds of designers and engineers.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s