<div class="colors columns-">
<div class="color white-text" style="background:#141414">
<h2>Darkest Grey</h2>
<p><code>#141414</code></p>
<p><code>$grey90</code></p>
</div>
<div class="color white-text" style="background:#666">
<h2>Dark Grey</h2>
<p><code>#666</code></p>
<p><code>$grey70</code></p>
</div>
<div class="color white-text" style="background:#8f8f8f">
<h2>Medium-Dark Grey</h2>
<p><code>#8f8f8f</code></p>
<p><code>$grey50</code></p>
</div>
<div class="color" style="background:#c5c5c5">
<h2>Medium Grey</h2>
<p><code>#c5c5c5</code></p>
<p><code>$grey30</code></p>
</div>
<div class="color" style="background:#e6e6e6">
<h2>Medium-Light Grey</h2>
<p><code>#e6e6e6</code></p>
<p><code>$grey10</code></p>
</div>
<div class="color" style="background:#f4f4f4">
<h2>Light Grey</h2>
<p><code>#f4f4f4</code></p>
<p><code>$grey05</code></p>
</div>
<div class="color" style="background:#fafafa">
<h2>Lightest Grey</h2>
<p><code>#fafafa</code></p>
<p><code>$grey02</code></p>
</div>
</div>
<div class="colors columns-{{columns}}">
{{#each colors }}
<div class="color{{#if dark}} white-text{{/if}}" style="background:#{{hex}}">
<h2>{{ name }}</h2>
<p><code>#{{ hex }}</code></p>
<p><code>${{ var }}</code></p>
</div>
{{/each}}
</div>
{
"colors": [
{
"name": "Darkest Grey",
"hex": "141414",
"var": "grey90",
"dark": true
},
{
"name": "Dark Grey",
"hex": "666",
"var": "grey70",
"dark": true
},
{
"name": "Medium-Dark Grey",
"hex": "8f8f8f",
"var": "grey50",
"dark": true
},
{
"name": "Medium Grey",
"hex": "c5c5c5",
"var": "grey30"
},
{
"name": "Medium-Light Grey",
"hex": "e6e6e6",
"var": "grey10"
},
{
"name": "Light Grey",
"hex": "f4f4f4",
"var": "grey05"
},
{
"name": "Lightest Grey",
"hex": "fafafa",
"var": "grey02"
}
]
}