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>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>

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 form__field--checkbox">
    <label>
      <input type="checkbox" value="">
      Check this out! Example checkbox
    </label>
  </div>
  <div class="form__field form__field--radio">
    <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>

<form class="form form--inline">
  <div class="form__field">
    <label for="example-inline-email">Email Input</label>
    <input id="example-inline-email" type="email" placeholder="Email Here">
  </div>
  <button type="submit" id="example-inline-submit">Submit</button>
</form>

4.2 Validation States

5. Buttons

<a href="#" role="button">Link</a>
<br /><br />
<button type="button">Default Button</button>&nbsp;&nbsp;
<button type="button" disabled>Default Disabled</button>
<br /><br />
<button type="button" class="action action--arrow">Default Arrow Button</button>&nbsp;&nbsp;
<button type="button" class="action action--arrow" disabled>Default Arrow Disabled</button>
<br /><br />
<button class="action action--special" type="button">Special Button</button>&nbsp;&nbsp;
<button class="action action--special" type="button" disabled>Special Disabled</button>
<br /><br />
<button class="action action--special  action--arrow" type="button">Special Arrow Button</button>&nbsp;&nbsp;
<button class="action action--special action--arrow" type="button" disabled>Special Arrow Disabled</button>
<br /><br />
<button type="submit">Submit Button</button>&nbsp;&nbsp;
<input type="submit" value="Submit Input">&nbsp;&nbsp;
<input type="button" value="Button Input">&nbsp;&nbsp;
<input type="reset" value="Reset Input">&nbsp;&nbsp;

6. Components

7. Spacing

8. Iconography

9. Imagery

Static

Lazy Loaded with srcset

10. Dos and Don'ts