Color palette
Primary colors
Used for accents and drawing attention.
P50
#F0FCF9
P100
#C6F7E9
P200
#8EEDD1
P300
#5FE3C0
P400
#2DCCA7
P500
#17B897
P600
#079A82
P700
#048271
P800
#016457
P900
#004440
Secondary colors
Used for most of your UI.
S50
#F7F7F7
S100
#E1E1E1
S200
#CFCFCF
S300
#B1B1B1
S400
#9E9E9E
S500
#7E7E7E
S600
#626262
S700
#515151
S800
#3B3B3B
S900
#222222
Typography Styles
Headings
Default heading and body type.
Aa Bb Cc Dd Ee
Heading 1 - Playfair Display
48px desktop - 32px mobile
Aa Bb Cc Dd Ee
Heading 2 - Playfair Display
32px desktop - 24px mobile
Aa Bb Cc Dd Ee
Heading 3 - Playfair Display
24px desktop - 20px mobile
Aa Bb Cc Dd Ee
Heading 4 - Playfair Display
20px desktop - 18px mobile
Aa Bb Cc Dd Ee
Heading 5 - Playfair Display
18px desktop - 16px mobile
Aa Bb Cc Dd Ee
Heading 6 - Courier Prime
16px desktop - 14px mobile
Aa Bb Cc Dd Ee
Body - Montserrat
18px desktop - 16px mobile
