These are the colors we use at Contentful.
Semantic
Text
For use with text on light backgrounds. Use a lighter shade to de-emphasize text.
Element
Element colors are used for the larger blocks of our UI - e.g. sidepanels, table headers, navigational elements.
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).
Blue
Blue is our primary color and should be used when you want to highlight a primary action.
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.
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.
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.
Coral
Coral is used for muted warnings and errors. E.g - a note warning the user of reaching a limit.
Peach
Peach is used for muted warning messages. E.g - a warning note.
Mint
Mint is used for muted success messages. E.g - a confirmation note.
Ice
Ice is used for muted neutral or information messages. E.g - a general note.
White
These are the colors we use at Contentful.
Semantic
Text
For use with text on light backgrounds. Use a lighter shade to de-emphasize text.
Element
Element colors are used for the larger blocks of our UI - e.g. sidepanels, table headers, navigational elements.
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).
Blue
Blue is our primary color and should be used when you want to highlight a primary action.
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.
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.
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.
Coral
Coral is used for muted warnings and errors. E.g - a note warning the user of reaching a limit.
Peach
Peach is used for muted warning messages. E.g - a warning note.
Mint
Mint is used for muted success messages. E.g - a confirmation note.
Ice
Ice is used for muted neutral or information messages. E.g - a general note.