Colors

Use to ensure brand consistency.

Description

A palette of functional colors used to convey a message or highlight actions. Basic color names are used as key names (purple, green, blue, etc.) with various lighter shades as array elements. Above the base colour there will be a contrast colour which will be usually used as background for elements containing white text. Below the base colour there is a scale of lighter shades which is using a naming convension based on t-shirt sizing, starting from light and scaling down different levels of lightness depending on the base colour. Options for the lighter shades are: light, x-light, 2x-light, 3x-light, 4x-light etc.

Sass Usage

get-color(purple)
// if the base shade is requested the 2nd parameter should not be defined, as it is set to `base` by default
get-color(purple, light)
// the 2nd parameter defines the shade of the color - it is an optional parameter (please see above)

Usage

Usage example

white

  1. get-color(white)

black

  1. get-color(black)

purple

  1. get-color(purple, contrast)
  2. get-color(purple, base)
  3. get-color(purple, light)
  4. get-color(purple, x-light)
  5. get-color(purple, 2x-light)
  6. get-color(purple, 3x-light)

orange

  1. get-color(orange, contrast)
  2. get-color(orange, base)
  3. get-color(orange, light)
  4. get-color(orange, x-light)
  5. get-color(orange, 2x-light)
  6. get-color(orange, 3x-light)

green

  1. get-color(green, contrast)
  2. get-color(green, base)
  3. get-color(green, light)
  4. get-color(green, x-light)
  5. get-color(green, 2x-light)
  6. get-color(green, 3x-light)

red

  1. get-color(red, contrast)
  2. get-color(red, base)
  3. get-color(red, light)
  4. get-color(red, x-light)
  5. get-color(red, 2x-light)
  6. get-color(red, 3x-light)

yellow

  1. get-color(yellow, contrast)
  2. get-color(yellow, base)
  3. get-color(yellow, light)
  4. get-color(yellow, x-light)
  5. get-color(yellow, 2x-light)
  6. get-color(yellow, 3x-light)

blue

  1. get-color(blue, contrast)
  2. get-color(blue, base)
  3. get-color(blue, light)
  4. get-color(blue, x-light)
  5. get-color(blue, 2x-light)
  6. get-color(blue, 3x-light)

grey

  1. get-color(grey, contrast)
  2. get-color(grey, base)
  3. get-color(grey, light)
  4. get-color(grey, x-light)
  5. get-color(grey, 2x-light)
  6. get-color(grey, 3x-light)
  7. get-color(grey, 4x-light)