Colour

<h1 class="">Colours</h1>

<h2>Core palette</h2>
<p class="intro">The primary Cochrane palette is comprised of 3 colours</p>
<ul class="list--unbulleted">
    <li>
        <div class="swatch swatch-large bg-primary"> </div> Blue (Primary)
    </li>
    <li>
        <div class="swatch swatch-large bg-secondary"> </div> Magenta (Secondary)
    </li>
    <li>
        <div class="swatch swatch-large bg-tertiary"> </div> Navy (Tertiary)
    </li>
</ul>

<h2>Utility palette</h2>
<p class="intro">A utility colour palette is also available</p>
<ul class="list--unbulleted">
    <li>
        <div class="swatch bg-black"> </div> Black
    </li>
    <li>
        <div class="swatch bg-white"> </div> White
    </li>
    <li>
        <div class="swatch bg-grey"> </div> Grey
    </li>
    <li>
        <div class="swatch bg-red"> </div> Red
    </li>
</ul>

<h2>Background colours</h2>
<p>Any of the colours above can be used as a background colour on an element by simply using the following classes:</p>
<ul>
    <li>
        <div class="swatch bg-primary"> </div> .bg-primary
    </li>
    <li>
        <div class="swatch bg-secondary"> </div> .bg-secondary
    </li>
    <li>
        <div class="swatch bg-tertiary"> </div> .bg-tertiary
    </li>
    <li>
        <div class="swatch bg-black"> </div> .bg-black
    </li>
    <li>
        <div class="swatch bg-white"> </div> .bg-white
    </li>
    <li>
        <div class="swatch bg-grey"> </div> .bg-grey
    </li>
    <li>
        <div class="swatch bg-red"> </div> .bg-red
    </li>
</ul>

<h2>Text colours</h2>
<p>These colours can be also be used as a text colour by using the following classes:</p>
<ul>
    <li>
        <div class="button button--outline text-color-primary"> A text example </div> .text-color-primary
    </li>
    <li>
        <div class="button button--outline text-color-secondary"> A text example </div> .text-color-secondary
    </li>
    <li>
        <div class="button button--outline text-color-tertiary"> A text example </div> .text-color-tertiary
    </li>
    <li>
        <div class="button button--outline text-color-black"> A text example </div> .text-color-black
    </li>
    <li>
        <div class="button text-color-white"> A text example </div> .text-color-white
    </li>
    <li>
        <div class="button button--outline text-color-grey"> A text example </div> .text-color-grey
    </li>
    <li>
        <div class="button button--outline text-color-red"> A text example </div> .text-color-red
    </li>
</ul>