We use notifications to draw a reader’s attention to an important message, although the primary message in the interface may be somewhere else. A notification should be timely and contextual, and give the impression that it’s not an always-present message. In general, notifications should:
- Convey the main point in 1-2 brief sentences
- Suggest a course of action (when appropriate, include a link)
- Appear above the page content and below the navigation
FYI
Basic notification! Could include a 
We use the FYI notification to share instructional information about the interface, the user’s account, or energy use. It uses the primary color so it feels important but not alarming, and should be dismissible.
{% toggleText('fyi') %}
Alert
Alert notification! Should include a We use the alert notification to let the user know something went wrong or convey urgent information. This notification uses the alert color to grab the user’s attention. Whenever possible, make it actionable—tell them how to address the problem. Depending on the context, this notification can be dismissed.
{% toggleText('alert') %}
Confirmation
We use the confirmation notification to offer immediate feedback that something good happened (for example, a form was submitted successfully or a selection was saved). This notification is also useful when rewarding the user for energy-efficient actions or behavior. We also call this the “success” message and use the success color.
{% toggleText('confirmation') %}
Request
The request notification asks the user for information or reminds them to complete a task. It should always have a link to address the request, and should be dismissible.
{% toggleText('request') %}
