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">
    <input id="example-text-input" type="text" placeholder="Text Here" class="eg-dark" required />
    <label for="example-text-input">Text Input</label>
  </div>
  <div class="form__field">
    <input id="example-email-input" type="email" placeholder="Email Here" required />
    <label for="example-email-input">Email Input</label>
  </div>
  <div class="form__field">
    <input id="example-password-input" type="password" placeholder="Password Here" required />
    <label for="example-password-input">Password Input</label>
  </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">
    <textarea id="example-form-control-textarea1" rows="3"></textarea>
    <label for="example-form-control-textarea1">Example textarea</label>
  </div>
  <div class="form__field">
    <input type="checkbox" id="example-checkbox" value="option1">
    <label for="example-checkbox">Check this out! Example checkbox</label>
  </div>
  <div class="form__field">
    <input type="radio" name="exampleRadios" id="example-radios1" value="option1" checked>
    <label for="example-radios1">Example Radio Button 1</label>

    <input type="radio" name="exampleRadios" id="example-radios2" value="option2">
    <label for="example-radios2">Example Radio Button 2</label>
  </div>
  <div class="form__field" style="display:flex;">
    <input class="eg-switch" type="radio" name="exampleSwitch" id="example-switch1" value="option1" checked>
    <label for="example-switch1">Option 1</label>

    <input class="eg-switch" type="radio" name="exampleSwitch" id="example-switch2" value="option1">
    <label for="example-switch2">Option 2</label>

    <input class="eg-switch" type="radio" name="exampleSwitch" id="example-switch3" value="option1">
    <label for="example-switch3">Option 3</label>
  </div>
</form>

4.2 Validation States

5. Buttons

Link Alt link Button link
<a href="#" role="button">Link</a>
<a class="link--alternate" href="#" role="button">Alt link</a>
<a class="button" href="#" role="button">Button link</a>
<button type="submit">Button</button>
<button type="button" class="button--primary">Primary Button</button>
<button type="button" class="button--secondary">Secondary Button</button>
<button type="button" class="button--tertiary">Tertiary Button</button>
<button type="button" disabled>Disabled Button</button>
<input type="button" value="Input">
<input type="submit" value="Submit">
<input type="reset" value="Reset">

6. Components

7. Spacing

8. Iconography

9. Imagery

Static

Lazy Loaded with srcset

10. Dos and Don'ts