Improve colors for status

[lklyne]

Goal: Provide clear options and opinions on how to use color to show status. This could be a great case study / explanation of value added for Stellar. It demonstrates a clear problem and solution.

Problem: Traffic light colors are ubiquitous to mission ops tools and planning processes. They are 1) often not standardized across tools and implemented in different ways, meaning operators have to context switch and learn new paradigms as they move across individual tools. 2) They are often not accessible. Red/green color blindness is the most common form of color blindness.

This is an example of an area where off the shelf design systems don't work. There's often many different options for status with mission operations tools. Simple success, caution, error categories don't capture this complexity. Often times categories are much more nuanced: (fault, near fault, nominal, difference; estimated vs actual; system error, error, warning, info, help ...)

Solution A consistent approach to status and color means operators can move through tools with the same mental model. Color blind operators can have affordances to easily scan and parse information. A comprehensive approach that provides direction for many states makes this approach unique.

Figma branch: https://www.figma.com/file/a696svN2S7YNlZRYAkeLob/branch/oOxNcX78bLrB0wfE8M0oGl/Stellar-Design-System?type=design&node-id=9270%3A42567&mode=design&t=Nsrf4z2wyw0MYBWr-1 Status icons + Color

Ideas:

• Multiple shades for red / yellow / green
  • Success
  • error
  • warning
  • info
  • pending
  • indeterminate
• Contrast compliant in light + dark mode

Accessibility

• Encode information in different ways (use an icon in addition to just color)
• Have a separate palette specifically for colorblind mode

Test & Document

• with buttons and icons
• with toasts
• Write documentation + best practices

Implementation

• How can we make this easy for devs to use the right color palette

  Write out what breaking changes are Create a visual change log and figure out where to put it Create a prioritization framework How often does it come up? How bad is it if we get it wrong? How hard is it to maintain?

[lklyne]

Add christiahn to this when he has a public github

[lklyne]

https://www.figma.com/file/a696svN2S7YNlZRYAkeLob/branch/oOxNcX78bLrB0wfE8M0oGl/Stellar-Design-System?type=design&node-id=9270-42567&mode=design&t=Nsrf4z2wyw0MYBWr-0

[lklyne]

This is a clever and accessible approach to using shape and color to encode severity: https://twitter.com/JohnPhamous/status/1760444698857230360