Badges and color roles

[heyjoethomas]

Problem

I think having clear and consistent color roles is really important. At first glance we have the following roles:

• Neutral (grey)
• Informational (uses teal highlight tokens)
• Warning (yellow)
• Critical (red)
• Success (green)

This makes sense until we get to the badge component. We add another role, 'attention', only within that component. Further, the attention role actually uses the yellow which is used for 'warning' everywhere else. In a badge the 'warning' role is actually orange.

In the image below it isn't clear what about a 'payment pending' label would require a 'warning' badge so there already may be some confusion happening around how to employ each role.

Opportunities

• I think we could look at hardening our color roles to be a little more definitive with more clear guidance on when each role should be employed. An easy way to do this is make sure our tokens are named in alignment with their role. Pattern documentation on the doc site would also be something worth tackling.
• We could also look at expanding the roles if we think that more are required.

[sarahill]

💯 agree with having clear color roles.

For some context on the yellow attention badge:

That was originally updated to use the warning role when the design language was initially released but the orders team got almost immediate feedback from merchants that the color change was making it really difficult to see the difference between the other order statuses because some statuses were now using the same color. That's why the yellow was re-introduced and doesn't map to anything else in the system 😢

Figuring out how to handle status is tough. The way the badge is used on orders is really specific to the stage an order is in. This feels like it might be a pattern example?

Excited to see this get tackled 👏

[sarahill]

We did some previous exploration on status indicators in the admin too near the end of last year. Happy to share more on that too if it's useful but I'm interested to see what you come up with looking at it through a fresh lens.

[heyjoethomas]

Makes sense that there are all sorts of in-between states that you want to be able to decipher. One idea would be to allow for non-semantic colors to be passed into the badge. So you could have a purple badge but colors like yellow, green and red are still reserved when communicating a status.

[bernardojoaogarcia]

Totally agree w/ this and the opportunities proposed! Going back to visual norms and how colour roles are currently being portrayed, I am a bit confused by the neutrality of the colour usage in the badges for “Paid” and “Fulfilled” as I would associate that with the success status. If the intention is to not overpopulate the index table with colour then maybe rethinking how colour is introduced into the badges stylistically would be a good start.

[heyjoethomas]

Totally agree. I would think those would be green as well if we are only relying on a badge to communicate the status.

[sarahill]

The discussion of neutrality for badge status has been something that comes up in regards to status convos. There's an argument for downplaying things that are done / complete, to give more weight to the open tasks. I don't think we're always consistent with this logic though and it seems to be more of an opinion within a section than overarching pattern in the admin.

We also have a problem / habit in the admin right now of using a lot of red for things that probably don't warrant it. The emphasis on a more negative color with the lack of anything positive gives it a vibe.

To the point of color communicating status, also curious if we're considering localization? Might be a future consideration but just curious.

[heyjoethomas]

All great points. I think localization could be done via theming once a new token system is in place. We could have a theme that has proper error and success colors for places that don't follow the the western red/green pattern.