Design Guide

Table of Contents

  1. Brand
  2. Typography
    1. Body Text
    2. Colours
    3. Headings
  3. Colour Palette
  4. Forms
    1. Form Controls
    2. Validation States
  5. Buttons
  6. Components
  7. Spacing
  8. Iconography
  9. Imagery
  10. Dos and Don'ts

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>

GTHaptik Black

<h1 style="font-weight: 900;">GTHaptik</h1>

GTHaptik Black Rotalic

<h1 style="font-weight: 900; font-style: italic;">GTHaptik</h1>
Pre Title

Title

<div class="heading-pre-title--large">
  <h5>Pre Title</h5>
  <h1>Title</h1>
</div>
        
Pre Title

Title

<div class="heading-pre-title--medium">
  <h6>Pre Title</h6>
  <h2>Title</h2>
</div>
        
Pre Title

Title

<div class="heading-pre-title--small">
  <h6>Pre Title</h6>
  <h3>Title</h3>
</div>
        

3. Colour Palette

4. Forms

4.1 Form Controls

      
  <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

5.1 Default Buttons

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

5.2 Primary Buttons

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

5.3 Secondary Buttons

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

5.4 Tertiary Buttons

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

5.5 Tertiary Buttons (Small)

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

5.6 Buttons with Chevrons

(primarily for Filters/Sort flyout)

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

6. Components

6.1 Quantity Selector

7. Spacing

8. Iconography

8.1 Social Icons

8.2 Chevrons

9. Imagery

Static

Image placeholder

Lazy Loaded with srcset

Full width

Variable widths

Note: The above image loads '1440:480,800:400,320' as the breakpoints, meaning it displays a 480px image for screens <= 1440px, 400px for screens <= 800px and 320px for screens <= 320px. This is useful for example for product tiles that should be 1/3 on desktop, 1/2 on tablet and 1/1 on mobile.

10. Dos and Don'ts