<h2 class="label">Brand Palette</h2>
<div class="flex-row ">
    <div class="flex-column csu-brand-black swatch flex-container flex-end">
        <p>Black<br /><span class="small-text">#1A1A1A</span></p>
    </div>
    <div class="flex-column csu-brand-red swatch flex-container flex-end">
        <p>Red<br /><span class="small-text">#B00C1D</span></p>
    </div>
    <div class="flex-column csu-brand-orange swatch flex-container flex-end">
        <p>Orange<br /><span class="small-text">#D1441D</span></p>
    </div>
    <div class="flex-column csu-brand-brown swatch flex-container flex-end">
        <p>Brown<br /><span class="small-text">#887E6E</span></p>
    </div>
    <div class="flex-column csu-brand-light swatch flex-container flex-end">
        <p>Light<br /><span class="small-text">#DAD3CC</span></p>
    </div>
</div>

<div class="flex-row ">
    <div class="flex-column csu-brand-black-dark swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-brand-red-dark swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-brand-orange-dark swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-brand-brown-dark swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-brand-light-dark swatch-half flex-container flex-end"></div>
</div>
<div class="flex-row ">
    <div class="flex-column csu-brand-black-light swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-brand-red-light swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-brand-orange-light swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-brand-brown-light swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-brand-light-light swatch-half flex-container flex-end"></div>
</div>
<div class="flex-row ">
    <div class="flex-column csu-brand-black-fade swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-brand-red-fade swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-brand-orange-fade swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-brand-brown-fade swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-brand-light-fade swatch-half flex-container flex-end"></div>
</div>
<h2 class="label">Brand 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-{{ SW5 }} swatch flex-container flex-end">
    <p>{{ SW5-label }}<br /><span class="small-text">{{ SW5-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-{{ SW5 }}-{{ 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-{{ SW5 }}-{{ 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-{{ SW5 }}-{{ mod-3 }} swatch-half flex-container flex-end"></div>
</div>

These are the official CSU Brand Colours