Forma 36 Logo

Color

These are the colors we use at Contentful.

Semantic

color-primary
--color-primary
#3c80cf
color-positive
--color-positive
#0eb87f
color-negative
--color-negative
#d9453f
color-warning
--color-warning
#ea9005

Text

For use with text on light backgrounds. Use a lighter shade to de-emphasize text.

color-text-dark
--color-text-dark
#2a3039
color-text-mid
--color-text-mid
#536171
color-text-light
--color-text-light
#8091a5
color-text-lightest
--color-text-lightest
#a9b9c0

Element

Element colors are used for the larger blocks of our UI - e.g. sidepanels, table headers, navigational elements.

color-element-darkest
--color-element-darkest
#b4c3ca
color-element-dark
--color-element-dark
#c3cfd5
color-element-mid
--color-element-mid
#d3dce0
color-element-light
--color-element-light
#e5ebed
color-element-lightest
--color-element-lightest
#f7f9fa

Contrast

Contrast colors are used to contrast against our element colors and help establish hierarchy. Example usage are app headers or modal backgrounds (when used with transparency).

color-contrast-dark
--color-contrast-dark
#0c141c
color-contrast-mid
--color-contrast-mid
#192532
color-contrast-light
--color-contrast-light
#263545

Blue

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

color-blue-dark
--color-blue-dark
#3072be
color-blue-base
--color-blue-base
#3c80cf
color-blue-mid
--color-blue-mid
#4a90e2
color-blue-light
--color-blue-light
#5b9fef

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.

color-green-dark
--color-green-dark
#0baa75
color-green-base
--color-green-base
#0eb87f
color-green-mid
--color-green-mid
#19cd91
color-green-light
--color-green-light
#14d997

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.

color-red-dark
--color-red-dark
#cd3f39
color-red-base
--color-red-base
#d9453f
color-red-mid
--color-red-mid
#e34e48
color-red-light
--color-red-light
#f05751

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.

color-orange-dark
--color-orange-dark
#db8500
color-orange-base
--color-orange-base
#ea9005
color-orange-mid
--color-orange-mid
#fba012
color-orange-light
--color-orange-light
#ffb239

Coral

Coral is used for muted warnings and errors. E.g - a note warning the user of reaching a limit.

color-coral-dark
--color-coral-dark
#d0a2a0
color-coral-mid
--color-coral-mid
#fbe3e2

Peach

Peach is used for muted warning messages. E.g - a warning note.

color-peach-dark
--color-peach-dark
#d2ac79
color-peach-mid
--color-peach-mid
#ffe9cc

Mint

Mint is used for muted success messages. E.g - a confirmation note.

color-mint-dark
--color-mint-dark
#b7ded0
color-mint-mid
--color-mint-mid
#f4fffb

Ice

Ice is used for muted neutral or information messages. E.g - a general note.

color-ice-dark
--color-ice-dark
#c5d2d8
color-ice-mid
--color-ice-mid
#e8f7ff

White

color-white
--color-white
#ffffff