<h2 class="label">User Interface Palette</h2>
<div class="flex-row ">
    <div class="flex-column csu-primary swatch flex-container flex-end">
        <p>Primary<br /><span class="small-text">#B00C1D</span></p>
    </div>
    <div class="flex-column csu-secondary swatch flex-container flex-end">
        <p>Secondary<br /><span class="small-text">#347EA4</span></p>
    </div>
    <div class="flex-column csu-warning swatch flex-container flex-end">
        <p>Warning<br /><span class="small-text">#FFDC0B</span></p>
    </div>
    <div class="flex-column csu-success swatch flex-container flex-end">
        <p>Success<br /><span class="small-text">#318700</span></p>
    </div>
    <div class="flex-column csu-highlight-subtle swatch flex-container flex-end">
        <p>Highlight<br /><span class="small-text">#FCF8E3</span></p>
    </div>
</div>

<div class="flex-row ">
    <div class="flex-column csu-primary-dark swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-secondary-dark swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-warning-dark swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-success-dark swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-highlight-subtle-dark swatch-half flex-container flex-end"></div>
</div>
<div class="flex-row ">
    <div class="flex-column csu-primary-light swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-secondary-light swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-warning-light swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-success-light swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-highlight-subtle-light swatch-half flex-container flex-end"></div>
</div>
<div class="flex-row ">
    <div class="flex-column csu-primary-fade swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-secondary-fade swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-warning-fade swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-success-fade swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-highlight-subtle-fade swatch-half flex-container flex-end"></div>
</div>

<div class="flex-row ">
    <div class="flex-column csu-grey-nav swatch flex-container flex-end">
        <p>Grey Nav<br /><span class="small-text">#414141</span></p>
    </div>
    <div class="flex-column csu-grey-item swatch flex-container flex-end">
        <p>Grey Item<br /><span class="small-text">#757575</span></p>
    </div>
    <div class="flex-column csu-grey-hover swatch flex-container flex-end">
        <p>Grey Hover<br /><span class="small-text">#E0E0E0</span></p>
    </div>
    <div class="flex-column csu-grey-page swatch flex-container flex-end">
        <p>Grey Page<br /><span class="small-text">#F8F8F8</span></p>
    </div>
</div>
<h2 class="label">User Interface Palette</h2>
<div class="flex-row ">
  <div class="flex-column csu-{{ SW1 }} swatch flex-container flex-end">
    <p>{{ SW1-label }}<br /><span class="small-text">{{ SW1-text }}</span></p>
  </div>
  <div class="flex-column csu-{{ SW2 }} swatch flex-container flex-end">
    <p>{{ SW2-label }}<br /><span class="small-text">{{ SW2-text }}</span></p>
  </div>
  <div class="flex-column csu-{{ SW3 }} swatch flex-container flex-end">
    <p>{{ SW3-label }}<br /><span class="small-text">{{ SW3-text }}</span></p>
  </div>
  <div class="flex-column csu-{{ SW4 }} swatch flex-container flex-end">
    <p>{{ SW4-label }}<br /><span class="small-text">{{ SW4-text }}</span></p>
  </div>
  <div class="flex-column csu-{{ SW9 }} swatch flex-container flex-end">
    <p>{{ SW9-label }}<br /><span class="small-text">{{ SW9-text }}</span></p>
  </div>
</div>

<div class="flex-row ">
  <div class="flex-column csu-{{ SW1 }}-{{ mod-1 }} swatch-half flex-container flex-end"></div>
  <div class="flex-column csu-{{ SW2 }}-{{ mod-1 }} swatch-half flex-container flex-end"></div>
  <div class="flex-column csu-{{ SW3 }}-{{ mod-1 }} swatch-half flex-container flex-end"></div>
  <div class="flex-column csu-{{ SW4 }}-{{ mod-1 }} swatch-half flex-container flex-end"></div>
  <div class="flex-column csu-{{ SW9 }}-{{ mod-1 }} swatch-half flex-container flex-end"></div>
</div>
<div class="flex-row ">
  <div class="flex-column csu-{{ SW1 }}-{{ mod-2 }} swatch-half flex-container flex-end"></div>
  <div class="flex-column csu-{{ SW2 }}-{{ mod-2 }} swatch-half flex-container flex-end"></div>
  <div class="flex-column csu-{{ SW3 }}-{{ mod-2 }} swatch-half flex-container flex-end"></div>
  <div class="flex-column csu-{{ SW4 }}-{{ mod-2 }} swatch-half flex-container flex-end"></div>
  <div class="flex-column csu-{{ SW9 }}-{{ mod-2 }} swatch-half flex-container flex-end"></div>
</div>
<div class="flex-row ">
  <div class="flex-column csu-{{ SW1 }}-{{ mod-3 }} swatch-half flex-container flex-end"></div>
  <div class="flex-column csu-{{ SW2 }}-{{ mod-3 }} swatch-half flex-container flex-end"></div>
  <div class="flex-column csu-{{ SW3 }}-{{ mod-3 }} swatch-half flex-container flex-end"></div>
  <div class="flex-column csu-{{ SW4 }}-{{ mod-3 }} swatch-half flex-container flex-end"></div>
  <div class="flex-column csu-{{ SW9 }}-{{ mod-3 }} swatch-half flex-container flex-end"></div>
</div>

<div class="flex-row ">
  <div class="flex-column csu-{{ SW5 }} swatch flex-container flex-end">
    <p>{{ SW5-label }}<br /><span class="small-text">{{ SW5-text }}</span></p>
  </div>
  <div class="flex-column csu-{{ SW6 }} swatch flex-container flex-end">
    <p>{{ SW6-label }}<br /><span class="small-text">{{ SW6-text }}</span></p>
  </div>
  <div class="flex-column csu-{{ SW7 }} swatch flex-container flex-end">
    <p>{{ SW7-label }}<br /><span class="small-text">{{ SW7-text }}</span></p>
  </div>
  <div class="flex-column csu-{{ SW8 }} swatch flex-container flex-end">
    <p>{{ SW8-label }}<br /><span class="small-text">{{ SW8-text }}</span></p>
  </div>
</div>

The following colours are to be used to create basic user interface elements.