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

Colors - Swatch file

All colors presented and used throughout the mdsp-css framework can be downloaded in .ase swatch format.

Most major graphic programs are able to open and use this color library files.

Download mindsphere.ase color library
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top