Color palette
Primary colors
Used for accents and drawing attention.
P50
#E0FCFF
P100
#BEF8FD
P200
#87EAF2
P300
#54D1DB
P400
#38BEC9
P500
#2CB1BC
P600
#BEF8FD
P700
#0E7C86
P800
#0A6C74
P900
#044E54
Secondary colors
Used for most of your UI.
S50
#F0F4F8
S100
#D9E2EC
S200
#BCCCDC
S300
#9FB3C8
S400
#829AB1
S500
#627D98
S600
#486581
S700
#334E68
S800
#243B53
S900
#102A43
Typography Styles
Headings
Default heading and body type.
Aa Bb Cc Dd Ee
Heading 1
48px desktop - 32px mobile
Aa Bb Cc Dd Ee
Heading 2
32px desktop - 24px mobile
Aa Bb Cc Dd Ee
Heading 3
24px desktop - 20px mobile
Aa Bb Cc Dd Ee
Heading 4
20px desktop - 18px mobile
Aa Bb Cc Dd Ee
Heading 5
18px desktop - 16px mobile
Aa Bb Cc Dd Ee
Heading 6
16px desktop - 14px mobile
Aa Bb Cc Dd Ee
Body
18px desktop - 16px mobile
