4 Sections


When there is a task that requires the user’s attention, an alert message appears in the page with a specific type of color. Green color is displayed for success scenarios, yellow for warnings, and red for errors.

Use cases

  1. User successfully updated his profile page.
  2. User submitted wrong type of orders.





  1. Vertical whitespaces 20px.
  2. Upper whitespace 10px.
  3. Bottom whitespace 15px.
  4. Fonts sizes 16px and 12px.

  1. Vertical whitespace 20px.
  2. Vertical whitespace between icon and text fields 13px.
  3. Vertical whitespace 20px.
  4. Top whitespace 10px.
  5. Middle and bottom whitespace 15px.
  6. Fonts sizes 16px and 12px.

  1. Vertical whitespace 20px.
  2. Vertical whitespace 11px.
  3. Horizontal whitespacing 10px.
  4. Font size 12px.



There are three types of notification alerts. For example warnings can be displayed as default notification, notification with a call attention button, and slim notification.


Default notification alert consists of a message, message content, icon representing the state of action, and hide notification option.

Notification with a call for attention button (CTA)

In addition to default notification, notification with (CTA) contains a button which lead the user to accomplish the suggested action. For example, if the user did not activate her user account, the notification will contain an action button for activating the user account.


The style of slim notification messages are simplified containing one line of text and a solid color fill in comparison with the previous types of notifications.