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 46

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.PlatformColors
Platform Colors

  • focus #3f7bad
  • menu #003f70
  • link #3f7bad
  • help #E5F5FF
  • note #FFFDF5
  • help-text #003f70
Source: sass/_config.scss, line 96

Section 2.6 #Color.SecondaryColors
Secondary Colors

  • red tomato
  • olive #b5cc18
  • purple purple
  • yellow #FBBD08
  • pink pink
  • cyan cyan
  • violet #6435C9
  • blue #3f7bad
  • green #21BA45
  • teal teal
  • gold #ffcc00
Source: sass/_config.scss, line 61