Section 2
#Color
Colors
DO NOT implement colors outside of these collections. All color should be called using:
map.get($map, $key);
All color variations should be handled through color.adjust(#color, $lightness: -(#percentage);
, which darkens the color,
or color.adjust(#color, $lightness: #percentage);
, which will lighten the color, or rgba
for alpha transparency.
Our Color Utility classes can be found in the Utilities section of the guide, here.
Source:
sass/variables/_color.scss
, line 6
Section 2.1
#Color.BrandColors
Brand Colors
-
navy #003f70 -
skyblue #91b9dc -
lightblue #E5F5FF -
med-blue #3f7bad -
beige #ecd7b1 -
peach #dfa278 -
salmon #e58967 -
brown #866657 -
orange #f48418
Source:
sass/_config.scss
, line 32
Section 2.2
#Color.ErrorColors
Error Colors
-
positive #b5cc18 -
negative tomato -
neutral #999
Source:
sass/variables/_color.scss
, line 41
Section 2.3
#Color.Greyscale
Greyscale
-
white #ffffff -
lighter #efefef -
light #999999 -
base #666666 -
dark #333333 -
black #222222
Source:
sass/variables/_color.scss
, line 19
Section 2.4
#Color.MessageColors
Message Colors
-
info #91b9dc -
warning #ffeeba -
error #ffe5e0 -
success #d4edda
Source:
sass/variables/_color.scss
, line 56
Section 2.5
#Color.SiteColors
Site Colors
-
focus #3f7bad -
menu #003f70 -
link #3f7bad -
help #E5F5FF -
note #FFFDF5 -
help-text #003f70
Source:
sass/_config.scss
, line 62