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

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
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top