Medium priority (yellow)

Informs users about account issues which require them to take action, such as usage issues or a service that hasn’t been activated.

High priority (red)

Informs users about urgent actions that they need to take. That could concern system outages, errors on the page, or errors that have occurred as they attempted to action something.

Success (green)

Informs users when an action they’ve taken was successful. It’s intended to be immediate feedback and shouldn’t stay on screen.

For a message that stays on screen, use an indicator.

Secondary CTA rollover background colours

Low priority (grey)

Rollover: button background #5c5c5c

Success (green)

Rollover: button background #007c00

Medium priority (yellow)

Rollover: button background #e5c600

High priority (red)

Rollover: button background #cf0012

How notifications behave

Low priority (grey)

  • Trigger: triggered by the system
  • Close: close button always present
  • Actions: one CTA, usually a text link but can be a button

Medium priority and high priority (yellow/red)

  • Trigger: triggered by the system
  • Close: close button always present
  • Actions: one CTA, usually a text link but can be a button

Success (green)

  • Trigger: should appear on the screen after the user has taken an action (saved an item, made a payment, etc)
  • Close: no close button
  • Actions: no CTAs – notification is temporary
  • Motion: will disappear from the screen in 800ms

Layout

Notifications should always sit below the header (i.e. below the universal, global and local navigation) on all pages. This is true of all notifications. If a notification is used anywhere else on the page, it ceases being a notification and becomes another UI elements or pattern.

Sizing

The notifications can span any number of columns, but they must never go wider than the content width.

The size of the icon will depend upon on how wide the notification is displayed. The icon size is not dependent on the breakpoint, but rather the width of the banner at any given breakpoint. If the banner is smaller than 600px the icon is 20x20px. If it is larger it is 40x40px.

Typography

The font for links and CTAs is changed to bold to allow it to stand out on the coloured backgrounds.

Copy

Copy in notifications, including CTAs, should follow the usual copy guidelines and be as simple and clear as possible.

Pay particular attention to the length of the title and body copy. Long notifications will push the rest of the page content down on a mobile – so keep it short and sweet.

All notifications need a primary message (i.e. a title), but not all require supporting copy.