section#colors
  h2 Colors
  p Colors are available as variables and downloadable <a href='https://github.com/andyet/yeticss/blob/gh-pages/assets/swatches/andyet.aco'>Photoshop swatch</a>.

  h3 Blues
  ul.cf.list-unstyled.list-inline
    li.color.blue1
      p $blue-saturated-darker
      p hsl(195, 100%, 5%)
      p rgb(0, 19, 26)
      p #00131a
    li.color.blue2
      p $blue-saturated-dark
      p hsl(195, 100%, 10%)
      p rgb(0, 38, 51)
      p #002633
    li.color.blue3
      p $blue-saturated
      p hsl(195, 100%, 14%)
      p rgb(0, 54, 71)
      p #003647
    li.color.blue4
      p $blue-saturated-light
      p hsl(195,46%, 22%)
      p rgb(30, 69, 82)
      p #1e4552
    li.color.blue5
      p $blue-saturated-lighter
      p hsl(195,46%, 42%)
      p rgb(58, 132, 156)
      p #3a849c

  ul.cf.list-unstyled.list-inline
    li.color.blue6
      p $blue
      p hsl(195, 100%, 46%)
      p rgb(0, 176, 235)
      p #00b0eb
    li.color.blue7
      p $blue-light
      p hsl(195, 100%, 70%)
      p rgb(102, 217, 255)
      p #66d9ff
    li.color.blue8
      p $blue-lighter
      p hsl(195, 100%, 95%)
      p rgb(230, 249, 255)
      p #e6f9ff

  h3 Monochromatic
  ul.cf.list-unstyled.list-inline
    li.color.gray1
      p $gray-darker
      p hsl(194, 7%, 16%)
      p rgb(38, 42, 44)
      p #262a2c
    li.color.gray2
      p $gray-dark
      p hsl(194, 5%, 33%)
      p rgb(80, 86, 88)
      p #505658
    li.color.gray3
      p $gray
      p hsl(194, 5%, 54%)
      p rgb(132, 141, 144)
      p #848d90
    li.color.gray4
      p $gray-light
      p hsl(194, 9%, 82%)
      p rgb(205, 211, 213)
      p #cdd3d5
    li.color.gray5
      p $gray-lighter
      p hsl(194,9%, 92%)
      p rgb(233, 236, 236)
      p #e9ecec

  h3 Pinks
  ul.cf.list-unstyled.list-inline
    li.color.pink1
      p $pink
      p hsl(326, 94%, 48%)
      p rgb(237, 7, 138)
      p #ed078a
    li.color.pink2
      p $pink-light
      p hsl(344, 97%, 88%)
      p rgb(254, 195, 211)
      p #fec3d3
    li.color.pink3
      p $pink-lighter
      p hsl(326, 94%, 96%)
      p rgb(254, 235, 246)
      p #feebf6

  h3 Reds
  ul.cf.list-unstyled.list-inline
    li.color.red1
      p $red
      p hsl(342, 100%, 45%)
      p rgb(230, 0, 69)
      p #e60045
    li.color.red2
      p $red-light
      p hsl(342, 100%, 89%)
      p rgb(255, 199, 216)
      p #ffc7d8
    li.color.red3
      p $red-lighter
      p hsl(342, 100%, 95%)
      p rgb(255, 230, 237)
      p #ffe6ed

  h3 Oranges
  ul.cf.list-unstyled.list-inline
    li.color.orange1
      p $orange
      p hsl(34, 98%, 48%)
      p rgb(242, 138, 2)
      p #f28a02
    li.color.orange2
      p $orange-light
      p hsl(34, 98%, 74%)
      p rgb(254, 197, 124)
      p #fec57c
    li.color.orange3
      p $orange-lighter
      p hsl(34, 98%, 92%)
      p rgb(255, 237, 215)
      p #ffedd7

  h3 Greens
  ul.cf.list-unstyled.list-inline
    li.color.green1
      p $green
      p hsl(142, 47%, 50%)
      p rgb(68, 187, 112)
      p #44bb70
    li.color.green2
      p $green-light
      p hsl(142, 48%, 85%)
      p rgb(198, 235, 212)
      p #c6ebd4
    li.color.green3
      p $green-lighter
      p hsl(142, 48%, 94%)
      p rgb(232, 247, 238)
      p #e8f7ee