Style guide

Colors

Body background

Background primary

Text heading

Text body primary

Text body secondary

Text body light

Error

Border

Accent 1

Accent 2

Form Fields

Input

Quantity input

Accordions

Multiple opened
Single opened

Typography

H1 Boogy Brut Poster, White Desktop: 100px Mobile: 60px Tag/class name: h1, .h1

Desktop: Boogy Brut Poster

Mobile: Boogy Brut Poster

H2 Boogy Brut Poster, White Desktop: 60px Mobile: 40px Tag/class name: h2, .h2

Desktop: Boogy Brut Poster

Mobile: Boogy Brut Poster

H3 Styrene B, Regular Desktop: 32px Mobile: 26px Tag/class name: h3, .h3

Desktop: Styrene B

Mobile: Styrene B

H4 Styrene B, Light Desktop: 32px Mobile: 26px Tag/class name: h4, .h4, .h4--italic

Desktop: Styrene B

Mobile: Styrene B

Italic: Styrene B

H5 Styrene B, Light Desktop: 24px Mobile: 22px Tag/class name: h5, .h5

Desktop: Styrene B
Mobile: Styrene B

H6 Styrene B, Medium Desktop: 12px Mobile: 12px Tag/class name: h6, .h6

Desktop: Styrene B
Mobile: Styrene B

.h7 Styrene B, Regular Desktop: 42px Mobile: 34px Class name: .h7

Desktop: Styrene B
Mobile: Styrene B

Body 1 Styrene B, Regular Desktop: 18px Mobile: 16px Tag/class name: .body1

Clinically-proven skincare

Body 2 Styrene B, Regular Desktop: 16px Mobile: 16px Tag/class name: .body2

Clinically-proven skincare

Body 3 Styrene B, Regular, Medium Desktop: 14px Mobile: 14px Tag/class name: .body3, .body3--bold

Clinically-proven skincare

Clinically-proven skincare

Body 4 Styrene B, Regular Desktop: 12px Mobile: 12px Tag/class name: .body4

Clinically-proven skincare

Base svg icons