Colours

Maroon

  • Hex#7B1221
  • RGB123,18,33

Burgundy

  • Hex#B0013A
  • RGB176,1,58

Black

  • Hex#27222
  • RGB39,34,34

Dark Gray

  • Hex#696969
  • RGB105,105,105

Gray

  • Hex#ABABAB
  • RGB154,154,154

Light Gray 1

  • Hex#E8E6E6
  • RGB232,230,230

Light Gray 2

  • Hex#F6F6F6
  • RGB246,246,246

White

  • Hex#FFFFFF
  • RGB255,255,255

Red Gradient

  • Hex#7B1221   /   #B0013A
  • RGB123,18,33   /   154,154,154

Light Monotone Gradient

  • Hex#E8E6E6   /   #F6F6F6
  • RGB232,230,230   /   246,246,246

Dark Monotone Gradient

  • Hex#696969   /   #ABABAB
  • RGB105,105,105   /   176,1,58

Typography

Typestyle Weight Size Line Tracking Typeface

Heading 1

 700 48px 60px 0px Museo Sans

Subheading 1

 Regular 48px 60px 0px Georgia

Heading 2

 500 36px 42px 0px Museo Sans

Subheading 2

 Regular 36px 42px 0px Georgia

Heading 3

 500 32px 36px 0px Museo Sans

Subeading 3

 Regular 30px 32px 0px Georgia

Heading 4

 500 28px 30px 0px Museo Sans

Subeading 4

 Regular 26px 30px 0px Georgia
Heading 5
 500 24px 28px 0px Museo Sans
Subeading 5
 Regular 24px 28px 0px Georgia
Heading 6
 500 18px 24px 0px Museo Sans
Subeading 6
 Regular 18px 24px 0px Georgia

Body

 500 18px 28px 0px Museo Sans

Small Body

 500 16px 20px 0px Museo Sans
Caption
 Regular 14px 18px 0px Georgia
Quote
 Regular 24px 30px 0px Georgia
<!-- Headers -->
<h1>h1. This is a very large header</h1>
<h1><small>This is a very large subheader</small></h1>
<h2>h2. This is a large header</h2>
<h2><small>This is a large subheader</small></h1>
<h3>h3. This is a medium header</h3>
<h3><small>This is a medium header</small></h1>
<h4>h4. This is a moderate header</h4>
<h4><small>This is a moderate subheader</small></h1>
<h5>h5. This is a small header</h5>
<h5><small>This is a small subheader</small></h1>
<h6>h6. This is a tiny header</h6>
<h6><small>This is a tiny subheader</small></h6>

<!-- Body Copy -->
<p>Body Copy</p>
<p><small>Small Body Copy</small></p>
<p class="intro">Intro Body Copy</p>

<!-- Blockquote -->
<blockquote>
<p>Quote</p>
<cite>Citation</cite>
 </blockquote>

Icons

Check

X

Arrow Down

Arrow Up

Arrow Right

Arrow Left

Menu

User

Users

Lock

Phone

Star

Map Pin

Flag

Plus

Minus

Chevron Down

Chevron Up

Chevron Left

Chevron Right

Edit

Download

File

Mail

Shield

Search

Crosshair

Target

<i data-feather="check"></i>
<i data-feather="arrow-down"></i>
<i data-feather="star"></i>
<i data-feather="chevron-up"></i>
<i data-feather="target"></i>

Buttons & Links

Buttons
Primary
Outline
CTA Link
<!-- Primary Button -->
<a href="index.html" class="button primary">Learn More</a>
<a href="index.html" class="button primary">Learn More <i data-feather="chevron-right"></i></a>
<a href="index.html" class="button primary disabled">Learn More</a>

<!-- Outline Button -->
<a href="index.html" class="button primary hollow">Learn More</a>
<a href="index.html" class="button primary hollow">Learn More <i data-feather="chevron-right"></i></a>
<a href="index.html" class="button primary hollow disabled">Learn More</a>

<!-- CTA Link -->
<a href="index.html" class="button primary clear">Learn More</a>
<a href="index.html" class="button primary clear ">Learn More <i data-feather="chevron-right"></i></a>
<a href="index.html" class="button primary clear disabled">Learn More</a>
Buttons
Secondary
Outline Secondary
CTA Link Secondary
<!-- Secondary Button -->
<a href="index.html" class="button secondary">Learn More</a>
<a href="index.html" class="button secondary ">Learn More <i data-feather="chevron-right"></i></a>
<a href="index.html" class="button secondary disabled">Learn More</a>

<!-- Outline Button -->
<a href="index.html" class="button secondary hollow">Learn More</a>
<a href="index.html" class="button secondary hollow">Learn More <i data-feather="chevron-right"></i></a>
<a href="index.html" class="button secondary hollow disabled">Learn More</a>

