Colors
The color palette is comprised of 12 core colors. The grays are used for backgrounds, borders and elements that are disabled. The brightest colors in the palette - orange, red, pink and blue - are used to draw attention to a user. Finally, the most dominant colors - purple and green - are used for navigation and basic interactions. Shades of these colors can be used if needed. It's best to generate them through the lighten() / darken() Sass functions.
Primary Colors
-
Purple Base
- Variable Value: $purple-base
- Hex Value: #6179B6
- RGBA Value: 97, 121, 182, 1
-
Green Base
- Variable Value: $green-base
- Hex Value: #239D94
- RGBA Value: 35, 157, 148, 1
Secondary Colors
-
Black Light
- Variable Value: $black-light
- Hex Value: #26343F
- RGBA Value: 38, 52, 63, 1
-
Black Base
- Variable Value: $black-base
- Hex Value: #171F26
- RGBA Value: 23, 31, 38, 1
-
Black Dark
- Variable Value: $black-dark
- Hex Value: #10161C
- RGBA Value: 16, 22, 28, 1
-
Orange Base
- Variable Value: $orange-base
- Hex Value: #E78215
- RGBA Value: 231, 130, 21, 1
-
Red Base
- Variable Value: $red-base
- Hex Value: #F63E54
- RGBA Value: 246, 62, 84, 1
-
Pink Base
- Variable Value: $pink-base
- Hex Value: #FF5EB1
- RGBA Value: 255, 94, 177, 1
-
Purple Bright
- Variable Value: $purple-bright
- Hex Value: #9B59B6
- RGBA Value: 155, 89, 182, 1
-
Purple Dark
- Variable Value: $purple-dark
- Hex Value: #34445D
- RGBA Value: 52, 68, 93, 1
-
Blue Base
- Variable Value: $blue-base
- Hex Value: #5CB8D9
- RGBA Value: 92, 184, 217, 1
-
Blue Dark
- Variable Value: $blue-dark
- Hex Value: #2C6073
- RGBA Value: 45, 96, 115, 1
Background / Accent Colors
-
White Base
- Variable Value: $white-base
- Hex Value: #FFFFFF
- RGBA Value: 255, 255, 255, 1
-
Grey Light
- Variable Value: $grey-light
- Hex Value: #F3F3F3
- RGBA Value: 243, 243, 243, 1
-
Grey Base
- Variable Value: $grey-base
- Hex Value: #B1B1B2
- RGBA Value: 177, 177, 178, 1
-
Grey Dark
- Variable Value: $grey-dark
- Hex Value: #8C8C94
- RGBA Value: 140, 140, 148, 1
-
Grey Darkest
- Variable Value: $grey-darkest
- Hex Value: #222A31
- RGBA Value: 34, 42, 49, 1
-
Grey Alt
- Variable Value: $grey-alt
- Hex Value: #EBEFF1
- RGBA Value: 235, 239, 241, 1
-
Grey Alt 2
- Variable Value: $grey-alt-2
- Hex Value: #CDD8DD
- RGBA Value: 205, 216, 221, 1
-
Grey Alt 3
- Variable Value: $grey-alt-3
- Hex Value: #383F46
- RGBA Value: 56, 63, 70, 1