deprecated
Forma 36 version 3 is not supported anymoreClick here to go to version 4
Forma 36

Color system

This is the color system we use at Contentful. There are 6 base colors, along with gray and black/white. Each color consists of 9 shades, ranging from 100 to 900.

Colors overview

Semantic

In rare cases, it's handy to use our base semantic colors. They are aliases for the respective 500 shade of each color and hold semantic meaning.

color-primary
--color-primary
#036FE3
color-positive
--color-positive
#008539
color-negative
--color-negative
#DA294A
color-warning
--color-warning
#F07F23

Gray

Gray is our main color used for typography, borders and element backgrounds.

gray-100
--gray-100
#F7F9FA
gray-200
--gray-200
#E7EBEE
gray-300
--gray-300
#CFD9E0
gray-400
--gray-400
#AEC1CC
gray-500
--gray-500
#67728A
gray-600
--gray-600
#5A657C
gray-700
--gray-700
#414D63
gray-800
--gray-800
#1B273A
gray-900
--gray-900
#111B2B

Blue

Blue is our primary color and should be used when you want to highlight a primary action.

blue-100
--blue-100
#E8F5FF
blue-200
--blue-200
#CEECFF
blue-300
--blue-300
#98CBFF
blue-400
--blue-400
#40A0FF
blue-500
--blue-500
#036FE3
blue-600
--blue-600
#0059C8
blue-700
--blue-700
#0041AB
blue-800
--blue-800
#003298
blue-900
--blue-900
#002A8E

Green

Green is used to highlight positive actions or messages. E.g. when showing a success message, a save action, or a marking a step as complete.

green-100
--green-100
#EAF9E8
green-200
--green-200
#CDF3C6
green-300
--green-300
#9ED696
green-400
--green-400
#5DB057
green-500
--green-500
#008539
green-600
--green-600
#006D23
green-700
--green-700
#00550C
green-800
--green-800
#004700
green-900
--green-900
#003F00

Red

Red is used to highlight negative actions or messages. E.g. when performing a distructive action such as deleting content, for highlighting validation or application error messages, or for showing statuses with a negative context.

red-100
--red-100
#FFF2F2
red-200
--red-200
#FFE0E0
red-300
--red-300
#FFB1B2
red-400
--red-400
#FF707D
red-500
--red-500
#DA294A
red-600
--red-600
#BD002A
red-700
--red-700
#990017
red-800
--red-800
#7F0010
red-900
--red-900
#72000E

Purple

Purple is used sparingly as a generic highlight color. E.g. when highlighting premium value or trials.

purple-100
--purple-100
#F7F2FF
purple-200
--purple-200
#EDE3FF
purple-300
--purple-300
#D1BBFF
purple-400
--purple-400
#AE89FF
purple-500
--purple-500
#8553E7
purple-600
--purple-600
#6C3ECF
purple-700
--purple-700
#5127B5
purple-800
--purple-800
#3E16A4
purple-900
--purple-900
#340E9C

Orange

Orange is used to highlight actions or messages which require attention but don't necessarily have a negative context. E.g. showing a draft/unpublished state, or showing a gentle warning message rather than an error message.

orange-100
--orange-100
#FFF2E4
orange-200
--orange-200
#FDE5C0
orange-300
--orange-300
#FDB882
orange-400
--orange-400
#F07F23
orange-500
--orange-500
#CC4500
orange-600
--orange-600
#B12D00
orange-700
--orange-700
#892300
orange-800
--orange-800
#731A00
orange-900
--orange-900
#631C00

Yellow

Yellow is used very sparingly. Use only when other colors aren't applicable or are already taken in a specific context.

yellow-100
--yellow-100
#FEF9DF
yellow-200
--yellow-200
#FFF6CC
yellow-300
--yellow-300
#FFE993
yellow-400
--yellow-400
#FFD960
yellow-500
--yellow-500
#FFC835
yellow-600
--yellow-600
#EAAF09
yellow-700
--yellow-700
#B78300
yellow-800
--yellow-800
#956300
yellow-900
--yellow-900
#7F5200

Black

color-black
--color-black
#0C141C

White

color-white
--color-white
#ffffff

Accessibility

Black text (anything darker than gray-800) is WCAG AA accessible on shades ranging from 100 to 400, white text is accessible on colors from 500 to 900.

gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900
green-100
green-200
green-300
green-400
green-500
green-600
green-700
green-800
green-900
red-100
red-200
red-300
red-400
red-500
red-600
red-700
red-800
red-900
purple-100
purple-200
purple-300
purple-400
purple-500
purple-600
purple-700
purple-800
purple-900
orange-100
orange-200
orange-300
orange-400
orange-500
orange-600
orange-700
orange-800
orange-900
yellow-100
yellow-200
yellow-300
yellow-400
yellow-500
yellow-600
yellow-700
yellow-800
yellow-900

Combining shades

When combining multiple shades of the same color, keep to the following accessible combinations. The same combinations are possible across colors (with yellow being the only exception).

600 on 100
600 on 200
700 on 300
300 on 900
500 on white
500 on gray-100
600 on 100
600 on 200
700 on 300
300 on 900
500 on white
500 on gray-100
600 on 100
600 on 200
700 on 300
300 on 900
500 on white
500 on gray-100
600 on 100
600 on 200
700 on 300
300 on 900
500 on white
500 on gray-100
600 on 100
600 on 200
700 on 300
300 on 900
500 on white
500 on gray-100
800 on 100
800 on 200
900 on 300
300 on 900
800 on white
800 on gray-100