Example

$white

$gray-pale

$gray-lighter

$gray-light

$gray

$gray-dark

$gray-darker

$gray-darkest

$black-light

$black

<p><span class="styleguide-swatch with-outline" style="background-color: #ffffff;"></span>$white</p>
<p><span class="styleguide-swatch" style="background-color: #f0f6fa;"></span>$gray-pale</p>
<p><span class="styleguide-swatch" style="background-color: #ebf3f7;"></span>$gray-lighter</p>
<p><span class="styleguide-swatch" style="background-color: #d3dfe6;"></span>$gray-light</p>
<p><span class="styleguide-swatch" style="background-color: #a7bcc7;"></span>$gray</p>
<p><span class="styleguide-swatch" style="background-color: #768d99;"></span>$gray-dark</p>
<p><span class="styleguide-swatch" style="background-color: #5c7380;"></span>$gray-darker</p>
<p><span class="styleguide-swatch" style="background-color: #435159;"></span>$gray-darkest</p>
<p><span class="styleguide-swatch" style="background-color: #323c42;"></span>$black-light</p>
<p><span class="styleguide-swatch" style="background-color: #1d2326;"></span>$black</p>