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   #FFFFFF Main region – background
Gray 100   #F0F0F0 App bar – background
Primary / Vertical tab – background
Gray 200   #D2D2D2  
Gray 250   #BEBEBE Container – border
Fieldset – border
Gray 400   #969696 User input – border
Primary button: Disabled state – background
Secondary button: Disabled state – border, foreground
Switch: Off state – background
Typography: Subheadline, Caption – foreground
Gray 650   #595959 App bar: Default state – foreground
Gray 800   #323232 Typography: Headline, Paragraph – foreground

State colors

Blue is used to highlight interactive elements.

Color name Color Usage examples
State blue 020   #CCE2FA Secondary button: Mouseover state – background
State blue 050   #7FB7F2 Secondary button: Pressed state – background
Cool blue   #009EFF Primary button: Mouseover state – background
Focus state – border
State blue 100   #006FE6 Primary button – background
Secondary button – border, foreground
Switch: Active state – background
State blue 250   #005CBF 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   #F62447 Severity “Error” / “Alert”
Data visualization
Validation red   #D0021B Form validation: Error text
User input: Required icon and text
Functional yellow   #FFC800 Severity “Warning”
Data visualization
Functional green   #65C728 Severity “Success”
Data visualization

Other colors are used less prominently to display components in various states.

Color name Color Usage examples
Context blue 050   #D1E8F0 Message: Information – background
Context blue 150   #BBD0D7 Message: Information – border
Context blue 600   #235461 Message: Information – foreground
Context green 050   #E6EED1 Message: Success – background
Context green 200   #C8D1BA Message: Success – border
Context green 600   #5E6919 Message: Success – foreground
Context red   #FCD3D2 Message: Error / Alert – background
Context red 200   #D6B4B4 Message: Error / Alert – border
Context red 500   #811211 Message: Error / Alert – foreground
Context yellow   #FFEDB5 Message: Warning – background
Context yellow 100   #E6DBB7 Message: Warning – border
Context yellow 600   #665E48 Message: Warning – foreground
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top