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.
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.
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:
Here are some examples from existing design systems: