Also known as:
Color variablesRolesThemeVariationsContextual classesSemantic colorsSkinsPresets

Moods

Our set of “Positive”, “Informative”, “Cautionary”, and “Negative” moods create an emotional impact and contextualize information.

AnchorNeed to know

  • Positive celebrates success.
  • Negative indicates a show-stopping problem.
  • Informative guides people towards value.
  • Cautionary guides people away from problems.

To keep in mind

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 Lapis
    • 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 Lapis
    • Cautionary mood uses Yuzu
    • Negative mood uses Coral
  • Icon:
    • Positive mood uses a success icon
    • Informative mood uses an information icon
    • Cautionary mood uses a warning icon
    • Negative mood uses an exclamation icon
  • Illustration:
    • 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:
    • 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

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: