<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>
<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>
/* No context defined. */
No notes defined.