<!-- CTA Link -->
<a href="index.html" class="button secondary clear">Learn More</a>
<a href="index.html" class="button secondary clear">Learn More <i data-feather="chevron-right"></i></a>
<a href="index.html" class="button secondary clear disabled">Learn More</a>
Textlink

We are the largest library of Tunes. Now you can search Welcome Tune codes directly through our website.

<p>We are the largest library of Tunes. Now you can search Welcome Tune codes directly through our <a href="link.html">website</a>.</p>
Textlink

We are the largest library of Tunes. Now you can search Welcome Tune codes directly through our website

<p>We are the largest library of Tunes. Now you can search Welcome Tune codes directly through our <a href="link.html">website</a>.</p>
Navigation Tabs


<ul data-tabs id="example-tabs">
<li class="tabs-title is-active">
<a href="#panel1" aria-selected="true">Tab 1</a>
 </li>
<li class="tabs-title">
<a href="#panel2" data-tabs-target="panel2">Tab 2</a>
 </li>
<li class="tabs-title">
<a href="#panel3" data-tabs-target="panel3">Tab 3</a>
 </li>
 </ul>
Navigation Tabs


<ul data-tabs id="example-tabs dark-tabs">
<li class="tabs-title is-active">
<a href="#panel1" aria-selected="true">Tab 1</a>
 </li>
<li class="tabs-title">
<a href="#panel2" data-tabs-target="panel2">Tab 2</a>
 </li>
<li class="tabs-title">
<a href="#panel3" data-tabs-target="panel3">Tab 3</a>
 </li>
 </ul>
Breadcrumbs
<div class="breadcrumbs-wrap">
<ul class="breadcrumbs">
<span> <span> <a href="#">Parent</a> /
<span> <a href="#">Child</a> /
<span class="breadcrumb_last">Grandchild<span> </span> </span> </span> </ul> </div>
<!-- WordPress Snippet -->
<div class="breadcrumbs-wrap">
<?php if ( function_exists('yoast_breadcrumb') ) {yoast_breadcrumb('<ul class="breadcrumbs">','</ul>'); } ?> </div>
Breadcrumbs
<div class="breadcrumbs-wrap">
<ul class="breadcrumbs">
<span> <span> <a href="#">Parent</a> /
<span> <a href="#">Child</a> /
<span class="breadcrumb_last">Grandchild<span> </span> </span> </span> </ul> </div>
<!-- WordPress Snippet -->
<div class="breadcrumbs-wrap">
<?php if ( function_exists('yoast_breadcrumb') ) {yoast_breadcrumb('<ul class="breadcrumbs">','</ul>'); } ?> </div>

Forms

Text Input
<label for="middle-label" class="text-left middle">Label</label>
<input type="text" id="middle-label" placeholder="Placeholder">
Dropdown
<label for="example-select" class="text-left middle">Label</label>
<select name="select-box" id="example-select">
<option value="" disabled selected>Select Option</option>
<option value="one">Option 1</option>
<option value="two">Option 2</option>
<option value="three">Option 3</option>
<option value="four">Option 4</option>
 </select>
Radio Buttons
Are a beneficiary of a:
Checkboxes
Select a service
Pagination
<!-- Radio Buttons -->
<fieldset>
<legend>Are a beneficiary of a:</legend>
<ul class="no-bullet">
<li><input type="radio" name="beneficiary" value="pension" id="pension" required><label for="pension">Pension</label></li>
<li><input type="radio" name="beneficiary" value="investment" id="investment" required><label for="investment">Investment</label></li>
<li><input type="radio" name="beneficiary" value="insurance" id="insurance" required><label for="insurance">Insurance</label></li>
 </ul>
 </fieldset>

<!-- Checkboxes -->
<fieldset>
<legend>Select a service:</legend>
<ul class="no-bullet">
<li><input type="checkbox" id="checkbox1" required><label for="checkbox1">Trace</label></li>
<li><input type="checkbox" id="checkbox2" required><label for="checkbox2">Screen</label></li>
<li><input type="checkbox" id="checkbox3" required><label for="checkbox3">Cleanse</label></li>
 </ul>
 </fieldset>
<!-- Structure -->
<div class="page-navigation">
  <ul class="pagination">
    <li><a class="prev disabled"></a></li>
    <li><span aria-current="page" class="current">1</span></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li class="ellipsis"></li>
    <li><a href="#">17</a></li>
    <li><a href="#">18</a></li>
    <li><a class="next" href="#"></a></li>
  </ul>
</div>

<!-- WordPress Snippet -->
<?php joints_page_navi(); ?>