Design Guide

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>

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

Link Secondary button
<a href="#" role="button">Link</a>
<button type="submit" class="button">Button</button>
<a href="" class="button button--secondary">Secondary button</a>
<input type="button" value="Input">
<input type="submit" value="Submit">
<input type="reset" value="Reset">

6. Components

7. Spacing

8. Iconography

Name Icon
social
bubble
account
cart
search
hamburger
location
location--pin
down-arrow
truck
angus-beef
fish
pork
sauce
sausage
tenderloin-beef
chicken
close
letter
facebook
instagram
youtube
help
lock
pin
direction
360
phone
geolocation
left-arrow
filter
heart
fruits-vegetable
cake
calories
breakfast
emu
lamb
pancakes
plates
pots
share
cooking-methods
bison
quality
bbq
cook-book
time
dish
grass-fed-organic
leaf
cut
mic
network
smoke
stove
ok-hand
usda-prime US D A PRIME
video
knife-and-fork

9. Imagery

Static

Lazy Loaded with srcset

10. Dos and Don'ts