---
name: Grayscale
heading: This muted palette is used for complementary visual structure
---

<ol class="swatches">
	<li class="swatch -white">@white</li>
	<li class="swatch -lightest-gray">@lightestGray</li>
	<li class="swatch -lighter-gray">@lighterGray</li>
	<li class="swatch -light-gray">@lightGray</li>
	<li class="swatch -gray">@gray</li>
	<li class="swatch -dark-gray">@darkGray</li>
	<li class="swatch -darker-gray">@darkerGray</li>
	<li class="swatch -darkest-gray">@darkestGray</li>
	<li class="swatch -black">@black</li>
</ol>