fbpx

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

Links

18px desktop - 16px mobile

Buttons

Primary and secondary buttons

Using color to draw attention to primary first.

This content is restricted to our members.

Membership is currently free, if you would like access, sign in or register from the link below.

Not yet a member? Create an account.