Colours

<div class="item colour">
    <h2 class="item__title colour__title">Brand Red</h2>
    <div class="item__section colour__section">
        <div class="item__item colour__item">
            <ul>
                <li><strong>Name</strong>: Default</li>
                <li><strong>Value</strong>: <code>brand-red</code></li>
                <li><strong>Hex</strong>: <code>#c30028</code></li>
            </ul>
            <div class="bg-brand-red"></div>
        </div>
        <div class="item__item colour__item">
            <ul>
                <li><strong>Name</strong>: Dark</li>
                <li><strong>Value</strong>: <code>brand-red-dark</code></li>
                <li><strong>Hex</strong>: <code>#640a0a</code></li>
            </ul>
            <div class="bg-brand-red-dark"></div>
        </div>
    </div>
</div>

<div class="item colour">
    <h2 class="item__title colour__title">Brand Green</h2>
    <div class="item__section colour__section">
        <div class="item__item colour__item">
            <ul>
                <li><strong>Name</strong>: Default</li>
                <li><strong>Value</strong>: <code>brand-green</code></li>
                <li><strong>Hex</strong>: <code>#02532f</code></li>
            </ul>
            <div class="bg-brand-green"></div>
        </div>
        <div class="item__item colour__item">
            <ul>
                <li><strong>Name</strong>: Dark</li>
                <li><strong>Value</strong>: <code>brand-green-dark</code></li>
                <li><strong>Hex</strong>: <code>#0b3824</code></li>
            </ul>
            <div class="bg-brand-green-dark"></div>
        </div>
        <div class="item__item colour__item">
            <ul>
                <li><strong>Name</strong>: Light</li>
                <li><strong>Value</strong>: <code>brand-green-light</code></li>
                <li><strong>Hex</strong>: <code>#007a43</code></li>
            </ul>
            <div class="bg-brand-green-light"></div>
        </div>
    </div>
</div>

<div class="item colour">
    <h2 class="item__title colour__title">Brand Yellow</h2>
    <div class="item__section colour__section">
        <div class="item__item colour__item">
            <ul>
                <li><strong>Name</strong>: Default</li>
                <li><strong>Value</strong>: <code>brand-yellow</code></li>
                <li><strong>Hex</strong>: <code>#fccb6e</code></li>
            </ul>
            <div class="bg-brand-yellow"></div>
        </div>
        <div class="item__item colour__item">
            <ul>
                <li><strong>Name</strong>: Dark</li>
                <li><strong>Value</strong>: <code>brand-yellow-dark</code></li>
                <li><strong>Hex</strong>: <code>#f4d196</code></li>
            </ul>
            <div class="bg-brand-yellow-dark"></div>
        </div>
        <div class="item__item colour__item">
            <ul>
                <li><strong>Name</strong>: Light</li>
                <li><strong>Value</strong>: <code>brand-yellow-light</code></li>
                <li><strong>Hex</strong>: <code>#faf5ed</code></li>
            </ul>
            <div class="bg-brand-yellow-light"></div>
        </div>
    </div>
</div>

<div class="item colour">
    <h2 class="item__title colour__title">Gray</h2>
    <div class="item__section colour__section">
        <div class="item__item colour__item">
            <ul>
                <li><strong>Name</strong>: Default</li>
                <li><strong>Value</strong>: <code>brand-gray</code></li>
                <li><strong>Hex</strong>: <code>#e5e7e8</code></li>
            </ul>
            <div class="bg-gray"></div>
        </div>
        <div class="item__item colour__item">
            <ul>
                <li><strong>Name</strong>: Dark</li>
                <li><strong>Value</strong>: <code>brand-gray-dark</code></li>
                <li><strong>Hex</strong>: <code>#414141</code></li>
            </ul>
            <div class="bg-gray-dark"></div>
        </div>
        <div class="item__item colour__item">
            <ul>
                <li><strong>Name</strong>: Light</li>
                <li><strong>Value</strong>: <code>brand-gray-light</code></li>
                <li><strong>Hex</strong>: <code>#f0f0ef</code></li>
            </ul>
            <div class="bg-gray-light"></div>
        </div>
    </div>
</div>

<div class="item colour">
    <h2 class="item__title colour__title">Map</h2>
    <div class="item__section colour__section">
        <div class="item__item colour__item">
            <ul>
                <li><strong>Name</strong>: Default</li>
                <li><strong>Value</strong>: <code>brand-map</code></li>
                <li><strong>Hex</strong>: <code>#b9cfb9</code></li>
            </ul>
            <div class="bg-map"></div>
        </div>
        <div class="item__item colour__item">
            <ul>
                <li><strong>Name</strong>: Hover</li>
                <li><strong>Value</strong>: <code>brand-map-hover</code></li>
                <li><strong>Hex</strong>: <code>#92a892</code></li>
            </ul>
            <div class="bg-map-hover"></div>
        </div>
        <div class="item__item colour__item">
            <ul>
                <li><strong>Name</strong>: Selected</li>
                <li><strong>Value</strong>: <code>brand-map-selected</code></li>
                <li><strong>Hex</strong>: <code>#5F755F</code></li>
            </ul>
            <div class="bg-map-selected"></div>
        </div>
    </div>
</div>