Example

Primary colours

white
Deep violet
Red

Secondary colours

grey
coral
Orange
yellow
green
blue
magenta
purple
teal

Secondary light colours

Light grey
Light coral
Light orange
Light yellow
Light green
Light blue
Light magenta
Light purple
Light teal

Secondary dark colours

Dark grey
Dark coral
Dark orange
Dark yellow
Dark green
Dark blue
Dark magenta
Dark purple
Dark teal
Markup: colour.twig
<h3>Primary colours</h3>

<div style="display: inline-block; margin: 10px">
	<div class="bg--white" style="height: 100px; margin-bottom: 10px; display:block; width: 100px; border: 1px solid black;"></div>
	<h5>white</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--deep-violet" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Deep violet</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--red" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Red</h5>
</div>


<h3>Secondary colours</h3>
<div style="display: inline-block; margin: 10px">
	<div class="bg--grey" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>grey</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--coral" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>coral</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--orange" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Orange</h5>
</div>


<div style="display: inline-block; margin: 10px">
	<div class="bg--yellow" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>yellow</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--green" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>green</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--blue" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>blue</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--magenta" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>magenta</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--purple" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>purple</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--teal" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>teal</h5>
</div>



<h3>Secondary light colours</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>Light grey</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--light-coral" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Light coral</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--light-orange" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Light orange</h5>
</div>


<div style="display: inline-block; margin: 10px">
	<div class="bg--light-yellow" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Light yellow</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--light-green" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Light green</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--light-blue" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Light blue</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--light-magenta" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Light magenta</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--light-purple" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Light purple</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--light-teal" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Light teal</h5>
</div>


<h3>Secondary dark colours</h3>
<div style="display: inline-block; margin: 10px">
	<div class="bg--dark-grey" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Dark grey</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--dark-coral" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Dark coral</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--dark-orange" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Dark orange</h5>
</div>


<div style="display: inline-block; margin: 10px">
	<div class="bg--dark-yellow" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Dark yellow</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--dark-green" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Dark green</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--dark-blue" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Dark blue</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--dark-magenta" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Dark magenta</h5>
</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>Dark purple</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--dark-teal" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Dark teal</h5>
</div>

Source: _shop19-styleguide.scss, line 37