Moods

Our set of Positive, Informative, Cautionary, Assertive, Negative and Prominent moods create an emotional impact and help to contextualize information.

Also known as:
Color variablesRolesThemeVariationsContextual classesSemantic colorsSkinsPresets

AnchorNeed to know

  • Positive celebrates success (Green)
  • Informative guides people towards value (Blue)
  • Cautionary guides people away from problems (Yellow)
  • Assertive indicates we need the user to pay attention (Orange)
  • Negative indicates a show-stopping scenario (Red)
  • Prominent helps us to make content stand out (Purple)

To keep in mind

Our set of Positive, Informative, Cautionary, Assertive, Negative and Prominent 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 Green
    • Informative mood uses Blue
    • Cautionary mood uses Yellow
    • Assertive mood uses Orange
    • Negative mood uses Red
    • Prominent mood uses Purple
  • Icon:
    • Positive mood uses a Green success icon
    • Informative mood uses a Blue information icon
    • Cautionary mood uses a Yellow warning icon
    • Assertive mood uses an Orange warning icon
    • Negative mood uses a Red warning icon
    • Prominent moood does not require an emphasizing icon
  • Illustration:
    • For empty states, we use animated illustrations with a background color that matches the mood.
  • Alternative text:
    • In components such as validation tags, we need to provide non-visual alternative text to convey the mood.
    • In components such as notifications, we expect the content of the notification itself to convey important information, such as drawing attention to an error when using the negative mood.

When to use and when not to use

When to use
  • 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.
When not to use
  • 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.
  • Negative:
    • 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.

Naming

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:

  1. Not misleading (total lies are the worst, not to be confused with "could be more accurate")
  2. Consistent (avoid many different names for the same thing)
  3. 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)
  4. Not unnecessarily vague (thing, type, etc)
  5. Accurate & precise (if there is a more accurate or precise word go for that)
  6. Brief (makes documentation or code more readable or scannable)
  7. Delightful (makes the name memorable and us happy)

External links

Here are some examples from existing design systems: