• hsl(352, 92%, 38%)
    $c-red
  • hsl(195, 83%, 84%)
    $c-blue
  • hsl(33, 93%, 54%)
    $c-orange
  • hsla(33, 93%, 54%, .85)
    $c-orange-transparent
  • white
    $c-white
  • hsl(0, 0%, 95%)
    $c-gray--lightest
  • hsla(0, 0%, 95%, .1)
    $c-gray--lightest--transparent
  • hsl(0, 0%, 80%)
    $c-gray--lighter
  • hsla(0, 0%, 80%, .2)
    $c-gray--lighter--transparent
  • hsl(0, 0%, 60%)
    $c-gray--light
  • hsl(0, 0%, 48%)
    $c-gray
  • hsl(0, 0%, 40%)
    $c-gray--dark
  • hsl(0, 0%, 25%)
    $c-gray--darker
  • hsla(0, 0%, 20%, .75)
    $c-gray--darker--transparent
  • hsl(0, 0%, 16.1%)
    $c-gray--darkest
  • hsla(0, 0%, 16.1%, .85)
    $c-gray--darkest--transparent
  • black
    $c-black

To add to these items, use Sass variables that start with $c- in source/_patterns/00-base/01-colors/_color-vars.scss