Colours

The main colours of Manitou convey the identity of the brand. The gray variations help to create hierarchy, depth and clear readability within the apps.

You can find the below components in _colors.scss.




Main Colours

Red

($red)
HEX: #e2001a

Black

($black)
HEX: #333

Text color

($text-color)
HEX: #444

Text gray

($text-gray)
HEX: #b2b2b2

Body background

($body-bg)
HEX: #fafafa



Gray Backgrounds

Gray background

($gray-bckg)
HEX: #ededed

Gray background dark

($gray-bckg-dark)
HEX: #d9d9d9

Gray background light

($gray-bckg-light)
HEX: #fcfcfc



Gray Borders

Gray border

($gray-border)
HEX: #d5d5d5

Gray border light

($gray-border-light)
HEX: #f0f0f0

Gray border lighter

($gray-border-lighter)
HEX: #f2f2f2

Gray border dark

($gray-border-dark)
HEX: #c3c3c3



Gradients

Gray gradient

Mixin: gradient-vertical()
HEX top: #bbb (0%)
HEX bottom: #ccc (100%)

Red gradient

Mixin: gradient-vertical()
HEX top: #e2001a (0%)
HEX bottom: #c20016 (100%)

Dark gradient

Mixin: gradient-vertical()
HEX top: #555 (0%)
HEX bottom: #4c4c4cc (100%)