Color
Color is an essential component of an expressive user interface.
Overview
Color communicates relevance and relations among different user interface elements. The following palettes display all colors of the MindSphere core components.
Neutral text, background and border colors
MindSphere uses subtle grays for most backgrounds, borders and text.
| Color name | Color | Usage examples |
|---|---|---|
| White | Main region – background | |
| Gray 100 | App bar – background Primary / Vertical tab – background |
|
| Gray 200 | ||
| Gray 250 | Container – border Fieldset – border |
|
| Gray 400 | User input – border Primary button: Disabled state – background Secondary button: Disabled state – border, foreground Switch: Off state – background Typography: Subheadline, Caption – foreground |
|
| Gray 650 | App bar: Default state – foreground | |
| Gray 800 | Typography: Headline, Paragraph – foreground |
State colors
Blue is used to highlight interactive elements.
| Color name | Color | Usage examples |
|---|---|---|
| State blue 020 | Secondary button: Mouseover state – background | |
| State blue 050 | Secondary button: Pressed state – background | |
| Cool blue | Primary button: Mouseover state – background Focus state – border |
|
| State blue 100 | Primary button – background Secondary button – border, foreground Switch: Active state – background |
|
| State blue 250 | Primary button: Pressed state – background |
Functional colors
Bold colors are used to attract the user’s attention to specific components of the interface.
| Color name | Color | Usage examples |
|---|---|---|
| Functional red | Severity “Error” / “Alert” Data visualization |
|
| Validation red | Form validation: Error text User input: Required icon and text |
|
| Functional yellow | Severity “Warning” Data visualization |
|
| Functional green | Severity “Success” Data visualization |
Context related colors
Other colors are used less prominently to display components in various states.
| Color name | Color | Usage examples |
|---|---|---|
| Context blue 050 | Message: Information – background | |
| Context blue 150 | Message: Information – border | |
| Context blue 600 | Message: Information – foreground | |
| Context green 050 | Message: Success – background | |
| Context green 200 | Message: Success – border | |
| Context green 600 | Message: Success – foreground | |
| Context red | Message: Error / Alert – background | |
| Context red 200 | Message: Error / Alert – border | |
| Context red 500 | Message: Error / Alert – foreground | |
| Context yellow | Message: Warning – background | |
| Context yellow 100 | Message: Warning – border | |
| Context yellow 600 | Message: Warning – foreground |