Example
Primary palette
Across the site we use
$colour-red
#f04257
$colour-white
#fff
$colour-purple
#7d2ca9
Secondary palette
Across the site we use
$colour-blue
#22d2dc
$colour-yellow
#fbef51
$colour-green
#b2e55e
$colour-teal
#00beca
$colour-royal-blue
#0565d1
$colour-pink
#fc9eb9
$colour-dark-blue
#061d38
Greyscale palette
Across the site we use
$colour-black
#030e1a
$colour-jasper-grey
#666
$colour-gainsboro-grey
#c7c7c7
$colour-light-grey
#e6e3dc
$colour-smoke-grey
#f0f0f0
Markup: variables/colour.twig
<h3>Primary palette</h3>
<p>Across the site we use</p>
<div style="display: inline-block; margin: 10px">
<div class="bg--red" style="height: 100px; display:block; width: 100px;"></div>
<p><br/>$colour-red</p>
<p>#f04257</p>
</div>
<div style="display: inline-block; margin: 10px">
<div class="bg--white" style="border: 1px solid black; height: 99px; display:block; width: 99px;"></div>
<p><br/>$colour-white</p>
<p>#fff</p>
</div>
<div style="display: inline-block; margin: 10px">
<div class="bg--purple" style="height: 100px; display:block; width: 100px;"></div>
<p><br/>$colour-purple</p>
<p>#7d2ca9</p>
</div>
<h3>Secondary palette</h3>
<p>Across the site we use</p>
<div style="display: inline-block; margin: 10px">
<div class="bg--blue" style="height: 100px; display:block; width: 100px;"></div>
<p><br/>$colour-blue</p>
<p>#22d2dc</p>
</div>
<div style="display: inline-block; margin: 10px">
<div class="bg--yellow" style="height: 100px; display:block; width: 100px;"></div>
<p><br/>$colour-yellow</p>
<p>#fbef51</p>
</div>
<div style="display: inline-block; margin: 10px">
<div class="bg--green" style="height: 100px; display:block; width: 100px;"></div>
<p><br/>$colour-green</p>
<p>#b2e55e</p>
</div>
<div style="display: inline-block; margin: 10px">
<div class="bg--teal" style="height: 100px; display:block; width: 100px;"></div>
<p><br/>$colour-teal</p>
<p>#00beca</p>
</div>
<br/>
<div style="display: inline-block; margin: 10px">
<div class="bg--royal-blue" style="height: 100px; display:block; width: 100px;"></div>
<p><br/>$colour-royal-blue</p>
<p>#0565d1</p>
</div>
<div style="display: inline-block; margin: 10px">
<div class="bg--pink" style="height: 100px; display:block; width: 100px;"></div>
<p><br/>$colour-pink</p>
<p>#fc9eb9</p>
</div>
<div style="display: inline-block; margin: 10px">
<div class="bg--dark-blue" style="height: 100px; display:block; width: 100px;"></div>
<p><br/>$colour-dark-blue</p>
<p>#061d38</p>
</div>
<h3>Greyscale palette</h3>
<p>Across the site we use</p>
<div style="display: inline-block; margin: 10px">
<div class="bg--black" style="height: 100px; display:block; width: 100px;"></div>
<p><br/>$colour-black</p>
<p>#030e1a</p>
</div>
<div style="display: inline-block; margin: 10px">
<div class="bg--jasper-grey" style="height: 100px; display:block; width: 100px;"></div>
<p><br/>$colour-jasper-grey</p>
<p>#666</p>
</div>
<div style="display: inline-block; margin: 10px">
<div class="bg--gainsboro-grey" style="height: 100px; display:block; width: 100px;"></div>
<p><br/>$colour-gainsboro-grey</p>
<p>#c7c7c7</p>
</div>
<div style="display: inline-block; margin: 10px">
<div class="bg--light-grey" style="height: 100px; display:block; width: 100px;"></div>
<p><br/>$colour-light-grey</p>
<p>#e6e3dc</p>
</div>
<div style="display: inline-block; margin: 10px">
<div class="bg--smoke-grey" style="height: 100px; display:block; width: 100px;"></div>
<p><br/>$colour-smoke-grey</p>
<p>#f0f0f0</p>
</div>
Source:
variables/_colours.scss
, line 2