<h2 class="label">Brand Palette</h2>
<div class="flex-row ">
    <div class="flex-column csu-foa swatch flex-container flex-end">
        <p>FoAE<br /><span class="small-text">#327B8C</span></p>
    </div>
    <div class="flex-column csu-fob swatch flex-container flex-end">
        <p>FoBJBS<br /><span class="small-text">#1647AD</span></p>
    </div>
    <div class="flex-column csu-fos swatch flex-container flex-end">
        <p>FoS<br /><span class="small-text">#9CBB15</span></p>
    </div>
</div>

<div class="flex-row ">
    <div class="flex-column csu-foa-fade swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-fob-fade swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-fos-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>

<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>

These are the official CSU Faculty Colours. NB - these colours do not pass accessibility standards for contrast and so should not be used for important information.