Button Patterns

While I enjoy bold colors that really make a design POP, in our new design system we needed to use color more intentionally. Our screens are data heavy and include many interactive elements. We wanted our customers to be able to scan a screen and quickly recognize what was clickable and what was not. Color became one of the ways to communicate this.

We landed on two simple rules:
1. If it's a color, I can click it
2. The specific color defines its current state. (An example of this would be if a button is red, that related content is urgent, and the actions are to resolve that urgency)

We began to develop out our color variants and button patterns into a simple, but incredibly helpful system.