<h2>Primary Colors</h2>
<div class="swatch-container">
<div class="swatch js-copy" data-copy="#b794d1">
<div class="color" style="background-color: var( --purple-200);"></div>
<span>#b794d1</span>
</div>
<div class="swatch js-copy" data-copy="#FEC10D">
<div class="color" style="background-color: var(--yellow-300-brand);"></div>
<span>#FEC10D</span>
</div>
</div>
<h2>Secondary Colors</h2>
<div class="swatch-container">
<div class="swatch js-copy" data-copy="#8246AF">
<div class="color" style="background-color:var(--purple-400-brand);"></div>
<span>#8246AF</span>
</div>
<div class="swatch js-copy" data-copy="#FF9800">
<div class="color" style="background-color:var(--orange-600-brand);"></div>
<span>#FF9800</span>
</div>
<div class="swatch js-copy" data-copy="#84BD00">
<div class="color" style="background-color:var(--green-500-brand);"></div>
<span>#84BD00</span>
</div>
<div class="swatch js-copy" data-copy="#2E85BE">
<div class="color" style="background-color:var(--blue-500);"></div>
<span>#2E85BE</span>
</div>
</div>
<h2>Other Dark Mode Colors</h2>
<div class="swatch-container">
<div class="swatch js-copy" data-copy="#f0f1f4">
<div class="color" style="background-color:var(--gray-100);"></div>
<span>#f0f1f4 <br><small>Text</small></span>
</div>
<div class="swatch js-copy" data-copy="#1a1221">
<div class="color" style="background-color:#1a1221;border: 1px solid var(--gray-700);"></div>
<span>#1a1221 <br><small>Background</small></span>
</div>
</div>
No notes defined.