Material-UI Colors

Use Material-ui colours utility classes to apply colour to the background of elements, text, and borders. Includes support for styling links with hover states, too.

Note

Since we’ve used JSS like our friends from Material-UI, to make it a bit more easier for you to customize our template, we’ve added all of our colors inside:

  • src/assets/theme/colors.js
  • src/assets/theme/theme.js (inside the palette object of the createMuiTheme function)
  • src/assets/theme/box-shadow.js (for shadows and their colors)
  • src/assets/theme/hex-to-rgb.js (we’ve made all of our colors in hex format, but some of our components needed colors with opacity on them, so we use this function to transform a color from the hex format to the rgb format)
  • PRO src/assets/scss/custom/_variables.scss you will also find some variables here, these are for the plugins used in the PRO template

Primary colors

Our primary palette is comprised of neutrals, white, and blue. These colors are present across most touch points from marketing to product.

A
Fail
A
Pass
Name
Default
Hex
#172b4d
A
Fail
A
Pass
Name
Primary
Hex
#5e72e4
A
Fail
A
Pass
Name
Secondary
Hex
#f4f5f7
A
Fail
A
Pass
Name
Info
Hex
#11cdef
A
Fail
A
Pass
Name
Success
Hex
#2dce89
A
Fail
A
Pass
Name
Danger
Hex
#f5365c
A
Fail
A
Pass
Name
Warning
Hex
#fb6340

Light neutrals

Light neutrals are helpful for offsetting content in a primarily white layout without losing warmth and cleanliness, and are therefore often used as a background color for web components.

Gray 100
Hex
#f6f9fc
Gray 200
Hex
#e9ecef
Gray 300
Hex
#dee2e6
Gray 400
Hex
#ced4da
Gray 500
Hex
#adb5bd
Gray 600
Hex
#8898aa
Gray 700
Hex
#525f7f
Gray 800
Hex
#32325d
Gray 900
Hex
#212529