fbpx

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

Links - Montserrat

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.