Design system

rules: AS SIMPLE AS POSSIBLE. I AINT GOT NO FCKING TIME TO CREATE 200 CLASSEES

LAYOUT/Body Container (margin)

Global: (top nav is 60px fixed)
- Top margin 100px. Bot margin 40px

• Desktop margin: 220px, 0px (max)

• Tablet margin: 60px, 0px

• Mobile 1 margin: 40px, 0px

• Mobile 2 margin: 20px, 0px

Responsive body container
‍

Small body container
‍

Flexbox
‍

Gap/spacing (responsive: mobile 50%)

Small gap

Mid gap

Large gap

TYPOGRAPGY - montserrat (line height x1.5)

(font size/ line height PX) - italic option will be the second class add on

H1: 40, 37, 35, 34

H2: 36, 33, 31, 30

Body 1: 18, 16, 14

Display1 : 25, 23, 22, 21

Display2 : 25, 23, 22, 21

Caption: 17, 15, 14, 13

12 px Text Gap - Heading + Body Gap

12px Row Gap

MEDIA

Global

Black line: 2px, 20px bot margin

Home

BUTTON

Primary Button

COLOR

grey blue