Example

Primary palette

Used across the site, our main colours consist of red and purple

Red

#ea0043

Purple

#340f78

White

#ffffff

Secondary palette

Across the site we use

Royal Blue

#4032fe

Mint Green

#5df4cf

Dark Purple

#29022c


Greyscale Palette

Light Grey

#f8f8f8

Grey

#e8e8e8

Dark Grey

#333333

Markup: variables/colour.twig
<h3>Primary palette</h3>
<p>Used across the site, our main colours consist of red and purple</p>
<div style="display: inline-block; margin: 10px">
	<div class="bg--red" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5 class="font--red">Red</h5>
	<p>#ea0043</p>
</div>
<div style="display: inline-block; margin: 10px">
	<div class="bg--purple" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5 class="font--purple">Purple</h5>
	<p>#340f78</p>
</div>
<div style="display: inline-block; margin: 10px">
	<div class="bg--white" style="border: 1px solid black; height: 99px; display:block; margin-bottom: 10px; width: 99px;"></div>
	<h5 class="font--white bg--black">White</h5>
	<p>#ffffff</p>
</div>
<h3>Secondary palette</h3>
<p>Across the site we use</p>
<div style="display: inline-block; margin: 10px">
	<div class="bg--royal-blue" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5 class="font--royal-blue">Royal Blue</h5>
	<p>#4032fe</p>
</div>
<div style="display: inline-block; margin: 10px">
	<div class="bg--mint-green" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5 class="font--mint-green">Mint Green</h5>
	<p>#5df4cf</p>
</div>
<div style="display: inline-block; margin: 10px">
	<div class="bg--dark-purple"  style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5 class="font--dark-purple">Dark Purple</h5>
	<p>#29022c</p>
</div>
<br/>
<h3>Greyscale Palette</h3>
<div style="display: inline-block; margin: 10px">
	<div class="bg--light-grey" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5 class="font--light-grey">Light Grey</h5>
	<p>#f8f8f8</p>
</div>
<div style="display: inline-block; margin: 10px">
	<div class="bg--grey" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5 class="font--grey">Grey</h5>
	<p>#e8e8e8</p>
</div>
<div style="display: inline-block; margin: 10px">
	<div class="bg--dark-grey" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5 class="font--dark-grey">Dark Grey</h5>
	<p>#333333</p>
</div>
Source: _cr17-styleguide.scss, line 37