Forma 36

Color

These are the colors we use at Contentful.

Semantic

color-primary
--color-primary
#2E75D4
color-positive
--color-positive
#16875D
color-negative
--color-negative
#BF3045
color-warning
--color-warning
#F79B0C

Text

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

color-text-dark
--color-text-dark
#192532
color-text-base
--color-text-base
#283848
color-text-mid
--color-text-mid
#536171
color-text-light
--color-text-light
#606C7C
color-text-lightest
--color-text-lightest
#6B7888

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
#174E8C
color-blue-base
--color-blue-base
#2D64B3
color-blue-mid
--color-blue-mid
#2E75D4
color-blue-light
--color-blue-light
#84B9F5
color-blue-lightest
--color-blue-lightest
#EDF4FC

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
#1A593E
color-green-base
--color-green-base
#1A6848
color-green-mid
--color-green-mid
#16875D
color-green-light
--color-green-light
#8AD6B1
color-green-lightest
--color-green-lightest
#D9F2E4

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
#7C262F
color-red-base
--color-red-base
#A82D3E
color-red-mid
--color-red-mid
#BF3045
color-red-light
--color-red-light
#ECA7A7
color-red-lightest
--color-red-lightest
#FCE9E8

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
#A85701
color-orange-base
--color-orange-base
#DE8907
color-orange-mid
--color-orange-mid
#F79B0C
color-orange-light
--color-orange-light
#FFD7A2
color-orange-lightest
--color-orange-lightest
#FFE8C7

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