Icons and media

Mobile app icons

All applications used on mobile device must use the default Pega app icon, except for horizontal and strategic applications, which use a custom Pega app icon.

Generic app icon example

Mobile app icons should be simple and "flat". The background should be white, and the icons and images should use a combination of three blues.

Application icon example

When submitting a mobile app to an appstore, follow the guidelines for the various images required by the Apple App Store and Google Play Store.

Last updated: Jun 2017

Avatars

Generally, avatars are used to distinguish between different operators and objects when they are shown in a list or in a small space. Users of applications can upload a custom avatar of their choice.

Avatar example

User avatars are automatically generated by the system, but can be replaced with an image of the user’s choosing. Colors of generated avatars depend on the first letter of the “Full Name” property.

They are displayed as a 32px x 32px circle unless the avatar is the main focus of the view (48px x 48px) or shown in the portal header (24px x 24px).

Generated avatars example

When avatars indicate a group of users (e.g. a workgroup), the avatar is automatically generated to show the first letter of the workgroup name, a single letter, and a white inner border.

Group avatars example

Objects can also have avatars. These are distinct from users as they are hollow and square. Object avatars are displayed as 32px x 32px in most of the UI, and 48px x 48px when they are the main focus of the view. The first letter of the first two words defines the content.

Object avatars example

Last updated: May 2017

Imagery

Images are used sparingly, and are only used to enhance the user's understanding. Images should always be paired with text.

High-quality editorial photos are encouraged — clip art and illustration are not.

Imagery example

Images can be used to show a preview for any case where the user has uploaded or added content.

Image preview example

Last updated: May 2017

Media player

Pega uses the browser's native video player to serve up time-based media and currently supports:

  • Showing and hiding user controls
  • Mute control (enabled by default)
  • Autoplay (only when muted for accessibility reasons)
  • Looping
  • "Poster" images

Last updated: May 2017

Get the files

Want to begin working with the Pega Design System? Download the vector assets below.

Download design files

Last updated: May 2017

Next: Form elements