Utility classes are single responsibility classes designed to reduce duplication in our code.


Our alignment utilities will help position elements on the page.


Force element to float to the left.

<div class="am-pull--left">Element to float left</div>

Force element to float to the right.

<div class="am-pull--right">Element to float right</div>

Text Alignments

Align text to the right

<div class="am-align--right">Align text to the right</div>

Align text to the center

<div class="am-align--center">Align text to the center</div>


We have designed a Z-index map which lets us set a z-index value based on a set list of values. Instead of setting arbitrary z-index values which is difficult to maintain, we can select from the following list;

$z-indexes: (
  'negative': -1,
  'lower': 1,
  'low': 3,
  'mid': 5,
  'high': 7,
  'higher': 9


/*  Any element that needs to sit on top of another element should use the 'lower' or 'low' value */
.shape {
    position: relative;
    z-index: z-index('lower');

/*  Any element that needs to sit above many elements on the page, such as a sticky header,
    can use the 'mid' value */
.header--sticky {
    position: fixed;
    z-index: z-index('mid');

/*  There shouldn't be a need to use the 'higher' value, except for instances where we know that an element
    has to sit above all other elements. */
.modal--full-page {
    position: fixed;
    z-index: z-index('higher');




<span class="nobr">AIR MILES<sup>&reg;</sup></span>


We can use lightness and/or darkness functions to provide a variation of our set brand colours.

Lighter 20%
Normal (blue-accent)
Darker 20%

/*  Lightness
    The parameters are: color and percentage 0% - 100% */

.modal--light {
    background-color: lighter(color('blue'), 20%);

/*  Darkness */
.modal--dark {
    background-color: darker(color('red'), 20%);