<h2 class="label">Material Palette</h2>
<div class="flex-row ">
    <div class="flex-column csu-blue swatch flex-container flex-end">
        <p>Blue<br /><span class="small-text">#0A6396</span></p>
    </div>
    <div class="flex-column csu-green swatch flex-container flex-end">
        <p>Green<br /><span class="small-text">#0F8A14</span></p>
    </div>
    <div class="flex-column csu-grey swatch flex-container flex-end">
        <p>Grey<br /><span class="small-text">#666666</span></p>
    </div>
    <div class="flex-column csu-orange swatch flex-container flex-end">
        <p>Orange<br /><span class="small-text">#D93C0B</span></p>
    </div>
    <div class="flex-column csu-purple swatch flex-container flex-end">
        <p>Purple<br /><span class="small-text">#6E267B</span></p>
    </div>
    <div class="flex-column csu-red swatch flex-container flex-end">
        <p>Red<br /><span class="small-text">#D92231</span></p>
    </div>
    <div class="flex-column csu-ochre swatch flex-container flex-end">
        <p>Ochre<br /><span class="small-text">#B76603</span></p>
    </div>
</div>

<div class="flex-row ">
    <div class="flex-column csu-blue-dark swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-green-dark swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-grey-dark swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-orange-dark swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-purple-dark swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-red-dark swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-ochre-dark swatch-half flex-container flex-end"></div>
</div>
<div class="flex-row ">
    <div class="flex-column csu-blue-light swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-green-light swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-grey-light swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-orange-light swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-purple-light swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-red-light swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-ochre-light swatch-half flex-container flex-end"></div>
</div>
<div class="flex-row ">
    <div class="flex-column csu-blue-fade swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-green-fade swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-grey-fade swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-orange-fade swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-purple-fade swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-red-fade swatch-half flex-container flex-end"></div>
    <div class="flex-column csu-ochre-fade swatch-half flex-container flex-end"></div>
</div>
<h2 class="label">Material 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 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>

<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 class="flex-column csu-{{ SW6 }}-{{ mod-1 }} swatch-half flex-container flex-end"></div>
  <div class="flex-column csu-{{ SW7 }}-{{ 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 class="flex-column csu-{{ SW6 }}-{{ mod-2 }} swatch-half flex-container flex-end"></div>
  <div class="flex-column csu-{{ SW7 }}-{{ 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 class="flex-column csu-{{ SW6 }}-{{ mod-3 }} swatch-half flex-container flex-end"></div>
  <div class="flex-column csu-{{ SW7 }}-{{ mod-3 }} swatch-half flex-container flex-end"></div>
</div>

These colours form the new Learning Materials Palette and have been tested for accessibility for use on white and reversed applications.