Our set of “Positive”, “Informative”, “Cautionary”, and “Negative” moods create an emotional impact and contextualize information.
- Positive celebrates success.
- Negative indicates a show-stopping problem.
- Informative guides people towards value.
- Cautionary guides people away from problems.
Our set of “Positive”, “Informative”, “Cautionary”, and “Negative” are associated with colors and often icons. They are used throughout our Design System for various components to give designers flexibility for adapting the emotional impact of a component to its context.
- Background color:
- Positive mood uses a tint or shade of Seedling
- Informative mood uses a tint or shade of Cluny
- Cautionary mood uses a tint or shade of Yuzu
- Negative mood uses a tint or shade of Coral
- Border color:
- Positive mood uses Seedling
- Informative mood uses Cluny
- Cautionary mood uses Yuzu
- Negative mood uses Coral
- Positive mood uses a success icon
- Informative mood uses an information icon
- Cautionary mood uses a warning icon
- Negative mood uses an exclamation icon
- For empty states, we use illustrations with a palette that matches the background color. We also have additional illustrations in empty states for other options, such as “Action”, in addition to our moods.
- Alternative text:
- Positive: this conveys a positive message that guides and motivates. It is used for celebrating success and confirming actions through visual feedback.
- Informative: this conveys an informative message that is valuable and helpful. It is used to help people understand the purpose of something and guide people.
- Cautionary: this conveys a cautionary message that guides people away from problems, back to a safe path, and alerts them to risks. It is used to drive action that improves experience such as updating user data to address problems. They can still move forward.
- Negative: this conveys a negative message that alerts people to show-stopping problems or irreversible or destructive actions. It is only used when people cannot progress any further in the system's current state or are at a high risk of taking a regrettable action.
- No mood: Some components, such as tooltips and popovers, have a “Default” without a mood: this conveys basic information without a specific Mood. It is used when the information needs to be less prominent or engaging than other content on the page.
- Positive: Avoid positive mood for supplementary information unrelated to user actions—use informative instead.
- Informative: Avoid informative mood when it’s an important milestone to celebrate—use positive instead.
- Cautionary: Avoid cautionary mood for show-stopping problems that require user intervention—use negative instead.
- Avoid negative mood for successful confirmation of intended destructive user actions such as successfully deleting an item—use positive instead. You might, however, use a negative mood before the user takes a destructive action.
- Avoid negative mood where the user may readily recover—use cautionary instead.
Note: “Mood” is a delightful name for this concept, though not as clear as it could be. In naming this, we mostly wanted to avoid “type” or “variant”, and otherwise followed this naming approach:
- Not misleading (total lies are the worst, not to be confused with "could be more accurate")
- Consistent (avoid many different names for the same thing)
- Not overloaded (means different things in different contexts with not enough context at hand to construe meaning—at Culture Amp, words like "feedback" or "action" already have a lot of meaning)
- Not unnecessarily vague (thing, type, etc)
- Accurate & precise (if there is a more accurate or precise word go for that)
- Brief (makes documentation or code more readable or scannable)
- Delightful (makes the name memorable and us happy)
Here are some examples from existing design systems: