Shades
←Here are two light and two dark semi transparent shades.
The shades are used in various places, like for placeholder text, skeuomorphic effetcs and stripes. Per default, the shade color is slightly tinted as the main color.
Syntax:
.bg-{state}-{level}
Neutral 50% gray checkers for reference
.bg-shadow-1
.bg-shadow-2
.bg-highlight-1
.bg-highlight-2