Your Toniebox Starter Set comes with a FREE content Tonie!
Shop below for your new Tonie!

Your cart

Your cart is empty

Oops! You have nothing here

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>

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 class="large-paragraph">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 class="copy1">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 class="copy2">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 class="copy3">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 class="copy4">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 class="copy5">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 Headings

h1. Heading 1 Bello

<h1>h1. Heading 1 <span class="bello">Bello</span></h1>

h2. Heading 2 Bello

<h2>h2. Heading 2 <span class="bello">Bello</span></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
<button type="button" class="button">Button</button>
<button type="button" class="button button--berry">Berry</button>
<button type="button" class="button button--yellow">Yellow</button>
<button type="button" class="button button--blue">Blue</button>
<button type="button" class="button button--green">Green</button>
<button type="button" class="button button--secondary">Secondary</button>
<br/> <br/>

<button type="button" class="button button--icon-inline">
<svg class="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 31" width="26" height="31"><path fill="#333" fill-rule="evenodd" d="M10.831 10.854V7.467l11.89-3.507v3.387l-11.89 3.507zm13.444-8.972a.974.974 0 00-.857-.154L9.584 5.808a.972.972 0 00-.697.932v14.685a5.423 5.423 0 00-2.934-.842c-2.69 0-4.878 1.862-4.878 4.15 0 2.289 2.189 4.15 4.878 4.15 2.69 0 4.878-1.861 4.878-4.15V12.88l11.89-3.506v7.971a5.423 5.423 0 00-2.934-.842c-2.69 0-4.877 1.862-4.877 4.15 0 2.288 2.188 4.15 4.877 4.15 2.69 0 4.878-1.862 4.878-4.15V2.66a.97.97 0 00-.39-.778z"/></svg> Button</button>
<button type="button" class="button button--berry button--icon-inline">
<svg class="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 31" width="26" height="31"><path fill="#333" fill-rule="evenodd" d="M10.831 10.854V7.467l11.89-3.507v3.387l-11.89 3.507zm13.444-8.972a.974.974 0 00-.857-.154L9.584 5.808a.972.972 0 00-.697.932v14.685a5.423 5.423 0 00-2.934-.842c-2.69 0-4.878 1.862-4.878 4.15 0 2.289 2.189 4.15 4.878 4.15 2.69 0 4.878-1.861 4.878-4.15V12.88l11.89-3.506v7.971a5.423 5.423 0 00-2.934-.842c-2.69 0-4.877 1.862-4.877 4.15 0 2.288 2.188 4.15 4.877 4.15 2.69 0 4.878-1.862 4.878-4.15V2.66a.97.97 0 00-.39-.778z"/></svg> Berry</button>
<button type="button" class="button button--yellow button--icon-inline">
<svg class="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 31" width="26" height="31"><path fill="#333" fill-rule="evenodd" d="M10.831 10.854V7.467l11.89-3.507v3.387l-11.89 3.507zm13.444-8.972a.974.974 0 00-.857-.154L9.584 5.808a.972.972 0 00-.697.932v14.685a5.423 5.423 0 00-2.934-.842c-2.69 0-4.878 1.862-4.878 4.15 0 2.289 2.189 4.15 4.878 4.15 2.69 0 4.878-1.861 4.878-4.15V12.88l11.89-3.506v7.971a5.423 5.423 0 00-2.934-.842c-2.69 0-4.877 1.862-4.877 4.15 0 2.288 2.188 4.15 4.877 4.15 2.69 0 4.878-1.862 4.878-4.15V2.66a.97.97 0 00-.39-.778z"/></svg> Yellow</button>
<button type="button" class="button button--blue button--icon-inline">
<svg class="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 31" width="26" height="31"><path fill="#333" fill-rule="evenodd" d="M10.831 10.854V7.467l11.89-3.507v3.387l-11.89 3.507zm13.444-8.972a.974.974 0 00-.857-.154L9.584 5.808a.972.972 0 00-.697.932v14.685a5.423 5.423 0 00-2.934-.842c-2.69 0-4.878 1.862-4.878 4.15 0 2.289 2.189 4.15 4.878 4.15 2.69 0 4.878-1.861 4.878-4.15V12.88l11.89-3.506v7.971a5.423 5.423 0 00-2.934-.842c-2.69 0-4.877 1.862-4.877 4.15 0 2.288 2.188 4.15 4.877 4.15 2.69 0 4.878-1.862 4.878-4.15V2.66a.97.97 0 00-.39-.778z"/></svg> Blue</button>
<button type="button" class="button button--green button--icon-inline">
<svg class="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 31" width="26" height="31"><path fill="#333" fill-rule="evenodd" d="M10.831 10.854V7.467l11.89-3.507v3.387l-11.89 3.507zm13.444-8.972a.974.974 0 00-.857-.154L9.584 5.808a.972.972 0 00-.697.932v14.685a5.423 5.423 0 00-2.934-.842c-2.69 0-4.878 1.862-4.878 4.15 0 2.289 2.189 4.15 4.878 4.15 2.69 0 4.878-1.861 4.878-4.15V12.88l11.89-3.506v7.971a5.423 5.423 0 00-2.934-.842c-2.69 0-4.877 1.862-4.877 4.15 0 2.288 2.188 4.15 4.877 4.15 2.69 0 4.878-1.862 4.878-4.15V2.66a.97.97 0 00-.39-.778z"/></svg> Green</button>
<button type="button" class="button button--secondary button--icon-inline">
<svg class="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 31" width="26" height="31"><path fill="#333" fill-rule="evenodd" d="M10.831 10.854V7.467l11.89-3.507v3.387l-11.89 3.507zm13.444-8.972a.974.974 0 00-.857-.154L9.584 5.808a.972.972 0 00-.697.932v14.685a5.423 5.423 0 00-2.934-.842c-2.69 0-4.878 1.862-4.878 4.15 0 2.289 2.189 4.15 4.878 4.15 2.69 0 4.878-1.861 4.878-4.15V12.88l11.89-3.506v7.971a5.423 5.423 0 00-2.934-.842c-2.69 0-4.877 1.862-4.877 4.15 0 2.288 2.188 4.15 4.877 4.15 2.69 0 4.878-1.862 4.878-4.15V2.66a.97.97 0 00-.39-.778z"/></svg> Secondary</button>

<br/> <br/>

<button type="button" class="button button--small">Button</button>
<button type="button" class="button button--berry button--small">Berry</button>
<button type="button" class="button button--yellow button--small">Yellow</button>
<button type="button" class="button button--blue button--small">Blue</button>
<button type="button" class="button button--green button--small">Green</button>
<button type="button" class="button button--secondary button--small">Secondary</button>

<br/> <br/>

<button type="button" class="button button--big">Big</button>
<br/> <br/>
<button type="button" class="button button--outline">Outline</button>
<br/> <br/>
<a class="link" href="#" role="button">Link</a>

6. Components

7. Spacing

8. Iconography

tonies® - The official online shop for the US. Instagram Pinterest

9. Imagery

Static

Lazy Loaded with srcset

10. Dos and Don'ts