Style Guide
Gray colors
Other colors
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
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
<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>
Global/Color Scheme