Colors

#ffffff

$color-white

#000000

$color-black

#ff4444

$color-grapefruit

Typography

H1: Header 1

<h1>H1: Header 1</h1>

H2: Header 2

<h2>H2: Header 2</h2>

H3: Header 3

<h3>H3: Header 3</h3>

H4: Header 4

<h4>H4: Header 4</h4>
H5: Header 5
<h5>H5: Header 5</h5>
H6: Header 6
<h6>H6: Header 6</h6>

Links

This is a Link

<p><a href="#" class="link">This is a Link</a></p>

Buttons

<button class="btn">Button</button>
<button class="btn btn--hovered">Button</button>
<button class="btn btn--disabled">Button</button>
<button class="btn btn-cta">Primary CTA</button>
<button class="btn btn-cta" add-to-cart>Add to cart</button>
<button class="btn btn-cta btn-cta--sold-out">Sold Out</button>

Form Elements

Dropdown (Select)

<div class="style-guide--dropdown"> <div class="dropdown js-dropdown"> <div class="dropdown--main js-dropdown-activate"> <span class="dropdown--main-text js-dropdown-text">Gold</span> <span class="material-icons dropdown--arrow js-dropdown-arrow">&#xE5C5;</span> </div> <ul class="dropdown--list js-dropdown-list"> <li class="dropdown--list-item selected js-dropdown-item"> Gold </li> <li class="dropdown--list-item js-dropdown-item"> Bronze </li> <li class="dropdown--list-item js-dropdown-item"> Rose Gold </li> <li class="dropdown--list-item js-dropdown-item"> Black </li> </ul> </div> </div>

Radio (Input)

<div class="radio--check" data-radio> {% include 'svg-icon-radio' %} </div>
<div class="form--radio is-active" data-radio> {% include 'svg-icon-radio' %} </div>

Radio (Swatches)

Strap Color:

{% assign strap_option_index = false %} {% for option in product.options %} {% assign option_handle = option | handle %} {% if option_handle == 'strap' %} {% assign strap_option_index = forloop.index0 %} {% endif %} {% endfor %} {% assign strap_values = product.options_with_values[strap_option_index].values %} <div class="form-element__wrap"> <p class="form-element__header">Strap Color:<span class=""></span></p> {% if strap_values.size > 1 %} <div class="swatch"> {% for value in strap_values %} <div data-value="{{ value | escape }}" class="swatch-element {{ value | handle }}"> <input type="radio" id="swatch-{{ value | handle }}" class="swatch-input" name="swatch" value="{{ value }}"> <label for="swatch-{{ value | handle }}" class="swatch-label"></label> </div> {% endfor %} </div> {% endif %} </div>

Illustrations/Icons

{% include 'svg-os' %}
{% include 'svg-ifit-band' %}
{% include 'svg-truck' %}
{% include 'svg-hand' %}

Atomic Elements

Value Props

Compatible with Android and iOS
Free Shipping on Orders Over $39
1 Year Warranty
{% include 'value-props' %}

Icons