Colours
#
Tints {% include 'elements/colours/tints' %}
#
HTML
<div class="pl-color pl-color-green-tint-100">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-90">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-80">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-70">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-60">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-50">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-40">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-30">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-20">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-10">
    <div class="pl-color-swatch"></div>
</div>
Twig
<div class="pl-color pl-color-green-tint-100">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-90">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-80">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-70">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-60">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-50">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-40">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-30">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-20">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-10">
	<div class="pl-color-swatch"></div>
</div>
{}
Greys {% include 'elements/colours/greys' %}
#
HTML
<div class="pl-color pl-color-dark-grey">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-mid-grey">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-light-grey">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-footer-grey">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-border-grey">
    <div class="pl-color-swatch"></div>
</div>
Twig
<div class="pl-color pl-color-dark-grey">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-mid-grey">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-light-grey">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-footer-grey">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-border-grey">
	<div class="pl-color-swatch"></div>
</div>
{}
Brand {% include 'elements/colours/brand' %}
#
HTML
<div class="pl-color pl-color-green-primary">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-secondary">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-yellow-primary">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-yellow-secondary">
    <div class="pl-color-swatch"></div>
</div>
Twig
<div class="pl-color pl-color-green-primary">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-secondary">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-yellow-primary">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-yellow-secondary">
	<div class="pl-color-swatch"></div>
</div>
{}
Secondary {% include 'elements/colours/secondary' %}
#
HTML
<div class="pl-color pl-color-brand-green">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-brand-red">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-brand-turquoise">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-brand-orange">
    <div class="pl-color-swatch"></div>
</div>
Twig
<div class="pl-color pl-color-brand-green">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-brand-red">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-brand-turquoise">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-brand-orange">
	<div class="pl-color-swatch"></div>
</div>
{}