Current orders will be delivered in 1 to 3 business days. Delivery times could be longer due to current Canada Post job action.

Design Guide

Table of Contents

1. Brand

2. Typography

2.1 Body Text

Bacon ipsum dolor amet cupim alcatra tri-tip strip steak pork chop pastrami pig cow. Frankfurter pork loin spare ribs meatloaf, jowl bacon boudin beef capicola. Pork chop meatloaf salami picanha spare ribs chicken ground round strip steak landjaeger burgdoggen turducken tenderloin pastrami rump ham. Burgdoggen swine capicola drumstick cupim shoulder. Sausage corned beef swine beef meatloaf biltong andouille short ribs tail t-bone flank. Cow pork loin alcatra, fatback strip steak flank doner salami. T-bone meatloaf venison cupim tri-tip ribeye jerky.

<p>Bacon ipsum dolor amet cupim alcatra tri-tip strip steak pork chop pastrami pig cow. Frankfurter pork loin spare ribs meatloaf, jowl bacon boudin beef capicola. Pork chop meatloaf salami picanha spare ribs chicken ground round strip steak landjaeger burgdoggen turducken tenderloin pastrami rump ham. Burgdoggen swine capicola drumstick cupim shoulder. Sausage corned beef swine beef meatloaf biltong andouille short ribs tail t-bone flank. Cow pork loin alcatra, fatback strip steak flank doner salami. T-bone meatloaf venison cupim tri-tip ribeye jerky.</p>

2.2 Colours

2.3 Headings

h1. Heading 1

<h1>h1. Heading 1</h1>

h2. Heading 2

<h2>h2. Heading 2</h2>

h3. Heading 3

<h3>h3. Heading 3</h3>

h4. Heading 4

<h4>h4. Heading 4</h4>
h5. Heading 5
<h5>h5. Heading 5</h5>
h6. Heading 6
<h6>h6. Heading 6</h6>

2.4 Lists

Note that lists in this style must be placed inside an element with a .content class

Unordered

  • This is a test
  • This is another test

Ordered

  1. This is a test
  2. This is another test
<div class="content"> <ul> <li>This is a test</li> <li>This is another test</li> </ul> <h4>Ordered</h4> <ol> <li>This is a test</li> <li>This is another test</li> </ol> </div>

3. Colour Palette

4. Forms

4.1 Form Controls

Placeholder
<form>
    <div>
        <label for="example-text-input">Text Input</label>
        <input id="example-text-input" type="text" placeholder="Text Here"/>
    </div>
    <div>
        <label for="example-email-input">Email Input</label>
        <input id="example-email-input" type="email" placeholder="Email Here">
    </div>
    <div>
        <label for="example-password-input">Password Input</label>
        <input id="example-password-input" type="password" placeholder="Password Here">
    </div>
    <div>
        <label for="example-form-control-select">Select</label>
        <select id="example-form-control-select">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
    <div>
        <label for="example-form-control-textarea1">Example textarea</label>
        <textarea id="example-form-control-textarea1" rows="3"></textarea>
    </div>
    <div>
        <label>
            <input type="checkbox" value="">
            Check this out! Example checkbox
        </label>
    </div>
    <div>
        <label>
            <input type="radio" name="exampleRadios" id="example-radios1" value="option1" checked>
            Example Radio Button 1
        </label>
        <label>
            <input type="radio" name="exampleRadios" id="example-radios2" value="option2">
            Example Radio Button 2
        </label>
    </div>
</form>

4.2 Validation States

5. Buttons





Ghosted Button
<button class="btn btn--large" type="submit">Button</button>
<input class="btn btn--primary" data-hover="fade" type="button" value="Input">
<input class="btn btn--outline" type="submit" value="Submit">
<input class="btn btn--primary btn--outline" type="reset" value="Reset">
<a href="#" class="btn btn--ghost btn--outline" >Alt Button</a>

6. Components

7. Spacing

All base elements use a base margin of $v-measure, and extend %base-spacing, which halves the margin on mobile. All additional margins in the comp are half/ multiples of this amount.

The section class uses double the amount, e.g the spacing around the variant selector is double as much.

This is a paragraph within a section

And yet another

  • Some list item
  • Another list item

This is a paragraph within a section

And yet another

<div class="section content"> <p>This is a paragraph within a section</p> <p>And yet another</p> <ul> <li>Some list item</li> <li>Another list item</li> </ul> </div> <div class="section"> <p>This is a paragraph within a section</p> <p>And yet another</p> </br> BREAK </div>

7.1 List Tile

This is a heading inside a list tile

Here's a paragraph with more details. It doesn't have any bottom margin because the tile's padding and margin are enough. If you want to adjust the amount of marign, padding, or bottom margin for the headings, you can use the list-tile mixin.

<div class="list-tile"> <h4>This is a heading inside a list tile</h4> <p>Here's a paragraph with more details. It doesn't have any bottom margin because the tile's padding and margin are enough. If you want to adjust the amount of marign, padding, or bottom margin for the headings, you can use the list-tile mixin.</p> </div>

8. Iconography

<i class="icon--account"></i> <i class="icon--back"></i> <i class="icon--bag"></i> <i class="icon--chevron-left"></i> <i class="icon--chevron-right"></i> <i class="icon--chevron-thick-left"></i> <i class="icon--chevron-thick-right"></i> <i class="icon--cross"></i> <i class="icon--filter"></i> <i class="icon--forward"></i> <i class="icon--location"></i> <i class="icon--menu"></i> <i class="icon--search"></i> <i class="icon--sort"></i> <i class="icon--tick"></i> <i class="icon--unavailable"></i>

9. Imagery

10. Dos and Don'ts