FREE SHIPPING & RETURNS ON ALL ORDERS OVER 100$

No Results for

Design Guide

1. Brand

2. Typography

2.1 Body Text

  • Default Body (Body - MD)

    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>

  • Body - XS

    Body - XS, Scto Grotesk B, Regular 12pt, Caracter 0.6. Line 18. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel feugiat arcu, ut iaculis nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

    <p class="body-xs">Body - XS, Scto Grotesk B, Regular 12pt, Caracter 0.6. Line 18. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel feugiat arcu, ut iaculis nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

  • Body - SM

    Body - SM, Scto Grotesk B, Regular 14pt, Line 20. Scto Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel feugiat arcu, ut iaculis nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

    <p class="body-sm">Body - SM, Scto Grotesk B, Regular 14pt, Line 20. Scto Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel feugiat arcu, ut iaculis nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

  • Body - MD

    Body MD - Scto Grotesk B, Light 15pt, Line 21. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel feugiat arcu, ut iaculis nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

    <p class="body-md">Body MD - Scto Grotesk B, Light 15pt, Line 21. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel feugiat arcu, ut iaculis nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

  • Body - LG

    Body - LG, Scto Grotesk B, Light 18pt, Line 26. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel feugiat arcu, ut iaculis nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

    <p class="body-lg">Body - LG, Scto Grotesk B, Light 18pt, Line 26. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel feugiat arcu, ut iaculis nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</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>

  • Heading - XXL

    <p class="heading-xxl">Heading XXL</p>

  • Heading - XL

    <p class="heading-xl">Heading XL</p>

  • Heading - LG

    <p class="heading-lg">Heading LG</p>

  • Heading - MD

    <p class="heading-md">Heading MD</p>

  • Heading - SM

    <p class="heading-sm">Heading SM</p>

  • Heading - XS

    <p class="heading-xs">Heading XS</p>

  • Heading - XXS

    <p class="heading-xxs">Heading XXS</p>

  • Heading - XXXS

    <p class="heading-xxxs">Heading XXXS</p>

3. Colour Palette

Primary

  • $color-primary #1d1d1b
  • $color-primary-light #ececec

Secondary

  • $color-secondary #666666
  • $color-secondary-light #cccccc
  • $color-secondary-lighter #ffffff

Accent

  • $color-accent #395dff
  • $color-accent-alert #db231b

4. Forms

4.1 Form Controls

Error message

<form action="" method="get" class="form">
    <div class="form__field">
      <input id="example-text-input" type="text" placeholder="Text Input">
      <label for="example-text-input">Text Input</label>
    </div>
    <div class="form__field">
      <input id="example-text-error-input" type="text" placeholder="Text Input Error">
      <label for="example-text-error-input">Text Input Error</label>
      <p class="form__error">Error message</p>
    </div>
    <div class="form__field">
      <input id="example-email-input" type="email" placeholder="Email Input" autocomplete="email-input">
      <label for="example-email-input">Email Input</label>
    </div>
    <div class="form__field">
      <input id="example-search-input" type="search" placeholder="Search Input">
      <label for="example-search-input">Search Input</label>
    </div>
    <div class="form__field">
      <input id="example-password-input" type="password" placeholder="Password Input" autocomplete="current-password">
      <label for="example-password-input">Password Input</label>
    </div>
    <div class="form__field">
      <select id="example-form-control-select">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
      <label for="example-form-control-select">Select</label>
    </div>
    <div class="form__field">
      <textarea id="example-form-control-textarea1" rows="5"></textarea>
      <label for="example-form-control-textarea1">Example textarea</label>
    </div>
    <div class="form__field">
      <input id="example-checkbox-input" type="checkbox" value="">
      <label for="example-checkbox-input">Checkbox</label>
    </div>
    <div class="form__field">
      <input id="example-checkbox-disabled-input" type="checkbox" value="disabled-checkbox" disabled>
      <label for="example-checkbox-disabled-input">Checkbox Disabled</label>
    </div>
    <div class="form__field">
      <input id="example-radio-input-1" type="radio" name="example-radio-group" value="option1" checked>
      <label for="example-radio-input-1">Radio Button 1</label>
    </div>
    <div class="form__field">
      <input id="example-radio-input-2" type="radio" name="example-radio-group" value="option2">
      <label for="example-radio-input-2">Radio Button 2</label>
    </div>
    <div class="form__field">
      <input id="example-radio-disabled-input" type="radio" name="example-radio-group" value="option3" disabled>
      <label for="example-radio-disabled-input">Radio Button Disabled</label>
    </div>
  </form>

