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 |
|---|---|---|
| base000 | #000000 | Shadows |
| base200 | #323232 | Typography: Headline, Paragraph – foreground |
| base450 | #595959 | App bar: Default state – foreground |
| base600 | #969696 | User input – border Primary button: Disabled state – background Secondary button: Disabled state – border, foreground Switch: Off state – background Typography: Subheadline, Caption – foreground |
| base750 | #BEBEBE | Container – border Fieldset – border |
| base800 | #D2D2D2 | |
| base900 | #F0F0F0 | App bar – background Primary / Vertical tab – background |
| base1000 | #FFFFFF | Main region – background |
Primary color
Blue is used to highlight interactive elements.
| Color name | Color | Usage examples |
|---|---|---|
| primary-darker | #354C80 | Toggle button: Active state – background |
| primary-dark | #005CBF | Primary button: Pressed state – background |
| primary | #006FE6 | Primary button – background Secondary button – border, foreground Switch: Active state – background |
| primary-light | #009EFF | Primary button: Mouseover state – background Focus state – border |
| primary-lighter | #7FB7F2 | Secondary button: Pressed state – background |
| primary-lightest | #CCE2FA | Secondary button: Mouseover 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 |
|---|---|---|
| info-dark | #235461 | Message: Information – foreground |
| info | #006FE6 | Severity “Information” Data visualization |
| info-light | #BBD0D7 | Message: Information – border |
| info-lighter | #D1E8F0 | Message: Information – background |
| error-dark | #811211 | Message: Error / Alert – foreground |
| error | #F62447 | Severity “Error” / “Alert” Data visualization |
| error-light | #D6B4B4 | Message: Error / Alert – border |
| error-lighter | #FCD3D2 | Message: Error / Alert – background |
| warning-dark | #665E48 | Message: Warning – foreground |
| warning | #FFC800 | Severity “Warning” Data visualization |
| warning-light | #E6DBB7 | Message: Warning – border |
| warning-lighter | #FFEDB5 | Message: Warning – background |
| success-dark | #5E6919 | Message: Success – foreground |
| success | #65C728 | Severity “Success” Data visualization |
| success-light | #C8D1BA | Message: Success – border |
| success-lighter | #E6EED1 | Message: Success – background |