<h3>Plain background colours</h3>
<div class="bg--SR20-deep-violet" style="height: 100px; width: 100%;">
<p>Illustrating bg color - font rules </p>
</div>

<p><br/><b>bg--SR20-deep-violet  </b> $colour-SR20-deep-violet : #2c0230</p>

<div class="bg--SR20-red " style="height: 100px; width: 100%;">
<p style="margin: 10px;">Illustrating bg color - font rules </p>
</div>
<p><br/><b>bg--SR20-red </b> $colour-SR20-red  : #e52530</p>

<div class="bg--SR20-dark-blue" style="height: 100px; width: 100%;">
<p style="margin: 10px;">Illustrating bg color - font rules </p>
</div>
<p><br/><b>bg--SR20-dark-blue  </b> $colour-SR20-dark-blue : #3a4972</p>

<div class="bg--SR20-white" style="border: 1px solid black; height: 100px; width: 100%;">
<p style="margin: 10px;">Illustrating bg color - font rules </p>
</div>
<p><br/><b>bg--SR20-white  </b> $colour-SR20-white : #ffffff</p>

<div class="bg--SR20-yellow" style="height: 100px; width: 100%;">
<p style="margin: 10px;">Illustrating bg color - font rules </p>
</div>
<p><br/><b>bg--SR20-yellow  </b> $colour-SR20-yellow : #FFE400</p>

<div class="bg--SR20-green" style="height: 100px; width: 100%;">
<p style="margin: 10px;">Illustrating bg color - font rules </p>
</div>
<p><br/><b>bg--SR20-green  </b> $colour-SR20-green : #4ecd57</p>

<div class="bg--SR20-cyan-blue" style="height: 100px; width: 100%;">
<p style="margin: 10px;">Illustrating bg color - font rules </p>
</div>
<p><br/><b>bg--SR20-cyan-blue  </b> $colour-SR20-cyan-blue : #22CFD8</p>

<div class="bg--SR20-light-grey" style="height: 100px; width: 100%;">
<p style="margin: 10px;">Illustrating bg color - font rules </p>
</div>
<p><br/><b>bg--SR20-light-grey  </b> $colour-SR20-light-grey : #f4f2f4</p>

<div class="bg--SR20-purple" style="height: 100px; width: 100%;">
<p style="margin: 10px;">Illustrating bg color - font rules </p>
</div>
<p><br/><b>bg--SR20-purple  </b> $colour-SR20-purple : #7F58A5</p>