Error message

<form action="" method="get" class="form form--design-guide">
    <div class="form__field form__field--reverse">
      <input id="example-text-reverse-input" type="text" placeholder="Text Input">
      <label for="example-text-reverse-input">Text Input</label>
    </div>
    <div class="form__field form__field--reverse">
      <input id="example-text-error-reverse-input" type="text" placeholder="Text Input Error">
      <label for="example-text-error-reverse-input">Text Input Error</label>
      <p class="form__error">Error message</p>
    </div>
    <div class="form__field form__field--reverse">
      <input id="example-email-reverse-input" type="email" placeholder="Email Input" autocomplete="email-input">
      <label for="example-email-reverse-input">Email Input</label>
    </div>
    <div class="form__field form__field--reverse">
      <input id="example-search-reverse-input" type="search" placeholder="Search Input">
      <label for="example-search-reverse-input">Search Input</label>
    </div>
    <div class="form__field form__field--reverse">
      <input id="example-password-reverse-input" type="password" placeholder="Password Input" autocomplete="current-password">
      <label for="example-password-reverse-input">Password Input</label>
    </div>
    <div class="form__field form__field--reverse">
      <select id="example-form-control-reverse-select">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
      <label for="example-form-control-reverse-select">Select</label>
    </div>
    <div class="form__field form__field--reverse">
      <textarea id="example-form-control-reverse-textarea1" rows="5"></textarea>
      <label for="example-form-control-reverse-textarea1">Example textarea</label>
    </div>
    <div class="form__field form__field--reverse">
      <input id="example-checkbox-reverse-input" type="checkbox" value="">
      <label for="example-checkbox-reverse-input">Checkbox</label>
    </div>
    <div class="form__field form__field--reverse">
      <input id="example-checkbox-reverse-disabled-input" type="checkbox" value="disabled-checkbox" disabled>
      <label for="example-checkbox-reverse-disabled-input">Checkbox Disabled</label>
    </div>
    <div class="form__field form__field--reverse">
      <input id="example-radio-reverse-input-1" type="radio" name="example-radio-group" value="option1" checked>
      <label for="example-radio-reverse-input-1">Radio Button 1</label>
    </div>
    <div class="form__field form__field--reverse">
      <input id="example-radio-reverse-input-2" type="radio" name="example-radio-group" value="option2">
      <label for="example-radio-reverse-input-2">Radio Button 2</label>
    </div>
    <div class="form__field form__field--reverse">
      <input id="example-radio-reverse-disabled-input" type="radio" name="example-radio-group" value="option3" disabled>
      <label for="example-radio-reverse-disabled-input">Radio Button Disabled</label>
    </div>
  </form>

4.2 Validation States

