Free shipping on subscriptions and all orders over $35.

Diff - 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/Heading XXL

<h1>h1. Heading 1/Heading XXL</h1>

h2. Heading 2/Heading XL

<h2>h2. Heading 2/Heading XL</h2>

h3. Heading 3/Heading L

<h3>h3. Heading 3/Heading L</h3>

h4. Heading 4/Heading M

<h4>h4. Heading 4/Heading M</h4>
h5. Heading 5/Heading S
<h5>h5. Heading 5/Heading S</h5>
h6. Heading 6/Heading XS
<h6>h6. Heading 6/Heading XS</h6>

3. Colour Palette

Primary colours

  • $color-primary #333333
  • $color-secondary #ffffff

Basic Colours

  • $color-orange #F37021
  • $color-blue-cta #F37021
  • $color-white #ffffff
  • $color-grey #898989
  • $color-light-grey #E9E9E9
  • $color-dark-grey #545353

Flavour colours

  • $color-emblem #8C6240
  • $color-waypoint #A45743
  • $color-cardinal #DC8159
  • $color-shaw #784D6B
  • $color-horizon #C35B98
  • $color-azimuth #647358

Intensity colours

  • $color-light-roast #E18E2B
  • $color-medium-roast #AC5D00
  • $color-dark-roast #593C10
  • $color-espresso #000000

Validation

  • $color-error-bg #D8232A
  • $color-success-bg #55B330

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

Buttons - Large

  • <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--tertiary">Secondary</button>
    <a href="#" role="button" class="button button--tertiary">Secondary</a>
  • <button class="button button--tertiary" disabled>Secondary Disabled</button>
    <a href="#" role="button" class="button button--tertiary is-disabled">Secondary Disabled</a>
  • <button class="button button--alt">Selector</button>
    <a href="#" role="button" class="button button--selector">Selector</a>
  • <button class="button button--alt" disabled>Selector Disabled</button>
    <a href="#" role="button" class="button button--selector is-disabled">Selector Disabled</a>

Buttons - Small

  • <button class="button button--small button--primary">Primary</button>
    <a href="#" role="button" class="button button--small button--primary">Primary</a>
  • <button class="button button--small button--primary" disabled>Primary Disabled</button>
    <a href="#" role="button" class="button button--small button--primary is-disabled">Primary Disabled</a>
  • <button class="button button--small button--secondary">Secondary</button>
    <a href="#" role="button" class="button button--small button--secondary">Secondary</a>
  • <button class="button button--small button--secondary" disabled>Secondary Disabled</button>
    <a href="#" role="button" class="button button--small button--secondary is-disabled">Secondary Disabled</a>
  • <button class="button button--small button--tertiary">Secondary</button>
    <a href="#" role="button" class="button button--small button--tertiary">Secondary</a>
  • <button class="button button--small button--tertiary" disabled>Secondary Disabled</button>
    <a href="#" role="button" class="button button--small button--tertiary is-disabled">Secondary Disabled</a>
  • <button class="button button--small button--selector">Selector</button>
    <a href="#" role="button" class="button button--small button--selector">Selector</a>
  • <button class="button button--small button--selector" disabled>Selector Disabled</button>
    <a href="#" role="button" class="button button--small button--selector is-disabled">Selector Disabled</a>

6. Components

7. Spacing

8. Iconography

Icon Utilities

  • Icon Left
  • Icon Right

SVG Utilities

  • Arrow Up
  • Arrow Down

9. Imagery

Static

Lazy Loaded with srcset

10. Dos and Don'ts

In stock Sold out
From
Compare at Subscription price Sale price Regular price per delivery
Purchase Options

Free shipping eligible with purchase minimum
30-day refund policy
Go to product details page