1. Brand

2. Typography

2.1 Body Text

Regular body text

Bold body text

Small body text

Small body text for mobile and tablet only

Small bold body text

Caption text

Caption bold text

Reset to body text

<p>Regular body text</p>
<p class="text--bold">Bold body text</p>
<p class="text--small">Small body text</p>
<p class="text--small-tablet-down">Small body text for mobile and tablet only</p>
<p class="text--small text--bold">Small bold body text</p>
<p class="text--caption">Caption text</p>
<p class="text--caption text--bold">Caption bold text</p>
<h2 class="text--reset">Reset to body text</h2>

2.2 Colours

2.3 Headings

<h1>h1. Heading 1</h1>

<h2>h2. Heading 2</h2>

<h3>h3. Heading 3</h3>

<h4>h4. Heading 4</h4>

<h5>h5. Heading 5</h5>

<h6>h6. Heading 6</h6>

2.4 Links

<a href="#">Link</a>
<br />
<a href="#" class="text-link">Text Link</a>
<div class="bg--dark" style="margin-top: 4px; padding: 4px 0;">
  <a href="#" class="anchor--light">Light link</a>
  <br />
  <a href="#" class="text-link text-link--light">Light Text Link</a>
</div>

3. Colour Palette

4. Forms

4.1 Form Controls

<form action="" method="get" class="form">
  <div class="form__field">
    <label for="example-text-input">Text Input</label>
    <input id="example-text-input" type="text" placeholder="Text Here"/>
  </div>
  <div class="form__field">
    <label for="example-email-input">Email Input</label>
    <input id="example-email-input" type="email" placeholder="Email Here">
  </div>
  <div class="form__field">
    <label for="example-password-input">Password Input</label>
    <input id="example-password-input" type="password" placeholder="Password Here">
  </div>
  <div class="form__field">
    <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 class="form__field">
    <label for="example-form-control-textarea1">Example textarea</label>
    <textarea id="example-form-control-textarea1" rows="3"></textarea>
  </div>
  <div class="form__field">
    <label>
      <input type="checkbox" value="">
      Check this out! Example checkbox
    </label>
  </div>
  <div class="form__field">
    <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

<button class="action">Default Button Default</button>
<button class="action" disabled>Default Button Disabled</button>
<br /><br />
<button class="action action--primary">Primary Button</button>
<button class="action action--primary" disabled>Primary Button Disabled</button>
<br /><br />
<button class="action action--outline">Outline Button</button>
<button class="action action--outline" disabled>Outline Button Disabled</button>
<br /><br />
<button class="action action--full">Default Button Full Width</button>
<button class="action action--full action--primary">Primary Button Full Width</button>
<button class="action action--full action--outline">Outline Button Full Width</button>
<br /><br />
<button class="text-link">Text Button</button>
<button class="text-link" disabled>Disabled Text Button</button>
<br /><br />
<div class="bg--dark" style="margin-top: 4px; padding: 4px 0;">
<button class="text-link text-link--light">Light Text Button</button>
<button class="text-link text-link--light" disabled>Disabled Light Text Button</button>
</div>
<br /><br />
<a href="#" role="button">Link</a>
<button type="submit">Button</button>
<input type="button" value="Input">
<input type="submit" value="Submit">
<input type="reset" value="Reset">

6. Components

7. Spacing

8. Iconography

<span class="icon icon--account"></span>
<span class="icon icon--account-filled"></span>
<span class="icon icon--arrow"></span>
<span class="icon icon--cart"></span>
<span class="icon icon--check"></span>
<span class="icon icon--close"></span>
<span class="icon icon--facebook"></span>
<span class="icon icon--info"></span>
<span class="icon icon--instagram"></span>
<span class="icon icon--menu"></span>
<span class="icon icon--minus"></span>
<span class="icon icon--minus-filled"></span>
<span class="icon icon--plus"></span>
<span class="icon icon--plus-filled"></span>
<span class="icon icon--search"></span>
<span class="icon icon--star"></span>
<span class="icon icon--tiktok"></span>
<span class="icon icon--trash-bin"></span>
<span class="icon icon--twitter"></span>
<span class="icon icon--youtube"></span>

9. Imagery

Static

Lazy Loaded with srcset

10. Dos and Don'ts