Cookie Policy

Varley uses cookies to ensure that we give you the best experience on our website. Continue browsing if you're happy with cookies within our privacy policy.

MY CART
Checkout

*Promo code can be applied on next page.

Style guide

Colors


Primary

#898699
$color-primary // $color-lilac // $text-color-secondary ... .bg-primary, .text-primary

Grey Extra Light

#ebedef
$color-grey-x-light ... .bg-grey-x-light, .text-grey-x-light

Grey Light

#dbe1e5
$color-grey-light ... .bg-grey-light, .text-grey-light

Grey

#4a4a4a
$color-grey ... .bg-grey, .text-grey

Grey Dark

#3f3f3f
$color-grey-dark ... .bg-grey-dark, .text-grey-dark

Black

#000000
$color-black // $text-color-primary // $global-font-color ... .bg-dark, .text-dark

White

#ffffff
$color-white ... .bg-light, .text-light

Error

#d0021b
$color-error ... .bg-error, .text-error

Typography


Element: H1

Varley is performance...

Varley is performance...

h1, .h1 <h1 class="text-dark">Varley is performance...</h1> <h1 class="text-light bg-dark sm-padding">Varley is performance...</h1> ... <h2 class="h1 text-dark">Varley is performance...</h2>

Element: H2

Varley is performance...

Varley is performance...

h2, .h2 <h2 class="text-dark">Varley is performance...</h2> <h2 class="text-light bg-dark sm-padding">Varley is performance...</h2> ... <h1 class="h2 text-dark">Varley is performance...</h1>

Element: H3

Varley is performance...

Varley is performance...

h3, .h3 <h3 class="text-dark">Varley is performance...</h3> <h3 class="text-light bg-dark sm-padding">Varley is performance...</h3> ... <h1 class="h3 text-dark">Varley is performance...</h1>

Element: P (body)

Varley is performance...

Varley is performance...

body, p, .text-large <p>Varley is performance...</p> <p class="text-large">Varley is performance...</p> ... <body> Varley is performance... </body>

a, a.link-hover <a href="/">WHAT SIZE AM I?</a> <a class="link-hover" href="/">WHAT SIZE AM I?</a>

Element: Blockquote

“Natural glow from inside, truly revolutionary product”
blockquote, .blockquote <blockquote>“Natural glow from inside, truly revolutionary product”</blockquote>

Element: Price

$47

.price <p class="price">$47</p>

Swatches


Element: Color Swatches



Element: Size Swatches

{% for option in product.options_with_values %} {% if option.values.size > 1 %} {% assign lowercase_option_name = option.name | handle %} {% assign option_index = forloop.index0 %} <div class="swatch-container swatches--{{ lowercase_option_name }}"> {% for value in option.values %} <div class="swatch"> <input class="swatch__input" type="radio" name="option-{{ option_index }}" value="{{ value }}" data-swatch data-option-index="{{ option_index }}"> <label class="swatch__label" for="option-{{ option_index }}" title="{{ value }}"> {% if lowercase_option_name == 'color' %} {% assign swatch_icon = 'swatch-' | append: value | handle | append: '.png' %} <img class="swatch__icon" src="{{ swatch_icon | asset_img_url: '80x' }}"> {% else %} <span class="swatch__title">{{ value }}</span> {% endif %} </label> </div> {% endfor %} </div> {% endif %} {% endfor %}

Forms


Element: Input #1

That email address doesn’t seem to exist!
Please try again.
.form__field-wrapper, .form__input, .form__input-error <form class="form" action="#"> <div class="form__field-wrapper"> <input class="form__input" type="email" name="email" placeholder="Enter your email"> {% if form.errors.size > 1 %} <div class="form__input-error">That email address doesn’t seem to exist!<br/>Please try again.</div> {% endif %} </div> </form>

Element: Input #2

That password doesn’t seem to work! Please try again.
.form__field-wrapper.input--line, .form__input.input--line <form class="form" action="#"> <div class="form__field-wrapper input--line"> <input class="form__input input--line" type="password" name="password" placeholder="Password"> {% if form.errors.size > 1 %} <div class="form__input-error">That password doesn’t seem to work! Please try again.</div> {% endif %} </div> </form>

