Skip to content

Color

The Material Design color system helps you apply color to your UI in a meaningful way.

Our color palette is composed of light-blue and gray, both belonging to the chromatic circle of cold tones. This allows us to generate a perfect harmony between them.

Primary color

The primary color is light-blue. It is used all across your interfaces and components.

50 #E1F5FE
100 #B3E5FC
200 #81D4FA
300 #4FC3F7
400 #29B6F6
500 #03A9F4
600 #039BE5
700 #0288D1
800 #0277BD
900 * #01579B

Secondary color

These colors are used as supporting in backgrounds, text colors, separators, etc.

50 #FAFAFA
100 #F5F5F5
200 #EEEEEE
300 #E0E0E0
400 #BDBDBD
500 #9E9E9E
600 #757575
700 #616161
800 * #424242
900 #212121

Critical color

These colors convey an emotion of negativity. Generally used across error states.

50 #FFEBEE
100 #FFCDD2
200 #EF9A9A
300 #E57373
400 #EF5350
500 #F44336
600 * #E53935
700 #D32F2F
800 #C62828
900 #B71C1C

High color

These colors convey an emotion of caution. Generally used across warning states but more priority than medium.

50 #FFF3E0
100 #FFE0B2
200 #FFCC80
300 #FFB74D
400 #FFA726
500 #FF9800
600 * #FB8C00
700 #F57C00
800 #EF6C00
900 #E65100

Medium color

These colors convey the feeling of caution. Generally used across warning states but less priority than high.

50 #FFFDE7
100 #FFF9C4
200 #FFF59D
300 #FFF176
400 #FFEE58
500 #FFEB3B
600 #FDD835
700 * #FBC02D
800 #F9A825
900 #F57F17

Low/Success color

These colors convey an emotion of positivity. Generally used across success or complete states for confirmations about actions.

50 #E8F5E9
100 #C8E6C9
200 #A5D6A7
300 #81C784
400 #66BB6A
500 #4CAF50
600 * #43A047
700 #388E3C
800 #2E7D32
900 #1B5E20

Informative color

Blue colors convey an emotion of stability and confidence. These colors are used for information notifications or to ask users to do something.

50 #E8F0FE
100 #C4D9FD
200 #9DBFFB
300 #76A6F9
400 #4F8DF8
500 * #2873F6
600 #0A5CEB
700 #084DC4
800 #073E9D
900 #052E76

Alternate color

These colors are used as an alternative to primary or secondary colors.

50 #F7F9FC