Colours

<div class="catalog__colour">

    <h2 class="acl-typography--headline2">Primary Colours</h2>

    <div class="catalog__colour-row">
        <div class="acl-card" style="max-width: 200px;">
            <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                <div class="acl-card__media acl-card__media--16-9 demo-card__media" style="background-color: #E4F8F6

;">
                </div>
                <div class="demo-card__primary">
                    <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#E4F8F6

                    </h3>
                    </h3>
                </div>
            </div>
        </div>

        <div class="acl-card" style="max-width: 200px;">
            <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                <div class="acl-card__media acl-card__media--16-9 demo-card__media" style="background-color: #64F0E6;">
                </div>
                <div class="demo-card__primary">
                    <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#64F0E6</h3>
                    </h3>
                </div>
            </div>
        </div>

        <div class="acl-card" style="max-width: 200px;">
            <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                <div class="acl-card__media acl-card__media--16-9 demo-card__media" style="background-color: #46CCC2;">
                </div>
                <div class="demo-card__primary">
                    <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#46CCC2</h3>
                </div>
            </div>
        </div>

        <div class="acl-card" style="max-width: 200px;">
            <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                <div class="acl-card__media acl-card__media--16-9 demo-card__media" style="background-color: #2CBCB2;">
                </div>
                <div class="demo-card__primary">
                    <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#2CBCB2</h3>
                    </h3>
                </div>
            </div>
        </div>
    </div>

    <h2 class="acl-typography--headline2">Secondary Colours</h1>

        <div class="catalog__colour-row">
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: #93C3EA;">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#93C3EA
                        </h3>
                    </div>
                </div>
            </div>
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: #43749E;">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#43749E
                        </h3>
                    </div>
                </div>
            </div>
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: #25547E;">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#25547E
                        </h3>
                    </div>
                </div>
            </div>
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: #2888D6;">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#2888D6
                        </h3>
                    </div>
                </div>
            </div>
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: #1FACEC;">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#1FACEC
                        </h3>
                    </div>
                </div>
            </div>
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: #4FC8FF;">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#4FC8FF</h3>

                    </div>
                </div>
            </div>
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: #FF5A5A;">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#FF5A5A</h3>
                    </div>
                </div>
            </div>
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: #FF985A;">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#FF985A</h3>

                    </div>
                </div>
            </div>
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: #FFDA73;">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#FFDA73</h3>

                    </div>
                </div>
            </div>
        </div>

        <h2 class="acl-typography--headline2">Product Labels and Badges</h2>

        <div class="catalog__colour-row">
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: rgba(255,218,115,0.15)">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">rgba(255,218,115,0.15)
                        </h3>
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#FFDA73</h3>
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">15% Opacity</h3>

                    </div>
                </div>
            </div>
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: rgba(100,240,230,0.15);">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">rgba(100,240,230,0.15)
                        </h3>
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#64F0E6</h3>
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">15% Opacity</h3>

                    </div>
                </div>
            </div>
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: rgba(177,183,205,0.15);">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">rgba(177,183,205,0.15)
                        </h3>
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#B1B7CD</h3>
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">15% Opacity</h3>

                    </div>
                </div>
            </div>
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: rgba(40,136,214,0.15);">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">rgba(40,136,214,0.15)
                        </h3>
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#2888D6</h3>
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">15% Opacity</h3>

                    </div>
                </div>
            </div>
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: rgba(79,200,255,0.15);">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">rgba(79,200,255,0.15)
                        </h3>
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#4FC8FF</h3>
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">15% Opacity</h3>

                    </div>
                </div>
            </div>
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: rgba(50,174,64,0.15);">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">rgba(50,174,64,0.15)
                        </h3>
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#32AE40</h3>
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">15% Opacity</h3>

                    </div>
                </div>
            </div>
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: rgba(248,129,14,0.15);">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">rgba(248,129,14,0.15)
                        </h3>
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#F8810E</h3>
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">15% Opacity</h3>

                    </div>
                </div>
            </div>
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: rgba(255,49,49,0.15);">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">rgba(255,49,49,0.15)
                        </h3>
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#FFDA73</h3>
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">15% Opacity</h3>

                    </div>
                </div>
            </div>
        </div>

        <h2 class="acl-typography--headline2">Error/Warning/Success</h2>

        <div class="catalog__colour-row">
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: #FF3131;">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#FF3131</h3>

                    </div>
                </div>
            </div>
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: #F8810E;">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#F8810E</h3>
                        </h3>
                    </div>
                </div>
            </div>
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: #32AE40;">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#32AE40</h3>
                        </h3>
                    </div>
                </div>
            </div>
        </div>

        <h2 class="acl-typography--headline2">Tertiary</h2>

        <div class="catalog__colour-row">
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: #F8F8F8;">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">##F8F8F8</h3>

                    </div>
                </div>
            </div>
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: #F7F6FB;">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#F7F6FB</h3>

                    </div>
                </div>
            </div>
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: #E8EBF8;">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#E8EBF8</h3>

                    </div>
                </div>
            </div>
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: #CACFE2;">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#CACFE2</h3>
                        </h3>
                    </div>
                </div>
            </div>
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: #B1B7CD;">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#B1B7CD</h3>
                        </h3>
                    </div>
                </div>
            </div>
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: #8892B4;">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#8892B4</h3>
                        </h3>
                    </div>
                </div>
            </div>
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: #707893;">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#707893</h3>
                        </h3>
                    </div>
                </div>
            </div>
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: #F8F8FB;">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#F8F8FB</h3>
                        </h3>
                    </div>
                </div>
            </div>
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: #F0F0F0;">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#F0F0F0</h3>
                        </h3>
                    </div>
                </div>
            </div>
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: #E0E0E0;">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#E0E0E0</h3>

                    </div>
                </div>
            </div>
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: #D5D5D5;">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#D5D5D5</h3>
                        </h3>
                    </div>
                </div>
            </div>
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: #9F9F9F;">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#9F9F9F</h3>
                        </h3>
                    </div>
                </div>
            </div>
        </div>

        <h2 class="acl-typography--headline2">Text and Function</h2>

        <div class="catalog__colour-row">
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: rgba(0,0,0,0.05);">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">rgba(0,0,0,0.05)</h3>
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#000000</h3>
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">5% alpha

                        </h3>

                    </div>
                </div>
            </div>
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: rgba(0,0,0,0.25);">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">rgba(0,0,0,0.25)</h3>
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#000000</h3>
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">25% alpha

                        </h3>

                    </div>
                </div>
            </div>
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: rgba(0,0,0,0.5);">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">rgba(0,0,0,0.5)</h3>
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#000000</h3>
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">50% alpha

                        </h3>

                    </div>
                </div>
            </div>
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: rgba(0,0,0,0.75);">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">rgba(0,0,0,0.75)</h3>
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#000000</h3>
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">75% alpha

                        </h3>

                    </div>
                </div>
            </div>
            <div class="acl-card" style="max-width: 200px;">
                <div class="acl-card__primary-action demo-card__primary-action" tabindex="0">
                    <div class="acl-card__media acl-card__media--16-9 demo-card__media"
                        style="background-color: rgba(0,0,0,1);">
                    </div>
                    <div class="demo-card__primary">
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">rgba(0,0,0,1)</h3>
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">#000000</h3>
                        <h3 class="demo-card__subtitle acl-typography acl-typography--subtitle2">100% alpha

                        </h3>

                    </div>
                </div>
            </div>

        </div>

</div>