Color: Default

<h2>Primary Colors</h2>
<div class="swatch-container">
    <div class="swatch js-copy" data-copy="#582C83">
        <div class="color" style="background-color: var( --purple-800-brand);"></div>
        <span>#582C83</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="#003C71">
        <div class="color" style="background-color:var(--blue-900-brand);"></div>
        <span>#003C71</span>
    </div>
</div>
<h2>Default Text Color</h2>
<div class="swatch-container">
    <div class="swatch js-copy" data-copy="#57585A">
        <div class="color" style="background-color:var(--gray-700-brand);"></div>
        <span>#57585A</span>
    </div>
</div>