<div class="sg-colors">
<section class="sg-family">
<header class="sg-family__header">
<h2 class="sg-family__title">Visionary blu</h2>
<p class="sg-family__count">10 shades</p>
</header>
<div class="sg-family__grid">
<article class="sg-swatch">
<div class="sg-swatch__preview" style="background-color: hsl(234, 13%, 85%)"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">visionary-blu-10</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>#D3D4DD</code></dd>
<dt>HSL</dt>
<dd><code>hsl(234, 13%, 85%)</code></dd>
</dl>
<ul class="sg-swatch__classes">
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Text color</span>
<code class="sg-swatch__class-name">u-color-visionary-blu-10</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Background color</span>
<code class="sg-swatch__class-name">u-bg-color-visionary-blu-10</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Border color</span>
<code class="sg-swatch__class-name">u-border-color-visionary-blu-10</code>
</li>
</ul>
</div>
</article>
<article class="sg-swatch">
<div class="sg-swatch__preview" style="background-color: hsl(236, 12%, 75%)"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">visionary-blu-50</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>#B6B7C6</code></dd>
<dt>HSL</dt>
<dd><code>hsl(236, 12%, 75%)</code></dd>
</dl>
<ul class="sg-swatch__classes">
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Text color</span>
<code class="sg-swatch__class-name">u-color-visionary-blu-50</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Background color</span>
<code class="sg-swatch__class-name">u-bg-color-visionary-blu-50</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Border color</span>
<code class="sg-swatch__class-name">u-border-color-visionary-blu-50</code>
</li>
</ul>
</div>
</article>
<article class="sg-swatch">
<div class="sg-swatch__preview" style="background-color: hsl(235, 13%, 65%)"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">visionary-blu-100</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>#999BB0</code></dd>
<dt>HSL</dt>
<dd><code>hsl(235, 13%, 65%)</code></dd>
</dl>
<ul class="sg-swatch__classes">
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Text color</span>
<code class="sg-swatch__class-name">u-color-visionary-blu-100</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Background color</span>
<code class="sg-swatch__class-name">u-bg-color-visionary-blu-100</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Border color</span>
<code class="sg-swatch__class-name">u-border-color-visionary-blu-100</code>
</li>
</ul>
</div>
</article>
<article class="sg-swatch">
<div class="sg-swatch__preview" style="background-color: hsl(236, 12%, 54%)"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">visionary-blu-200</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>#7C7E99</code></dd>
<dt>HSL</dt>
<dd><code>hsl(236, 12%, 54%)</code></dd>
</dl>
<ul class="sg-swatch__classes">
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Text color</span>
<code class="sg-swatch__class-name">u-color-visionary-blu-200</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Background color</span>
<code class="sg-swatch__class-name">u-bg-color-visionary-blu-200</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Border color</span>
<code class="sg-swatch__class-name">u-border-color-visionary-blu-200</code>
</li>
</ul>
</div>
</article>
<article class="sg-swatch">
<div class="sg-swatch__preview" style="background-color: hsl(237, 16%, 44%)"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">visionary-blu-300</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>#5F6182</code></dd>
<dt>HSL</dt>
<dd><code>hsl(237, 16%, 44%)</code></dd>
</dl>
<ul class="sg-swatch__classes">
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Text color</span>
<code class="sg-swatch__class-name">u-color-visionary-blu-300</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Background color</span>
<code class="sg-swatch__class-name">u-bg-color-visionary-blu-300</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Border color</span>
<code class="sg-swatch__class-name">u-border-color-visionary-blu-300</code>
</li>
</ul>
</div>
</article>
<article class="sg-swatch">
<div class="sg-swatch__preview" style="background-color: hsl(236, 24%, 34%)"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">visionary-blu-400</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>#42456C</code></dd>
<dt>HSL</dt>
<dd><code>hsl(236, 24%, 34%)</code></dd>
</dl>
<ul class="sg-swatch__classes">
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Text color</span>
<code class="sg-swatch__class-name">u-color-visionary-blu-400</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Background color</span>
<code class="sg-swatch__class-name">u-bg-color-visionary-blu-400</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Border color</span>
<code class="sg-swatch__class-name">u-border-color-visionary-blu-400</code>
</li>
</ul>
</div>
</article>
<article class="sg-swatch">
<div class="sg-swatch__preview" style="background-color: hsl(236, 39%, 24%)"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">visionary-blu-500</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>#252855</code></dd>
<dt>HSL</dt>
<dd><code>hsl(236, 39%, 24%)</code></dd>
</dl>
<ul class="sg-swatch__classes">
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Text color</span>
<code class="sg-swatch__class-name">u-color-visionary-blu-500</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Background color</span>
<code class="sg-swatch__class-name">u-bg-color-visionary-blu-500</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Border color</span>
<code class="sg-swatch__class-name">u-border-color-visionary-blu-500</code>
</li>
</ul>
</div>
</article>
<article class="sg-swatch">
<div class="sg-swatch__preview" style="background-color: hsl(236, 40%, 21%)"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">visionary-blu-600</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>#20234A</code></dd>
<dt>HSL</dt>
<dd><code>hsl(236, 40%, 21%)</code></dd>
</dl>
<ul class="sg-swatch__classes">
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Text color</span>
<code class="sg-swatch__class-name">u-color-visionary-blu-600</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Background color</span>
<code class="sg-swatch__class-name">u-bg-color-visionary-blu-600</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Border color</span>
<code class="sg-swatch__class-name">u-border-color-visionary-blu-600</code>
</li>
</ul>
</div>
</article>
<article class="sg-swatch">
<div class="sg-swatch__preview" style="background-color: hsl(237, 39%, 18%)"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">visionary-blu-700</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>#1C1E40</code></dd>
<dt>HSL</dt>
<dd><code>hsl(237, 39%, 18%)</code></dd>
</dl>
<ul class="sg-swatch__classes">
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Text color</span>
<code class="sg-swatch__class-name">u-color-visionary-blu-700</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Background color</span>
<code class="sg-swatch__class-name">u-bg-color-visionary-blu-700</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Border color</span>
<code class="sg-swatch__class-name">u-border-color-visionary-blu-700</code>
</li>
</ul>
</div>
</article>
<article class="sg-swatch">
<div class="sg-swatch__preview" style="background-color: hsl(236, 39%, 15%)"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">visionary-blu-800</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>#171935</code></dd>
<dt>HSL</dt>
<dd><code>hsl(236, 39%, 15%)</code></dd>
</dl>
<ul class="sg-swatch__classes">
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Text color</span>
<code class="sg-swatch__class-name">u-color-visionary-blu-800</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Background color</span>
<code class="sg-swatch__class-name">u-bg-color-visionary-blu-800</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Border color</span>
<code class="sg-swatch__class-name">u-border-color-visionary-blu-800</code>
</li>
</ul>
</div>
</article>
</div>
</section>
<section class="sg-family">
<header class="sg-family__header">
<h2 class="sg-family__title">Human teal</h2>
<p class="sg-family__count">10 shades</p>
</header>
<div class="sg-family__grid">
<article class="sg-swatch">
<div class="sg-swatch__preview" style="background-color: hsl(164, 56%, 95%)"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">human-teal-10</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>#EAF9F5</code></dd>
<dt>HSL</dt>
<dd><code>hsl(164, 56%, 95%)</code></dd>
</dl>
<ul class="sg-swatch__classes">
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Text color</span>
<code class="sg-swatch__class-name">u-color-human-teal-10</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Background color</span>
<code class="sg-swatch__class-name">u-bg-color-human-teal-10</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Border color</span>
<code class="sg-swatch__class-name">u-border-color-human-teal-10</code>
</li>
</ul>
</div>
</article>
<article class="sg-swatch">
<div class="sg-swatch__preview" style="background-color: hsl(167, 55%, 90%)"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">human-teal-50</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>#D9F4EE</code></dd>
<dt>HSL</dt>
<dd><code>hsl(167, 55%, 90%)</code></dd>
</dl>
<ul class="sg-swatch__classes">
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Text color</span>
<code class="sg-swatch__class-name">u-color-human-teal-50</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Background color</span>
<code class="sg-swatch__class-name">u-bg-color-human-teal-50</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Border color</span>
<code class="sg-swatch__class-name">u-border-color-human-teal-50</code>
</li>
</ul>
</div>
</article>
<article class="sg-swatch">
<div class="sg-swatch__preview" style="background-color: hsl(167, 53%, 86%)"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">human-teal-100</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>#C8EEE6</code></dd>
<dt>HSL</dt>
<dd><code>hsl(167, 53%, 86%)</code></dd>
</dl>
<ul class="sg-swatch__classes">
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Text color</span>
<code class="sg-swatch__class-name">u-color-human-teal-100</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Background color</span>
<code class="sg-swatch__class-name">u-bg-color-human-teal-100</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Border color</span>
<code class="sg-swatch__class-name">u-border-color-human-teal-100</code>
</li>
</ul>
</div>
</article>
<article class="sg-swatch">
<div class="sg-swatch__preview" style="background-color: hsl(167, 53%, 82%)"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">human-teal-200</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>#B7E9DE</code></dd>
<dt>HSL</dt>
<dd><code>hsl(167, 53%, 82%)</code></dd>
</dl>
<ul class="sg-swatch__classes">
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Text color</span>
<code class="sg-swatch__class-name">u-color-human-teal-200</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Background color</span>
<code class="sg-swatch__class-name">u-bg-color-human-teal-200</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Border color</span>
<code class="sg-swatch__class-name">u-border-color-human-teal-200</code>
</li>
</ul>
</div>
</article>
<article class="sg-swatch">
<div class="sg-swatch__preview" style="background-color: hsl(167, 53%, 77%)"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">human-teal-300</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>#A6E4D7</code></dd>
<dt>HSL</dt>
<dd><code>hsl(167, 53%, 77%)</code></dd>
</dl>
<ul class="sg-swatch__classes">
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Text color</span>
<code class="sg-swatch__class-name">u-color-human-teal-300</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Background color</span>
<code class="sg-swatch__class-name">u-bg-color-human-teal-300</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Border color</span>
<code class="sg-swatch__class-name">u-border-color-human-teal-300</code>
</li>
</ul>
</div>
</article>
<article class="sg-swatch">
<div class="sg-swatch__preview" style="background-color: hsl(167, 54%, 73%)"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">human-teal-400</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>#95DFCF</code></dd>
<dt>HSL</dt>
<dd><code>hsl(167, 54%, 73%)</code></dd>
</dl>
<ul class="sg-swatch__classes">
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Text color</span>
<code class="sg-swatch__class-name">u-color-human-teal-400</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Background color</span>
<code class="sg-swatch__class-name">u-bg-color-human-teal-400</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Border color</span>
<code class="sg-swatch__class-name">u-border-color-human-teal-400</code>
</li>
</ul>
</div>
</article>
<article class="sg-swatch">
<div class="sg-swatch__preview" style="background-color: hsl(167, 38%, 66%)"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">human-teal-500</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>#86C9BA</code></dd>
<dt>HSL</dt>
<dd><code>hsl(167, 38%, 66%)</code></dd>
</dl>
<ul class="sg-swatch__classes">
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Text color</span>
<code class="sg-swatch__class-name">u-color-human-teal-500</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Background color</span>
<code class="sg-swatch__class-name">u-bg-color-human-teal-500</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Border color</span>
<code class="sg-swatch__class-name">u-border-color-human-teal-500</code>
</li>
</ul>
</div>
</article>
<article class="sg-swatch">
<div class="sg-swatch__preview" style="background-color: hsl(167, 21%, 51%)"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">human-teal-600</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>#689C91</code></dd>
<dt>HSL</dt>
<dd><code>hsl(167, 21%, 51%)</code></dd>
</dl>
<ul class="sg-swatch__classes">
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Text color</span>
<code class="sg-swatch__class-name">u-color-human-teal-600</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Background color</span>
<code class="sg-swatch__class-name">u-bg-color-human-teal-600</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Border color</span>
<code class="sg-swatch__class-name">u-border-color-human-teal-600</code>
</li>
</ul>
</div>
</article>
<article class="sg-swatch">
<div class="sg-swatch__preview" style="background-color: hsl(167, 20%, 44%)"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">human-teal-700</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>#59867C</code></dd>
<dt>HSL</dt>
<dd><code>hsl(167, 20%, 44%)</code></dd>
</dl>
<ul class="sg-swatch__classes">
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Text color</span>
<code class="sg-swatch__class-name">u-color-human-teal-700</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Background color</span>
<code class="sg-swatch__class-name">u-bg-color-human-teal-700</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Border color</span>
<code class="sg-swatch__class-name">u-border-color-human-teal-700</code>
</li>
</ul>
</div>
</article>
<article class="sg-swatch">
<div class="sg-swatch__preview" style="background-color: hsl(167, 20%, 37%)"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">human-teal-800</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>#4B7068</code></dd>
<dt>HSL</dt>
<dd><code>hsl(167, 20%, 37%)</code></dd>
</dl>
<ul class="sg-swatch__classes">
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Text color</span>
<code class="sg-swatch__class-name">u-color-human-teal-800</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Background color</span>
<code class="sg-swatch__class-name">u-bg-color-human-teal-800</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Border color</span>
<code class="sg-swatch__class-name">u-border-color-human-teal-800</code>
</li>
</ul>
</div>
</article>
</div>
</section>
<section class="sg-family">
<header class="sg-family__header">
<h2 class="sg-family__title">Rebel coral</h2>
<p class="sg-family__count">10 shades</p>
</header>
<div class="sg-family__grid">
<article class="sg-swatch">
<div class="sg-swatch__preview" style="background-color: hsl(357, 100%, 96%)"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">rebel-coral-10</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>#FFE9EA</code></dd>
<dt>HSL</dt>
<dd><code>hsl(357, 100%, 96%)</code></dd>
</dl>
<ul class="sg-swatch__classes">
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Text color</span>
<code class="sg-swatch__class-name">u-color-rebel-coral-10</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Background color</span>
<code class="sg-swatch__class-name">u-bg-color-rebel-coral-10</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Border color</span>
<code class="sg-swatch__class-name">u-border-color-rebel-coral-10</code>
</li>
</ul>
</div>
</article>
<article class="sg-swatch">
<div class="sg-swatch__preview" style="background-color: hsl(0, 100%, 90%)"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">rebel-coral-50</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>#FFCDCD</code></dd>
<dt>HSL</dt>
<dd><code>hsl(0, 100%, 90%)</code></dd>
</dl>
<ul class="sg-swatch__classes">
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Text color</span>
<code class="sg-swatch__class-name">u-color-rebel-coral-50</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Background color</span>
<code class="sg-swatch__class-name">u-bg-color-rebel-coral-50</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Border color</span>
<code class="sg-swatch__class-name">u-border-color-rebel-coral-50</code>
</li>
</ul>
</div>
</article>
<article class="sg-swatch">
<div class="sg-swatch__preview" style="background-color: hsl(359, 100%, 87%)"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">rebel-coral-100</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>#FFBEBF</code></dd>
<dt>HSL</dt>
<dd><code>hsl(359, 100%, 87%)</code></dd>
</dl>
<ul class="sg-swatch__classes">
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Text color</span>
<code class="sg-swatch__class-name">u-color-rebel-coral-100</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Background color</span>
<code class="sg-swatch__class-name">u-bg-color-rebel-coral-100</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Border color</span>
<code class="sg-swatch__class-name">u-border-color-rebel-coral-100</code>
</li>
</ul>
</div>
</article>
<article class="sg-swatch">
<div class="sg-swatch__preview" style="background-color: hsl(359, 100%, 85%)"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">rebel-coral-200</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>#FFB0B1</code></dd>
<dt>HSL</dt>
<dd><code>hsl(359, 100%, 85%)</code></dd>
</dl>
<ul class="sg-swatch__classes">
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Text color</span>
<code class="sg-swatch__class-name">u-color-rebel-coral-200</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Background color</span>
<code class="sg-swatch__class-name">u-bg-color-rebel-coral-200</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Border color</span>
<code class="sg-swatch__class-name">u-border-color-rebel-coral-200</code>
</li>
</ul>
</div>
</article>
<article class="sg-swatch">
<div class="sg-swatch__preview" style="background-color: hsl(359, 100%, 82%)"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">rebel-coral-300</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>#FFA1A2</code></dd>
<dt>HSL</dt>
<dd><code>hsl(359, 100%, 82%)</code></dd>
</dl>
<ul class="sg-swatch__classes">
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Text color</span>
<code class="sg-swatch__class-name">u-color-rebel-coral-300</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Background color</span>
<code class="sg-swatch__class-name">u-bg-color-rebel-coral-300</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Border color</span>
<code class="sg-swatch__class-name">u-border-color-rebel-coral-300</code>
</li>
</ul>
</div>
</article>
<article class="sg-swatch">
<div class="sg-swatch__preview" style="background-color: hsl(359, 100%, 79%)"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">rebel-coral-400</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>#FF9394</code></dd>
<dt>HSL</dt>
<dd><code>hsl(359, 100%, 79%)</code></dd>
</dl>
<ul class="sg-swatch__classes">
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Text color</span>
<code class="sg-swatch__class-name">u-color-rebel-coral-400</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Background color</span>
<code class="sg-swatch__class-name">u-bg-color-rebel-coral-400</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Border color</span>
<code class="sg-swatch__class-name">u-border-color-rebel-coral-400</code>
</li>
</ul>
</div>
</article>
<article class="sg-swatch">
<div class="sg-swatch__preview" style="background-color: hsl(359, 66%, 71%)"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">rebel-coral-500</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>#E68485</code></dd>
<dt>HSL</dt>
<dd><code>hsl(359, 66%, 71%)</code></dd>
</dl>
<ul class="sg-swatch__classes">
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Text color</span>
<code class="sg-swatch__class-name">u-color-rebel-coral-500</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Background color</span>
<code class="sg-swatch__class-name">u-bg-color-rebel-coral-500</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Border color</span>
<code class="sg-swatch__class-name">u-border-color-rebel-coral-500</code>
</li>
</ul>
</div>
</article>
<article class="sg-swatch">
<div class="sg-swatch__preview" style="background-color: hsl(0, 46%, 63%)"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">rebel-coral-600</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>#CC7676</code></dd>
<dt>HSL</dt>
<dd><code>hsl(0, 46%, 63%)</code></dd>
</dl>
<ul class="sg-swatch__classes">
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Text color</span>
<code class="sg-swatch__class-name">u-color-rebel-coral-600</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Background color</span>
<code class="sg-swatch__class-name">u-bg-color-rebel-coral-600</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Border color</span>
<code class="sg-swatch__class-name">u-border-color-rebel-coral-600</code>
</li>
</ul>
</div>
</article>
<article class="sg-swatch">
<div class="sg-swatch__preview" style="background-color: hsl(359, 33%, 55%)"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">rebel-coral-700</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>#B36768</code></dd>
<dt>HSL</dt>
<dd><code>hsl(359, 33%, 55%)</code></dd>
</dl>
<ul class="sg-swatch__classes">
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Text color</span>
<code class="sg-swatch__class-name">u-color-rebel-coral-700</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Background color</span>
<code class="sg-swatch__class-name">u-bg-color-rebel-coral-700</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Border color</span>
<code class="sg-swatch__class-name">u-border-color-rebel-coral-700</code>
</li>
</ul>
</div>
</article>
<article class="sg-swatch">
<div class="sg-swatch__preview" style="background-color: hsl(10, 31%, 43%)"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">rebel-coral-800</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>#8F564B</code></dd>
<dt>HSL</dt>
<dd><code>hsl(10, 31%, 43%)</code></dd>
</dl>
<ul class="sg-swatch__classes">
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Text color</span>
<code class="sg-swatch__class-name">u-color-rebel-coral-800</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Background color</span>
<code class="sg-swatch__class-name">u-bg-color-rebel-coral-800</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Border color</span>
<code class="sg-swatch__class-name">u-border-color-rebel-coral-800</code>
</li>
</ul>
</div>
</article>
</div>
</section>
<section class="sg-family">
<header class="sg-family__header">
<h2 class="sg-family__title">Neutral</h2>
<p class="sg-family__count">3 shades</p>
</header>
<div class="sg-family__grid">
<article class="sg-swatch">
<div class="sg-swatch__preview sg-swatch__preview--bordered" style="background-color: hsl(0, 0%, 100%)"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">neutral-white</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>#FFFFFF</code></dd>
<dt>HSL</dt>
<dd><code>hsl(0, 0%, 100%)</code></dd>
</dl>
<ul class="sg-swatch__classes">
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Text color</span>
<code class="sg-swatch__class-name">u-color-neutral-white</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Background color</span>
<code class="sg-swatch__class-name">u-bg-color-neutral-white</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Border color</span>
<code class="sg-swatch__class-name">u-border-color-neutral-white</code>
</li>
</ul>
</div>
</article>
<article class="sg-swatch">
<div class="sg-swatch__preview sg-swatch__preview--bordered" style="background-color: hsl(60, 15%, 95%)"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">neutral-off-white</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>#F4F4F0</code></dd>
<dt>HSL</dt>
<dd><code>hsl(60, 15%, 95%)</code></dd>
</dl>
<ul class="sg-swatch__classes">
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Text color</span>
<code class="sg-swatch__class-name">u-color-neutral-off-white</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Background color</span>
<code class="sg-swatch__class-name">u-bg-color-neutral-off-white</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Border color</span>
<code class="sg-swatch__class-name">u-border-color-neutral-off-white</code>
</li>
</ul>
</div>
</article>
<article class="sg-swatch">
<div class="sg-swatch__preview sg-swatch__preview--bordered" style="background-color: hsl(0, 0%, 0%)"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">neutral-black</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>#000000</code></dd>
<dt>HSL</dt>
<dd><code>hsl(0, 0%, 0%)</code></dd>
</dl>
<ul class="sg-swatch__classes">
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Text color</span>
<code class="sg-swatch__class-name">u-color-neutral-black</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Background color</span>
<code class="sg-swatch__class-name">u-bg-color-neutral-black</code>
</li>
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">Border color</span>
<code class="sg-swatch__class-name">u-border-color-neutral-black</code>
</li>
</ul>
</div>
</article>
</div>
</section>
</div>
<div class="sg-colors">
{# VISIONARY BLU #}
<section class="sg-family">
<header class="sg-family__header">
<h2 class="sg-family__title">Visionary blu</h2>
<p class="sg-family__count">{{ visionary_blu|length }} shades</p>
</header>
<div class="sg-family__grid">
{% for color in visionary_blu %}
<article class="sg-swatch">
<div class="sg-swatch__preview" style="background-color: {{ color.code }}"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">{{ color.value }}</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>{{ color.hex }}</code></dd>
<dt>HSL</dt>
<dd><code>{{ color.code }}</code></dd>
</dl>
<ul class="sg-swatch__classes">
{% for class in color.classes %}
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">{{ class.desc }}</span>
<code class="sg-swatch__class-name">{{ class.name }}</code>
</li>
{% endfor %}
</ul>
</div>
</article>
{% endfor %}
</div>
</section>
{# HUMAN TEAL #}
<section class="sg-family">
<header class="sg-family__header">
<h2 class="sg-family__title">Human teal</h2>
<p class="sg-family__count">{{ human_teal|length }} shades</p>
</header>
<div class="sg-family__grid">
{% for color in human_teal %}
<article class="sg-swatch">
<div class="sg-swatch__preview" style="background-color: {{ color.code }}"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">{{ color.value }}</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>{{ color.hex }}</code></dd>
<dt>HSL</dt>
<dd><code>{{ color.code }}</code></dd>
</dl>
<ul class="sg-swatch__classes">
{% for class in color.classes %}
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">{{ class.desc }}</span>
<code class="sg-swatch__class-name">{{ class.name }}</code>
</li>
{% endfor %}
</ul>
</div>
</article>
{% endfor %}
</div>
</section>
{# REBEL CORAL #}
<section class="sg-family">
<header class="sg-family__header">
<h2 class="sg-family__title">Rebel coral</h2>
<p class="sg-family__count">{{ rebel_coral|length }} shades</p>
</header>
<div class="sg-family__grid">
{% for color in rebel_coral %}
<article class="sg-swatch">
<div class="sg-swatch__preview" style="background-color: {{ color.code }}"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">{{ color.value }}</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>{{ color.hex }}</code></dd>
<dt>HSL</dt>
<dd><code>{{ color.code }}</code></dd>
</dl>
<ul class="sg-swatch__classes">
{% for class in color.classes %}
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">{{ class.desc }}</span>
<code class="sg-swatch__class-name">{{ class.name }}</code>
</li>
{% endfor %}
</ul>
</div>
</article>
{% endfor %}
</div>
</section>
{# NEUTRAL #}
<section class="sg-family">
<header class="sg-family__header">
<h2 class="sg-family__title">Neutral</h2>
<p class="sg-family__count">{{ neutral|length }} shades</p>
</header>
<div class="sg-family__grid">
{% for color in neutral %}
<article class="sg-swatch">
<div class="sg-swatch__preview sg-swatch__preview--bordered" style="background-color: {{ color.code }}"></div>
<div class="sg-swatch__body">
<p class="sg-swatch__name">{{ color.value }}</p>
<dl class="sg-swatch__values">
<dt>HEX</dt>
<dd><code>{{ color.hex }}</code></dd>
<dt>HSL</dt>
<dd><code>{{ color.code }}</code></dd>
</dl>
<ul class="sg-swatch__classes">
{% for class in color.classes %}
<li class="sg-swatch__class">
<span class="sg-swatch__class-desc">{{ class.desc }}</span>
<code class="sg-swatch__class-name">{{ class.name }}</code>
</li>
{% endfor %}
</ul>
</div>
</article>
{% endfor %}
</div>
</section>
</div>
{
"visionary_blu": [
{
"value": "visionary-blu-10",
"code": "hsl(234, 13%, 85%)",
"hex": "#D3D4DD",
"classes": [
{
"desc": "Text color",
"name": "u-color-visionary-blu-10"
},
{
"desc": "Background color",
"name": "u-bg-color-visionary-blu-10"
},
{
"desc": "Border color",
"name": "u-border-color-visionary-blu-10"
}
]
},
{
"value": "visionary-blu-50",
"code": "hsl(236, 12%, 75%)",
"hex": "#B6B7C6",
"classes": [
{
"desc": "Text color",
"name": "u-color-visionary-blu-50"
},
{
"desc": "Background color",
"name": "u-bg-color-visionary-blu-50"
},
{
"desc": "Border color",
"name": "u-border-color-visionary-blu-50"
}
]
},
{
"value": "visionary-blu-100",
"code": "hsl(235, 13%, 65%)",
"hex": "#999BB0",
"classes": [
{
"desc": "Text color",
"name": "u-color-visionary-blu-100"
},
{
"desc": "Background color",
"name": "u-bg-color-visionary-blu-100"
},
{
"desc": "Border color",
"name": "u-border-color-visionary-blu-100"
}
]
},
{
"value": "visionary-blu-200",
"code": "hsl(236, 12%, 54%)",
"hex": "#7C7E99",
"classes": [
{
"desc": "Text color",
"name": "u-color-visionary-blu-200"
},
{
"desc": "Background color",
"name": "u-bg-color-visionary-blu-200"
},
{
"desc": "Border color",
"name": "u-border-color-visionary-blu-200"
}
]
},
{
"value": "visionary-blu-300",
"code": "hsl(237, 16%, 44%)",
"hex": "#5F6182",
"classes": [
{
"desc": "Text color",
"name": "u-color-visionary-blu-300"
},
{
"desc": "Background color",
"name": "u-bg-color-visionary-blu-300"
},
{
"desc": "Border color",
"name": "u-border-color-visionary-blu-300"
}
]
},
{
"value": "visionary-blu-400",
"code": "hsl(236, 24%, 34%)",
"hex": "#42456C",
"classes": [
{
"desc": "Text color",
"name": "u-color-visionary-blu-400"
},
{
"desc": "Background color",
"name": "u-bg-color-visionary-blu-400"
},
{
"desc": "Border color",
"name": "u-border-color-visionary-blu-400"
}
]
},
{
"value": "visionary-blu-500",
"code": "hsl(236, 39%, 24%)",
"hex": "#252855",
"classes": [
{
"desc": "Text color",
"name": "u-color-visionary-blu-500"
},
{
"desc": "Background color",
"name": "u-bg-color-visionary-blu-500"
},
{
"desc": "Border color",
"name": "u-border-color-visionary-blu-500"
}
]
},
{
"value": "visionary-blu-600",
"code": "hsl(236, 40%, 21%)",
"hex": "#20234A",
"classes": [
{
"desc": "Text color",
"name": "u-color-visionary-blu-600"
},
{
"desc": "Background color",
"name": "u-bg-color-visionary-blu-600"
},
{
"desc": "Border color",
"name": "u-border-color-visionary-blu-600"
}
]
},
{
"value": "visionary-blu-700",
"code": "hsl(237, 39%, 18%)",
"hex": "#1C1E40",
"classes": [
{
"desc": "Text color",
"name": "u-color-visionary-blu-700"
},
{
"desc": "Background color",
"name": "u-bg-color-visionary-blu-700"
},
{
"desc": "Border color",
"name": "u-border-color-visionary-blu-700"
}
]
},
{
"value": "visionary-blu-800",
"code": "hsl(236, 39%, 15%)",
"hex": "#171935",
"classes": [
{
"desc": "Text color",
"name": "u-color-visionary-blu-800"
},
{
"desc": "Background color",
"name": "u-bg-color-visionary-blu-800"
},
{
"desc": "Border color",
"name": "u-border-color-visionary-blu-800"
}
]
}
],
"human_teal": [
{
"value": "human-teal-10",
"code": "hsl(164, 56%, 95%)",
"hex": "#EAF9F5",
"classes": [
{
"desc": "Text color",
"name": "u-color-human-teal-10"
},
{
"desc": "Background color",
"name": "u-bg-color-human-teal-10"
},
{
"desc": "Border color",
"name": "u-border-color-human-teal-10"
}
]
},
{
"value": "human-teal-50",
"code": "hsl(167, 55%, 90%)",
"hex": "#D9F4EE",
"classes": [
{
"desc": "Text color",
"name": "u-color-human-teal-50"
},
{
"desc": "Background color",
"name": "u-bg-color-human-teal-50"
},
{
"desc": "Border color",
"name": "u-border-color-human-teal-50"
}
]
},
{
"value": "human-teal-100",
"code": "hsl(167, 53%, 86%)",
"hex": "#C8EEE6",
"classes": [
{
"desc": "Text color",
"name": "u-color-human-teal-100"
},
{
"desc": "Background color",
"name": "u-bg-color-human-teal-100"
},
{
"desc": "Border color",
"name": "u-border-color-human-teal-100"
}
]
},
{
"value": "human-teal-200",
"code": "hsl(167, 53%, 82%)",
"hex": "#B7E9DE",
"classes": [
{
"desc": "Text color",
"name": "u-color-human-teal-200"
},
{
"desc": "Background color",
"name": "u-bg-color-human-teal-200"
},
{
"desc": "Border color",
"name": "u-border-color-human-teal-200"
}
]
},
{
"value": "human-teal-300",
"code": "hsl(167, 53%, 77%)",
"hex": "#A6E4D7",
"classes": [
{
"desc": "Text color",
"name": "u-color-human-teal-300"
},
{
"desc": "Background color",
"name": "u-bg-color-human-teal-300"
},
{
"desc": "Border color",
"name": "u-border-color-human-teal-300"
}
]
},
{
"value": "human-teal-400",
"code": "hsl(167, 54%, 73%)",
"hex": "#95DFCF",
"classes": [
{
"desc": "Text color",
"name": "u-color-human-teal-400"
},
{
"desc": "Background color",
"name": "u-bg-color-human-teal-400"
},
{
"desc": "Border color",
"name": "u-border-color-human-teal-400"
}
]
},
{
"value": "human-teal-500",
"code": "hsl(167, 38%, 66%)",
"hex": "#86C9BA",
"classes": [
{
"desc": "Text color",
"name": "u-color-human-teal-500"
},
{
"desc": "Background color",
"name": "u-bg-color-human-teal-500"
},
{
"desc": "Border color",
"name": "u-border-color-human-teal-500"
}
]
},
{
"value": "human-teal-600",
"code": "hsl(167, 21%, 51%)",
"hex": "#689C91",
"classes": [
{
"desc": "Text color",
"name": "u-color-human-teal-600"
},
{
"desc": "Background color",
"name": "u-bg-color-human-teal-600"
},
{
"desc": "Border color",
"name": "u-border-color-human-teal-600"
}
]
},
{
"value": "human-teal-700",
"code": "hsl(167, 20%, 44%)",
"hex": "#59867C",
"classes": [
{
"desc": "Text color",
"name": "u-color-human-teal-700"
},
{
"desc": "Background color",
"name": "u-bg-color-human-teal-700"
},
{
"desc": "Border color",
"name": "u-border-color-human-teal-700"
}
]
},
{
"value": "human-teal-800",
"code": "hsl(167, 20%, 37%)",
"hex": "#4B7068",
"classes": [
{
"desc": "Text color",
"name": "u-color-human-teal-800"
},
{
"desc": "Background color",
"name": "u-bg-color-human-teal-800"
},
{
"desc": "Border color",
"name": "u-border-color-human-teal-800"
}
]
}
],
"rebel_coral": [
{
"value": "rebel-coral-10",
"code": "hsl(357, 100%, 96%)",
"hex": "#FFE9EA",
"classes": [
{
"desc": "Text color",
"name": "u-color-rebel-coral-10"
},
{
"desc": "Background color",
"name": "u-bg-color-rebel-coral-10"
},
{
"desc": "Border color",
"name": "u-border-color-rebel-coral-10"
}
]
},
{
"value": "rebel-coral-50",
"code": "hsl(0, 100%, 90%)",
"hex": "#FFCDCD",
"classes": [
{
"desc": "Text color",
"name": "u-color-rebel-coral-50"
},
{
"desc": "Background color",
"name": "u-bg-color-rebel-coral-50"
},
{
"desc": "Border color",
"name": "u-border-color-rebel-coral-50"
}
]
},
{
"value": "rebel-coral-100",
"code": "hsl(359, 100%, 87%)",
"hex": "#FFBEBF",
"classes": [
{
"desc": "Text color",
"name": "u-color-rebel-coral-100"
},
{
"desc": "Background color",
"name": "u-bg-color-rebel-coral-100"
},
{
"desc": "Border color",
"name": "u-border-color-rebel-coral-100"
}
]
},
{
"value": "rebel-coral-200",
"code": "hsl(359, 100%, 85%)",
"hex": "#FFB0B1",
"classes": [
{
"desc": "Text color",
"name": "u-color-rebel-coral-200"
},
{
"desc": "Background color",
"name": "u-bg-color-rebel-coral-200"
},
{
"desc": "Border color",
"name": "u-border-color-rebel-coral-200"
}
]
},
{
"value": "rebel-coral-300",
"code": "hsl(359, 100%, 82%)",
"hex": "#FFA1A2",
"classes": [
{
"desc": "Text color",
"name": "u-color-rebel-coral-300"
},
{
"desc": "Background color",
"name": "u-bg-color-rebel-coral-300"
},
{
"desc": "Border color",
"name": "u-border-color-rebel-coral-300"
}
]
},
{
"value": "rebel-coral-400",
"code": "hsl(359, 100%, 79%)",
"hex": "#FF9394",
"classes": [
{
"desc": "Text color",
"name": "u-color-rebel-coral-400"
},
{
"desc": "Background color",
"name": "u-bg-color-rebel-coral-400"
},
{
"desc": "Border color",
"name": "u-border-color-rebel-coral-400"
}
]
},
{
"value": "rebel-coral-500",
"code": "hsl(359, 66%, 71%)",
"hex": "#E68485",
"classes": [
{
"desc": "Text color",
"name": "u-color-rebel-coral-500"
},
{
"desc": "Background color",
"name": "u-bg-color-rebel-coral-500"
},
{
"desc": "Border color",
"name": "u-border-color-rebel-coral-500"
}
]
},
{
"value": "rebel-coral-600",
"code": "hsl(0, 46%, 63%)",
"hex": "#CC7676",
"classes": [
{
"desc": "Text color",
"name": "u-color-rebel-coral-600"
},
{
"desc": "Background color",
"name": "u-bg-color-rebel-coral-600"
},
{
"desc": "Border color",
"name": "u-border-color-rebel-coral-600"
}
]
},
{
"value": "rebel-coral-700",
"code": "hsl(359, 33%, 55%)",
"hex": "#B36768",
"classes": [
{
"desc": "Text color",
"name": "u-color-rebel-coral-700"
},
{
"desc": "Background color",
"name": "u-bg-color-rebel-coral-700"
},
{
"desc": "Border color",
"name": "u-border-color-rebel-coral-700"
}
]
},
{
"value": "rebel-coral-800",
"code": "hsl(10, 31%, 43%)",
"hex": "#8F564B",
"classes": [
{
"desc": "Text color",
"name": "u-color-rebel-coral-800"
},
{
"desc": "Background color",
"name": "u-bg-color-rebel-coral-800"
},
{
"desc": "Border color",
"name": "u-border-color-rebel-coral-800"
}
]
}
],
"neutral": [
{
"value": "neutral-white",
"code": "hsl(0, 0%, 100%)",
"hex": "#FFFFFF",
"classes": [
{
"desc": "Text color",
"name": "u-color-neutral-white"
},
{
"desc": "Background color",
"name": "u-bg-color-neutral-white"
},
{
"desc": "Border color",
"name": "u-border-color-neutral-white"
}
]
},
{
"value": "neutral-off-white",
"code": "hsl(60, 15%, 95%)",
"hex": "#F4F4F0",
"classes": [
{
"desc": "Text color",
"name": "u-color-neutral-off-white"
},
{
"desc": "Background color",
"name": "u-bg-color-neutral-off-white"
},
{
"desc": "Border color",
"name": "u-border-color-neutral-off-white"
}
]
},
{
"value": "neutral-black",
"code": "hsl(0, 0%, 0%)",
"hex": "#000000",
"classes": [
{
"desc": "Text color",
"name": "u-color-neutral-black"
},
{
"desc": "Background color",
"name": "u-bg-color-neutral-black"
},
{
"desc": "Border color",
"name": "u-border-color-neutral-black"
}
]
}
]
}
No notes defined.