Typography
| Type | Text | Desktop XL (1512 width) |
Desktop 2XL (1728 width) |
Tablet (768 width) |
Mobile (390 width) |
|---|---|---|---|---|---|
| H1 large (.h1-large) |
This is a heading |
Montserrat 50px 400 |
Montserrat 50px 400 |
Montserrat 40px 400 |
Montserrat 28px 400 |
| H1 (.h1) |
This is a heading |
Montserrat 30px 500 |
Montserrat 30px 500 |
Montserrat 25px 500 |
Montserrat 22px 500 |
| H1 small (.h1-small) |
This is a heading |
Montserrat 25px 500 |
Montserrat 25px 500 |
Montserrat 22px 500 |
Montserrat 18px 500 |
| H2 (.h2) |
This is a heading |
Montserrat 18px 400 |
Montserrat 18px 400 |
Montserrat 16px 400 |
Montserrat 15px 400 |
| H2 small (.h2-small) |
This is a heading |
Montserrat 14px 400 |
Montserrat 14px 400 |
Montserrat 11px 400 |
Montserrat 11px 400 |
| H3 (.h3) |
This is a heading |
Montserrat 11px 400 |
Montserrat 11px 400 |
Montserrat 11px 400 |
Montserrat 11px 400 |
| C1 (Copy) (.c1) |
This is a heading |
EB Garamond 35px 500 |
EB Garamond 35px 500 |
EB Garamond 25px 500 |
EB Garamond 23px 500 |
| C2 (Copy) (.c2) |
This is a heading |
EB Garamond 20px 400 |
EB Garamond 20px 400 |
EB Garamond 17px 400 |
EB Garamond 16px 400 |
| C3 (Copy) (.c3) |
This is a heading |
EB Garamond 17px 400 |
EB Garamond 17px 400 |
EB Garamond 14px 400 |
EB Garamond 12px 400 |
| F1 (.f1) |
This is a heading |
Montserrat 14px 400 |
Montserrat 14px 400 |
Montserrat 12px 400 |
Montserrat 11px 400 |
| CTA General page |
Regular: Green background (#8D9C83), White text Hover: Light green background (#D6DCD2), White text (.button-bg-green) Regular: Dark green background(#435C34), white text Hover: Green background (#8D9C83), White text (.button-bg-darkgreen) Regular: No background, Dark green text + outline (#435C34) Hover: Dark green background (#435C34), White text (.button-bg-white) Regular: (FOOTER) No background, Charcoal text + outline (#262626) (.button-footer) |
Montserrat 15px 500 SIZE W: 185px H: 45px STROKE 2px (if any) |
Montserrat 22px 500 SIZE W: 210px H: 50px STROKE 2px (if any) |
Montserrat 15px 500 SIZE W: 185px H: 45px STROKE 2px (if any) |
Montserrat 12px 500 SIZE W: 185px H: 45px STROKE 1px (if any) |
| CTA Product detail page |
(.button-add-to-cart) |
Montserrat 15px 500 SIZE W: 453px H: 48px |
Montserrat 22px 500 SIZE W: 517px H: 55px |
Montserrat 15px 500 SIZE W: 326px H: 48px |
Montserrat 12px 500 SIZE W: 326px H: 48px |
