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