THE TABLE OF GRID SYSTEM SIZES
SPACING - DESKTOP
- Paddings Tops and Bottom for blocks - 130px
- Inside of Blocks (between headlines and inside a
content block) - 60px
SPACING - TABLET
- Paddings Tops and Bottom for blocks - 80px
- Inside of Blocks (between headlines and inside a
content block) - 40px
SPACING - MOBILE
- Paddings Tops and Bottom for blocks - 60px
- Inside of Blocks (between headlines and inside a
content block) - 20px
PRIMARY
#fc8e44
#222222
#5e5e5e
HEADERS - DESKTOP
font-family: Playfair Display;
80px/90px; letter-spg.: 5px;
font-family: Karla;
HEADERS - DESKTOP
40px/48px; letter-spg.: -0.5px;
30px/40px; letter-spg.: -0.5px;
24px/30px; letter-spg.: -0.5px;
20px/26px; letter-spg.: 0px;
16px/20px; letter-spg.: 2.7px;
HEADERS - TABLET
font-family: Playfair Display;
80px/90px; letter-spg.: 5px;
font-family: Karla;
40px/48px; letter-spg.: -1px;
30px/40px; letter-spg.: -0.5px;
24px/30px; letter-spg.: -0.5px;
20px/26px; letter-spg.: 0px;
16px/20px; letter-spg.: 2.7px;
HEADERS - MOBILE
font-family: Playfair Display;
40px/56px; letter-spg.: 2px;
font-family: Karla;
30px/35px; letter-spg.: -1px;
22px/30px; letter-spg.: -0.5px;
20px/24px; letter-spg.: -0.5px;
18px/26px; letter-spg.: 0px;
16px/16px; letter-spg.: 2.7px;
BODY - DESKTOP
font-family: Karla;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl leo, porttitor ut tortor et, efficitur vehicula ipsum.
16px/24px; letter-spg.: 0px;
BODY - TABLET
font-family: Karla;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl leo, porttitor ut tortor et, efficitur vehicula ipsum.
16px/24px; letter-spg.: 0px;
BODY - MOBILE
font-family: Karla;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl leo, porttitor ut tortor et, efficitur vehicula ipsum.
16px/24px; letter-spg.: 0px;
Primary
Primary Ghost
Secondary
Secondary Ghost
Text Button