When creating a system such as this, it is necessary to think about color as a tool for communication. In addition to brand colors, applications like this need to have signal colors for errors, warnings, and successes. These colors are a significant aspect that contributes to the overall user experience of the application, meaning it is essential to understand how these colors might translate to users with different kinds of color blindness. Below we have images of the dashboard translated to Protanopia (red-blind), Tritanopia (blue-blind), Deuteranopia (green-blind), and Black/White color blindness (blue cone monochromacy).
Much of the design system is based on interactions and standards from Google’s material.io, material design system 3, and Atlassian design language. Using the design system in multiple scenarios helps to determine value and to remember that it can be flexible to fit the needs of the user.
Examples of screens using components from this system.