Style guide

Colors

Body background
#ffffff
Primary background
#ECE6E1
Secondary background
#F1BE48
Text color
#000000
Text color gray
#797979
Link color
#000000
Link color gray
#797979
Link color hover
#8D65FF
Accent 1
#8D65FF
Accent 2
#797979
Accent 3
#5F8FB4
Accent 4
#A7BDB1
Accent 5
#AF95A6
Accent 6
#C0A392
Accent 7
#E56A54
Accent 8
#F68D2E
Accent 9
#4B9560
Accent 10
#A9C47F

CTAs

Button Primary Button Primary Button Primary Alternative Button Primary Alternative 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

Accordion

Multiple opened
Single opened

Typography

H1 GT Planar, Light Desktop: 52px/60px Mobile: 40px/48px Tag/class name: h1, .h1

Desktop: Clean formulas, clear results.

Mobile: Clean formulas, clear results.

H2 GT Planar, Light Desktop: 36px/42px Mobile: 30px/40px Tag/class name: h2, .h2

Desktop: Clean formulas, clear results.

Mobile: Clean formulas, clear results.

H3 GT Planar, Light Desktop: 30px/38px Mobile: 26px/34px Tag/class name: h3, .h3

Desktop: Clean formulas, clear results.

Mobile: Clean formulas, clear results.

H4 GT Planar, Light Desktop: 24px/30px Mobile: 21px/28px Tag/class name: h3, .h3

Desktop: Clean formulas, clear results.

Mobile: Clean formulas, clear results.

H5 GT Planar, Regular Desktop: 14px/20px Mobile: 14px/20px Tag/class name: h5, .h5

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

H6 GT Planar, Medium Desktop: 12px/16px Mobile: 12px/16px Tag/class name: h6, .h6

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

body-1 GT Planar, Regular Desktop: 18px/24px Mobile: 16px/22px Class name: .body-1

Desktop: Clean formulas, clear results.

Mobile: Clean formulas, clear results.

body-1-m GT Planar, Medium Class name: .body-1-m

Desktop: Clean formulas, clear results.

Mobile: Clean formulas, clear results.

body-2 GT Planar, Regular Desktop: 16px/22px Mobile: 16px/22px Class name: .body-2

Desktop: Clean formulas, clear results.

Mobile: Clean formulas, clear results.

body-2-m GT Planar, Medium Class name: .body-2-m

Desktop: Clean formulas, clear results.

Mobile: Clean formulas, clear results.

body-3 Matter Mono, Regular Desktop: 16px/22px Mobile: 16px/22px Class name: .body-3.font-secondary

Desktop: Clean formulas, clear results.

Mobile: Clean formulas, clear results.

body-3-m Matter Mono, Medium Class name: .body-3-m.font-secondary

Desktop: Clean formulas, clear results.

Mobile: Clean formulas, clear results.

body-4 GT Planar, Regular Desktop: 14px/20px Mobile: 14px/20px Class name: .body-4

Desktop: Clean formulas, clear results.

Mobile: Clean formulas, clear results.

body-4-m GT Planar, Medium Class name: .body-4-m

Desktop: Clean formulas, clear results.

Mobile: Clean formulas, clear results.

body-5 Matter Mono, Regular Desktop: 14px/20px Mobile: 14px/20px Class name: .body-5.font-secondary

Desktop: Clean formulas, clear results.

Mobile: Clean formulas, clear results.

body-5-m Matter Mono, Medium Class name: .body-5-m.font-secondary

Desktop: Clean formulas, clear results.

Mobile: Clean formulas, clear results.

Base svg icons

Search Arrow right Menu Close Plus Checkbox unchecked Checkbox checked