Styleguide

Brand Colors

Sunset
F4BEAF
Deep Teal
123422
Deep Forest
3a4b48
Night
171615
Mint
cbe9cb
Grey
bababa
Error Red
ec5851
Coral
fa8c77
Dark Mint
95b995
Blush
eec7cb
Lavender
dbd0ea
Rose
a65469
Champagne
f9e7cf
Sky
90bac9

Fonts

Avenir Book
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789!@#$%^&*()_+

Avenir Medium
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789!@#$%^&*()_+

Avenir Heavy
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789!@#$%^&*()_+

Avenir Oblique
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789!@#$%^&*()_+

Bely Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789!@#$%^&*()_+

Bely Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789!@#$%^&*()_+

Bebas Neue Pro Medium
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789!@#$%^&*()_+

Typography

H1 Bely Bold

Size 54 Line Height 64 Character Spacing 0

Mobile H1 Bely Bold

Size 54 Line Height 64 Character Spacing 0

H2 Bely Bold

Size 42 Line Height 52 Character Spacing 0

Mobile H2 Bely Bold

Size 34 Line Height 46 Character Spacing 0

H3 Bely Bold

Size 34 Line Height 41 Character Spacing 0

Mobile H3 Bely Bold

Size 26 Line Height 34 Character Spacing 0

P Large Avenir Book

Size 28 Line Height 42 Character Spacing 2%

Mobile P Large Avenir Book

Size 22 Line Height 34 Character Spacing 2%

P Large Accent Avenir Book Oblique

Size 28 Line Height 42 Character Spacing 2%

Mobile P Large Accent Book Oblique

Size 22 Line Height 34 Character Spacing 2%

P Avenir Medium

Size 16 Line Height 28 Character Spacing 4%

P Small Avenir Medium

Size 16 Line Height 28 Character Spacing 4%

P Small Bold Avenir Heavy

Size 14 Line Height 21 Character Spacing 2%

P XSmall Bold Avenir Heavy

Size 12 Line Height 19 Character Spacing 2%

Breadcrumbs Avenir Heavy

Size 12 Line Height 19 Character Spacing 2%

CTA Avenir Heavy

Size 13 Line Height 30 Character Spacing 5%

Scrolling Banner Bebas Neue Pro Medium

Size 21 Line Height 29 Character Spacing 5%

Eyebrow Avenir Heavy

Size 16 Line Height 20 Character Spacing 5%

Mobile Eyebrow Avenir Heavy

Size 14 Line Height 18 Character Spacing 5%

Quote Block Bebas Neue Pro Medium

Size 30 Line Height 43 Character Spacing 2%

Quote Block Bebas Neue Pro Medium

Size 27 Line Height 40 Character Spacing 2%

UI Elements

Primary Button

Height 50px Width TBD

SEE OUR STORY
SEE OUR STORY (Hover)
SEE OUR STORY (Disabled)

PLP Button

Height 50px Width TBD

CHOOSE YOUR SHADE CHOOSE YOUR SHADE CHOOSE YOUR SHADE

PDP Button

Height 50px Width TBD

ADD TO BAG ADD TO BAG ADD TO BAG

Carousel Tabs, PDP Review, Email Pre-Footer CTA

Height 50px Width TBD

WRITE A REVIEW NEW WRITE A REVIEW

Text Links

Text Link

Home

Text Link: Small

View Cart

Text Link: Legal Footer

Terms of Use

Breadcrumbs

Pagination

Forms

Input Fields

Validation Feedback goes here
Invalid Feedback goes here
I'm helper text to explain what's going on with this form input.

Drop Down: Filter

TODO

Iconography

Logos

Pley Logo Pley Logo

Navigation Bar

Video Player

Social Icons

Misc Icons