Here's How the Colors Work

There are 4 primary brand colors and 7 automatically generated variations of each color: hover, ultra-light, light, medium, dark, ultra-dark, and complimentary along with six automatically generated opacities. There's also black, white, and 5 grey shades. How cool is that?
 primary-ultra-light
primary-light
base-medium
primary-dark
primary-ultra-dark
primary-trans-10%
primary-trans-20%
primary-trans-40%
primary-trans-60%
primary-trans-80%
primary-trans-90%
primary-comp
 secondary-ultra-light
primary-light
base-medium
primary-dark
primary-ultra-dark
primary-trans-10%
primary-trans-20%
primary-trans-40%
primary-trans-60%
primary-trans-80%
primary-trans-90%
primary-comp
 secondary-ultra-light
primary-light
base-medium
primary-dark
primary-ultra-dark
primary-trans-10%
primary-trans-20%
primary-trans-40%
primary-trans-60%
primary-trans-80%
primary-trans-90%
primary-comp
 secondary-ultra-light
primary-light
base-medium
primary-dark
primary-ultra-dark
primary-trans-10%
primary-trans-20%
primary-trans-40%
primary-trans-60%
primary-trans-80%
primary-trans-90%
primary-comp