Element: Newsletter Sign Up

<form class="flex-form" action="#"> <div class="form__field-wrapper"> <input class="form__input" type="email" name="email" placeholder="Enter your email"> </div> <span class="form__btn-wrapper"> <button type="submit" class="newsletter__submit" name="commit" id="Subscribe"> <img src="//cdn.shopify.com/s/files/1/0090/1509/9507/t/5/assets/icon-send_40x.png?16489877527343485074"> </button> </span> </form>

Element: Search Form

<form class="search-results__form form-search" action="/search" method="get" role="search"> <div class="form-search-inner max-width-container"> <input type="text" class="h2" name="q" autofocus="autofocus" placeholder="Search" value="" /> <input type="hidden" name="type" value="product" /> <span class="results u-serif"></span> <button class="btn search__submit" type="submit">Submit</button> </div> </form>

Element: Button #1

Add To Bag
.btn <a class="btn" href="#">Add To Bag</a> ... <button class="btn" type="submit">Add To Bag</button>

Element: Button Full WIdth

Add To Bag
.btn.btn--full <a class="btn btn--full" href="#">Add To Bag</a> ... <button class="btn btn--full" type="submit">Add To Bag</button>

Element: Button Text Link

Add To Bag
.btn.text-link <a class="btn text-link" href="#">Add To Bag</a> ... <button class="btn text-link" type="submit">Add To Bag</button>

Element: CTA Button

Add To Bag
.btn.text-link <a class="homepage-cta-button" href="#">Shop Now</a> ... <button class="homepage-cta-button" type="submit">Shop Now</button>

Element: Select Box #1

.form__select <select class="form__select" name="select-1"> {% for i in (1..5) %} <option value="{{ i }}">Option {{ i }}</option> {% endfor %} </select>

Element: Select Box #2

  • $10
  • $20
  • $30
  • $40
  • $50












.form__select.select--custom <div class="form__select select--custom" data-select> <div class="form__select-header" data-select-header> <input class="form__select-input" type="text" disabled name="select-2" value="Price" data-select-input> </div> <ul class="form__select-dropdown" data-select-dropdown> {% for i in (1..5) %} <li class="form__select-dropdown-item" data-select-value="${{ i | times: 10 }}">${{ i | times: 10 }}</li> {% endfor %} </ul> </div>

Icons


Element: Bunny

{% include 'icon-bunny', class: 'custom-class' %}

Element: Droplet

{% include 'icon-droplet', class: 'custom-class' %}

Element: Formula

{% include 'icon-formula', class: 'custom-class' %}

Element: Natural

{% include 'icon-natural', class: 'custom-class' %}

Element: Plant

{% include 'icon-plant', class: 'custom-class' %}

Element: Science 1

{% include 'icon-science-1', class: 'custom-class' %}

Element: Science 2

{% include 'icon-science-2', class: 'custom-class' %}

Element: Sun

{% include 'icon-sun', class: 'custom-class' %}

Icon Images


Element: Gift Card

<img src="{{ 'icon-gift-card.png' | asset_img_url: '40x' }}">

Element: P (parking?)

<img src="{{ 'icon-p.png' | asset_img_url: '40x' }}">

Element: Sculp

<img src="{{ 'icon-sculp.png' | asset_img_url: '40x' }}">

Element: Send

<img src="{{ 'icon-send.png' | asset_img_url: '40x' }}">

Element: Snowdrop

<img src="{{ 'icon-snowdrop.png' | asset_img_url: '40x' }}">

Element: static

<img src="{{ 'icon-static.png' | asset_img_url: '40x' }}">

Element: Stretch

<img src="{{ 'icon-stretch.png' | asset_img_url: '40x' }}">

Element: Truck

<img src="{{ 'icon-truck.png' | asset_img_url: '40x' }}">

Element: Youtube

<img src="{{ 'icon-youtube.png' | asset_img_url: '40x' }}">

Element: Facebook

<img src="{{ 'icon-facebook.png' | asset_img_url: '40x' }}">

Element: Pinterest

<img src="{{ 'icon-pinterest.png' | asset_img_url: '40x' }}">

Element: Instagram

<img src="{{ 'icon-instagram.png' | asset_img_url: '40x' }}">