UI

Color Scheme

yellow dark
@yellow-dark #ecc000
yellow
@yellow #edcc3a
black dark
@black-dark #0a0a0a
black
@black #222222
gray dark
@gray-dark #404040
gray
@gray #5c5c5c
gray-light
@gray-light #848484
gray-lightest
@gray-lightest #a7a7a7

Typography

Acier Bat
class="typo__hb"
function: .lib-heading(hb);		 Homepage parallax Headings 75px
uppercase
0.015em
Lato Heavy
class="typo__h0"
function: .lib-heading(h0);		 Homepage Headings 26px
uppercase
0.05em

Lato Meduim,
H1 default

Category Page titles, default Page title, Filter title

 24px0.025em
Lato Bold
class="typo__h1bold"
function: .lib-heading(h1bold);		 Product page price 24px
0.025em

Lato bold,
H2 default

Product page related titles

 22px
uppercase
0.05em

Lato Bold
Product name
H3 default

product name / product price in quickview

 20px
line-height: 1.2
0.025em

Lato Bold
Product name in quickview,
H4 default

product name / prioduct price in quickview

 16px
line-height: 1.3
0.05em
Filters,
H5 default
subtitles in filters
 14px
0.025em
Default h6
CROSS-SITE USE: SUBTITLES / CATEGORY SUBCATEGORIES / PRODUCT PAGE.. ETC
12px
uppercase
line height 2.5%
0.025em
Lato Bold
Category listing product name
class="typo__h6lower"
function: .lib-heading(h6lower); 		CATEGORY listing PRODUCT NAME 12px
line height 1.5%
0.05em
H7 semibold (default)
function: .lib-heading(h7);		 CROSS-SITE USE: MENU LINKS / BREADCRUMB / PDP NAVIGATION.. ETC 10px
uppercase
0.05em
H7 Meduim
function: .lib-heading(h7medium);		 CATEGORY listing PRODUCT price 10px
uppercase
0.05em
H7 bold
function: .lib-heading(h7bold);		 Filters 10px
0.05em

Lato semibold, Paragraphs text

paragraph text

 11px
line height 1.5%
0.05em

Buttons

Primary
Link as button
Regular
Other

Tabs

Description
Tab 1 content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.

Care Instructions
Tab 2 content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.

Size Chart
Tab 3 content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.

Tables


Recent Orders
Order # Date Ship To Order Total Status Action
000000002 1/19/17 Firstname Last $19.52 Complete View Order Reorder
000000003 1/23/17 Firstname Last $39.64 Pending View Order Reorder
000000004 1/28/17 Firstname Last $259.99 Complete View Order Reorder
000000005 2/13/17 Firstname Last $23.19 Processing View Order Reorder

Form Elements

Form instructions paragraph

Personal Information
 
Additional Information

Checkboxes

Radio buttons

UX Elements on Black

Primary
Regular
Inputs

Icons

  • pinterest 61
  • facebook 64
  • twitter 6d
  • instagram 66
  • snapchat 6a
  • google-plus 72
  • tumblr 73
  • cart 62
  • menu 68
  • search 69
  • grid 65
  • list 67
  • star 6b
  • swimsuit 6c
  • crown 63
  • check 6e
  • close-round 6f
  • prev 70
  • next 71
  • arrow-up 71
  • arrow-down 71
  • close 71