<h2>Purple</h2>
<div class="swatch-container">
<div class="swatch js-copy" data-copy="#4F277A">
<div class="color" style="background-color: var(--purple-900);"></div>
<span>#4F277A</span>
</div>
<div class="swatch js-copy" data-copy="#582C83">
<div class="color brand-color" style="background-color: var( --purple-800-brand);"></div>
<span>#582C83</span>
</div>
<div class="swatch js-copy" data-copy="#5E308A">
<div class="color" style="background-color: var( --purple-700);"></div>
<span>#5E308A</span>
</div>
<div class="swatch js-copy" data-copy="#663491">
<div class="color" style="background-color: var( --purple-600);"></div>
<span>#663491</span>
</div>
<div class="swatch js-copy" data-copy="#743DA1">
<div class="color" style="background-color: var( --purple-500);"></div>
<span>#743DA1</span>
</div>
<div class="swatch js-copy" data-copy="#8246AF">
<div class="color brand-color" style="background-color: var( --purple-400-brand);"></div>
<span>#8246AF</span>
</div>
<div class="swatch js-copy" data-copy="#9967BF">
<div class="color" style="background-color: var( --purple-300);"></div>
<span>#9967BF</span>
</div>
<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="#D3BFE3">
<div class="color" style="background-color: var( --purple-100);"></div>
<span>#D3BFE3</span>
</div>
</div>
<h2>Orange/Yellow</h2>
<div class="swatch-container">
<div class="swatch js-copy" data-copy="#EF6D00">
<div class="color" style="background-color: var(--orange-900);"></div>
<span>#EF6D00</span>
</div>
<div class="swatch js-copy" data-copy="#F57D00">
<div class="color" style="background-color: var( --orange-800);"></div>
<span>#F57D00</span>
</div>
<div class="swatch js-copy" data-copy="#FB8D00">
<div class="color" style="background-color: var( --orange-700);"></div>
<span>#FB8D00</span>
</div>
<div class="swatch js-copy" data-copy="#FF9800">
<div class="color brand-color" style="background-color: var( --orange-600-brand);"></div>
<span>#FF9800</span>
</div>
<div class="swatch js-copy" data-copy="#FFA600">
<div class="color" style="background-color: var( --orange-500);"></div>
<span>#FFA600</span>
</div>
<div class="swatch js-copy" data-copy="#FFB300">
<div class="color" style="background-color: var( --yellow-400);"></div>
<span>#FFB300</span>
</div>
<div class="swatch js-copy" data-copy="#FEC10D">
<div class="color brand-color" style="background-color: var( --yellow-300-brand);"></div>
<span>#FEC10D</span>
</div>
<div class="swatch js-copy" data-copy="#FECB2A">
<div class="color" style="background-color: var( --yellow-200);"></div>
<span>#FECB2A</span>
</div>
<div class="swatch js-copy" data-copy="#FED650">
<div class="color" style="background-color: var( --yellow-100);"></div>
<span>#FED650</span>
</div>
</div>
<h2>Green</h2>
<div class="swatch-container">
<div class="swatch js-copy" data-copy="#1B6500">
<div class="color" style="background-color: var(--green-900);"></div>
<span>#1B6500</span>
</div>
<div class="swatch js-copy" data-copy="#498700">
<div class="color" style="background-color: var( --green-800);"></div>
<span>#498700</span>
</div>
<div class="swatch js-copy" data-copy="#5F9A00">
<div class="color" style="background-color: var( --green-700);"></div>
<span>#5F9A00</span>
</div>
<div class="swatch js-copy" data-copy="#74AD00">
<div class="color" style="background-color: var( --green-600);"></div>
<span>#74AD00</span>
</div>
<div class="swatch js-copy" data-copy="#84BD00">
<div class="color brand-color" style="background-color: var( --green-500-brand);"></div>
<span>#84BD00</span>
</div>
<div class="swatch js-copy" data-copy="#97C73E">
<div class="color" style="background-color: var( --green-400);"></div>
<span>#97C73E</span>
</div>
<div class="swatch js-copy" data-copy="#ABD064">
<div class="color" style="background-color: var( --green-300);"></div>
<span>#ABD064</span>
</div>
<div class="swatch js-copy" data-copy="#C4DD92">
<div class="color" style="background-color: var( --green-200);"></div>
<span>#C4DD92</span>
</div>
<div class="swatch js-copy" data-copy="#DCEBBD">
<div class="color" style="background-color: var( --green-100);"></div>
<span>#DCEBBD</span>
</div>
</div>
<h2>Blue</h2>
<div class="swatch-container">
<div class="swatch js-copy" data-copy="#003C71">
<div class="color brand-color" style="background-color: var(--blue-900-brand);"></div>
<span>#003C71</span>
</div>
<div class="swatch js-copy" data-copy="#105890">
<div class="color" style="background-color: var( --blue-800);"></div>
<span>#105890</span>
</div>
<div class="swatch js-copy" data-copy="#1968A1">
<div class="color" style="background-color: var( --blue-700);"></div>
<span>#1968A1</span>
</div>
<div class="swatch js-copy" data-copy="#2578B2">
<div class="color" style="background-color: var( --blue-600);"></div>
<span>#2578B2</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 class="swatch js-copy" data-copy="#4995C6">
<div class="color" style="background-color: var( --blue-400);"></div>
<span>#4995C6</span>
</div>
<div class="swatch js-copy" data-copy="#66A6CE">
<div class="color" style="background-color: var( --blue-300);"></div>
<span>#66A6CE</span>
</div>
<div class="swatch js-copy" data-copy="#8EBFDD">
<div class="color" style="background-color: var( --blue-200);"></div>
<span>#8EBFDD</span>
</div>
<div class="swatch js-copy" data-copy="#B8D8EA">
<div class="color" style="background-color: var( --blue-100);"></div>
<span>#B8D8EA</span>
</div>
</div>
<h2>Gray</h2>
<div class="swatch-container">
<div class="swatch js-copy" data-copy="#393A3B">
<div class="color" style="background-color: var( --gray-800);"></div>
<span>#393A3B</span>
</div>
<div class="swatch js-copy" data-copy="#57585A">
<div class="color brand-color" style="background-color: var( --gray-700-brand);"></div>
<span>#57585A</span>
</div>
<div class="swatch js-copy" data-copy="#6A6B6E">
<div class="color" style="background-color: var( --gray-600);"></div>
<span>#6A6B6E</span>
</div>
<div class="swatch js-copy" data-copy="#939496">
<div class="color" style="background-color: var( --gray-500);"></div>
<span>#939496</span>
</div>
<div class="swatch js-copy" data-copy="#B2B4B6">
<div class="color" style="background-color: var( --gray-400);"></div>
<span>#B2B4B6</span>
</div>
<div class="swatch js-copy" data-copy="#D6D8DA">
<div class="color" style="background-color: var( --gray-300);"></div>
<span>#D6D8DA</span>
</div>
<div class="swatch js-copy" data-copy="#E7E8EA">
<div class="color" style="background-color: var( --gray-200);"></div>
<span>#E7E8EA</span>
</div>
<div class="swatch js-copy" data-copy="#F0F1F4">
<div class="color" style="background-color: var( --gray-100);"></div>
<span>#F0F1F4</span>
</div>
</div>
<h2>Special</h2>
<div class="swatch-container">
<div class="swatch js-copy" data-copy="#C41E3D">
<div class="color" style="background-color: var(--red);"></div>
<span>#C41E3D</span>
</div>
<div class="swatch js-copy" data-copy="#000000">
<div class="color" style="background-color: var( --black);"></div>
<span>#000000</span>
</div>
<div class="swatch js-copy" data-copy="#FFFFFF">
<div class="color" style="background-color: var( --white); border: 1px solid var(--gray-700-brand);"></div>
<span>#FFFFFF</span>
</div>
</div>
No notes defined.