Style guide

Colors

Body background
#FFFFFF
Primary background
#f5f3ef
Secondary background
#ebe8e0
Tertiary background
#183028
Quaternary background
#5E7461
Fifth background
#F2FFD1
Text color
#183028
Text color gray
#dddddd
Link color
#183028
Link color gray
#dddddd
Link color hover
#002aff
Accent 1
#f2ffd1
Accent 2
#dddddd
Accent 3
#797979
Accent 4
#A9A9A9
Accent 5
#4C4C4C
Accent 6
#ff0000
Color success
#4B9560
Color Error
#ff0000

CTAs

Button Primary Button Primary Button Primary Alt Button Primary ALt Button Secondary Button Secondary Button Full Width

Links

Link with class .link Link with class .link-underline Link with class .link-gray

Tag

Bestseller

Modal

Typography

H1 Denim INK Desktop: 52px/60px Mobile: 40px/44px Tag/class name: h1, .h1

Desktop: Clean formulas, clear results.

Mobile: Clean formulas, clear results.

H2 Denim INK Desktop: 36px/42px Mobile: 30px/36px Tag/class name: h2, .h2

Desktop: Clean formulas, clear results.

Mobile: Clean formulas, clear results.

H3 Denim INK Desktop: 30px/38px Mobile: 26px/30px Tag/class name: h3, .h3

Desktop: Clean formulas, clear results.

Mobile: Clean formulas, clear results.

H4 Denim INK Desktop: 24px/30px Mobile: 21px/28px Tag/class name: h3, .h3

Desktop: Clean formulas, clear results.

Mobile: Clean formulas, clear results.

H5 Denim INK Desktop: 14px/20px Mobile: 14px/20px Tag/class name: h5, .h5

Desktop: Clean formulas, clear results.
Mobile: Clean formulas, clear results.

H6 Tracking Desktop: 12px/16px Mobile: 12px/16px Tag/class name: h6, .h6

Desktop: Clean formulas, clear results.
Mobile: Clean formulas, clear results.

H7 Tracking Desktop: 24px/30px Mobile: 20px/26px Class name: .h7

Desktop: Clean formulas, clear results.

Mobile: Clean formulas, clear results.

body-1 Denim Ink Desktop: 18px/24px Mobile: 16px/22px Class name: .body-1

Desktop: Clean formulas, clear results.

Mobile: Clean formulas, clear results.

body-2, Semibold Denim Ink Desktop: 16px/22px Mobile: 14px/20px Class name: .body-2

Desktop: Clean formulas, clear results.

Mobile: Clean formulas, clear results.

body-3, Semibold Denim Ink Desktop: 14px/20px Mobile: 14px/20px Class name: .body-3.font-secondary

Desktop: Clean formulas, clear results.

Mobile: Clean formulas, clear results.

Base svg icons

Base form field