Global/Color Scheme

Gray colors

#efefef
$x-light-grey
#f2f2f2
$light-grey
#dcdbd9
$grey
#a2a2a2
$dark-grey
#333333
$x-dark-grey
#505050
$content-grey
#666666
$checkout-grey

Other colors

#5d7e95
$blue
#7997ac
$blue01
#90dbf0
$blue02
#000000
$black
#ffffff
$white
#94928c
$brown
#b77fa1
$pink
#019328
$green
#990000
$sangaria
#faeded
$tutu
#ffcc00
$yellow
#aa2121
$red
#e45a00
$orange
#e0dcd9
$beige

Global/Fonts

Lato

Font family: Lato Regular

Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Opsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Opsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia.

Font family: Lato Bold

Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Opsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Opsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia.

Font family: Lato Light

Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Opsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Opsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia.

Font family: Lato Black

Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Opsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Opsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia.

ProximaNova

Font family: ProximaNova Regular

Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Opsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Opsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia.

Font family: ProximaNova Light

Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Opsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Opsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia.

Font family: ProximaNova RegularIt

Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Opsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Opsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia.

Font family: ProximaNova Semibold

Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Opsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Opsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia.

Font family: ProximaNova Bold

Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Opsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Opsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia.

Lucida

Font family: Lucida

Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Opsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia. Opsum dolor sit amet, consectetur adipisicing elit. Ducimus iste dignissimos quidem quod, ex omnis alias enim quae asperiores quo saepe magni, quibusdam earum, qui obcaecati hic harum debitis mollitia.

Global/Headers

Header H1 expample

Header H2 expample

Header H3 expample

Header H4 expample

Global/Lists

PDP List example

  • Extra strength for stubborn acne
  • Unclogs blackheads, minimizes pore size, & calms redness
  • Water-light yet potent formula produces fast results
  • Use twice daily after cleansing skin

Content Page List example

Global/Tabels

Gift Voucher Number Remaining Balance Expiration Date
DITRTMSHARFDMGOD $999,658.56 4/4/18
HARFDMGODDITRTMS $111,658.56 4/4/18
MSHARDITRTFDMGOD $222,658.56 4/4/18

Global/Product Tile

$29.00
Quick view

Form elements/Buttons

                    <div><button class="button">button</button ></div>                   
                    <div><button class="button disabled">button-disabled</button ></div>
                    <div><button class="button-secondary">button-secondary</button ></div>
                    <div><button class="button-tertiary">button-tertiary</button ></div>
                    <div><button class="button-gray">button-gray</button ></div>
                    <div><button class="button-link">button-link</button ></div>
                  

Form elements/Inputs

Form row input

Search input

Library/Icons

icon-plus-light     icon-minus-light     icon-attention     icon-question     icon-credit     icon-box     icon-eye     icon-check-bold     icon-check     icon-security     icon-phone     icon-help    
    icon-kits     icon-bestsellers     icon-sign-out     icon-angle-left     icon-angle-right     icon-close-2     icon-menu     icon-shopping-bag-desktop     icon-shopping-bag-mobile     icon-caret-down     icon-caret-up    
icon-angle-down     icon-chevron-right     icon-close     icon-minus     icon-plus     icon-search     icon-info     icon-checkbox-checked     icon-checkbox-unchecked     icon-star-empty     icon-star-half     icon-sort    
                <span class="icon-plus-light">icon-plus-light</span>
                <span class="icon-minus-light">icon-minus-light</span>               
                <span class="icon-attention">icon-attention</span>    
                <span class="icon-question">icon-question</span>                
                <span class="icon-credit">icon-credit</span>    
                <span class="icon-box">icon-box</span> 
                <span class="icon-eye">icon-eye</span>    
                <span class="icon-check-bold">icon-check-bold</span> 
                <span class="icon-check">icon-check</span> 
                ... 
                <span class="icon-sort">icon-sort</span>