<br/>
<br/>

<h3>Primary colour backgrounds</h3>
<div class="bg--white" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--white</p>

<div class="bg--red" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--red</p>

<div class="bg--deep-violet" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--deep-violet</p>


<h3>Secondary colour backgrounds</h3>
<div class="bg--grey" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--grey</p>

<div class="bg--coral" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--coral</p>

<div class="bg--orange" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--orange</p>

<div class="bg--yellow" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--yellow</p>

<div class="bg--green" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--green</p>

<div class="bg--blue" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--blue</p>

<div class="bg--magenta" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--magenta</p>

<div class="bg--purple" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--purple</p>

<div class="bg--teal" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--teal</p>


<h3>Secondary light colour backgrounds</h3>
<div class="bg--light-grey" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-grey</p>

<div class="bg--light-coral" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-coral</p>

<div class="bg--light-orange" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-orange</p>

<div class="bg--light-yellow" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-yellow</p>

<div class="bg--light-green" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-green</p>

<div class="bg--light-blue" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-blue</p>

<div class="bg--light-magenta" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-magenta</p>

<div class="bg--light-purple" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-purple</p>

<div class="bg--light-teal" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-teal</p>


<h3>Secondary dark colour backgrounds</h3>
<div class="bg--dark-grey" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--dark-grey</p>

<div class="bg--dark-coral" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--dark-coral</p>

<div class="bg--dark-orange" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--orange</p>

<div class="bg--dark-yellow" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--dark-yellow</p>

<div class="bg--dark-green" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--dark-green</p>

<div class="bg--dark-blue" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--dark-blue</p>

<div class="bg--dark-magenta" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--dark-magenta</p>

<div class="bg--dark-purple" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--dark-purple</p>

<div class="bg--dark-teal" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--dark-teal</p>