5. Buttons

  • <button class="button button--primary">Primary</button>
    <a href="#" role="button" class="button button--primary">Primary</a>
  • <button class="button button--primary" disabled>Primary Disabled</button>
    <a href="#" role="button" class="button button--primary is-disabled">Primary Disabled</a>
  • <button class="button button--secondary">Secondary</button>
    <a href="#" role="button" class="button button--secondary">Secondary</a>
  • <button class="button button--secondary" disabled>Secondary Disabled</button>
    <a href="#" role="button" class="button button--secondary is-disabled">Secondary Disabled</a>
  • <button class="button button--alt">Alternative</button>
    <a href="#" role="button" class="button button--alt">Alternative</a>
  • <button class="button button--alt" disabled>Alternative Disabled</button>
    <a href="#" role="button" class="button button--alt is-disabled">Alternative Disabled</a>
  • <button class="button button--primary-reverse">Primary</button>
    <a href="#" role="button" class="button button--primary-reverse">Primary</a>
  • <button class="button button--primary-reverse" disabled>Primary Disabled</button>
    <a href="#" role="button" class="button button--primary-reverse is-disabled">Primary Disabled</a>
  • <button class="button button--secondary-reverse">Secondary</button>
    <a href="#" role="button" class="button button--secondary-reverse">Secondary</a>
  • <button class="button button--secondary-reverse" disabled>Secondary Disabled</button>
    <a href="#" role="button" class="button button--secondary-reverse is-disabled">Secondary Disabled</a>
  • <button class="button button--alt-reverse">Alternative</button>
    <a href="#" role="button" class="button button--alt-reverse">Alternative</a>
  • <button class="button button--alt-reverse" disabled>Alternative Disabled</button>
    <a href="#" role="button" class="button button--alt-reverse is-disabled">Alternative Disabled</a>

6. Components

Price

Small

Compare at $495.00 Sale price $349.99 

<span class="price price--compare-at price--sm">
  <span class="price__label">Compare at</span>
  <span class="price__value">$495.00</span>
</span>
<span class="price price--final price--sm">
  <span class="price__label price__label--sale">Sale price</span>
  <span class="price__value">$349.99</span>
</span>

Medium

Compare at $495.00 Sale price $349.99 

<span class="price price--compare-at price--md">
  <span class="price__label">Compare at</span>
  <span class="price__value">$495.00</span>
</span>
<span class="price price--final price--md">
    <span class="price__label price__label--sale">Sale price</span>
  <span class="price__value">$349.99</span>
</span>

Large

Compare at $495.00 Sale price $349.99 

<span class="price price--compare-at price--lg">
  <span class="price__label">Compare at</span>
  <span class="price__value">$495.00</span>
</span>
<span class="price price--final price--lg">
    <span class="price__label price__label--sale">Sale price</span>
  <span class="price__value">$349.99</span>
</span>

Badge

Default

Pre-order flag 

<span class="badge">Pre-order flag</span>

Discount

-50% 

<span class="badge badge--discount">-50%</span>

Discount - Small

-25% 

<span class="badge badge--discount badge--sm">-25%</span>

Discount - Medium

-25% 

<span class="badge badge--discount badge--md">-25%</span>

Discount - Large

-25% 

<span class="badge badge--discount badge--lg">-25%</span>

7. Spacing

8. Iconography

Header logo & utilities

Other utilities

Product features

Social media

Payments

Flags

9. Imagery

Static

Liquid error (templates/page.design-guide line 636): invalid url input

Lazy Loaded with srcset

Liquid error (templates/page.design-guide line 639): invalid url input



10. Media/Videos




To generate a media object from your section settings do the following.

      
        # Add this setting inside your {% schema %}{% endschema %} tag
        Video setting link
        
          {
            "type": "video",
            "id": "video",
            "label": "Select A Video"
          }
        
      
    
      
        
        # Single video for desktop and mobile
        {{ video | video_tag: autoplay: true, loop: true, controls: false, playsinline: true, muted: true, class: 'full-media full-media--mobile' }}{{ video_desktop | video_tag: autoplay: true, loop: true, controls: false, playsinline: true, muted: true, class: 'full-media' }}

        # Separate videos for mobile and desktop
        {{ video_mobile | video_tag: autoplay: true, loop: true, controls: false, playsinline: true, muted: true, class: 'full-media full-media--mobile' }}
        {{ video_desktop | video_tag: autoplay: true, loop: true, controls: false, playsinline: true, muted: true, class: 'full-media full-media--desktop' }}

11. Dos and Don'ts