Pega’s structure uses UI components to build regions of the screen. The reuse of structure provides uniformity across screens, applications, and devices. These components include the header, navigation, and sections that make up the work area.

Last updated: Apr 2019

Application headers

The application header serves as a global action area for an application.

Application header example


Functions that do not require on-screen context should reside in the header (e.g., search, help, user actions).

Pega logo

The Pega Platform logo portrays the spirit of Pegasystem's industry-leading software products. It is elegant and clean—representing the platform's ability to simplify and clarify an organization's business practices.

Application name

Application names should be concise and not include industry markers (e.g., not "Underwriting for Insurance," simply "Underwriting").


Pega applications have a universal search bar searches all objects and content in the application.


System updates and notifications specific to the logged in user will appear here.

User actions/preferences

User specific actions/preferences should be put in this menu. Sample actions include profile settings, system preferences, switching apps, and logging out of the system.

Last updated: May 2019

Assignment area

The user's main work area on any screen should appear inside the assignment area.

Action container example

This action container typically includes the name of the assignment, due date, and the task owner’s avatar. The background of this container is blue to call attention to the task that the user needs to complete. This color distinction separates the task from other information on the screen, keeping users focused, while allowing them to reference the surrounding data easily.

Actions in assignment area

The main actions on the assignment area are “Submit” and “Cancel”.

“Submit” — the primary action — sits flush right in the container, completes the current assignment, and advances the case to the next step of the case lifecycle.

“Cancel”— the secondary action — sits flush right in the container, cancels the current action, and removes the user from the assignment at hand. If data has been entered and the Cancel action is triggered, the user will be prompted to save current work.

Last updated: May 2019


Cards are a UI element that represents actionable information about an object. A card should be presented as one of many cards.

Cards in a mobile layout

Last updated: Jul 2018

Case overview

When a user reviews the content of a case, it is in a “review harness”.

The review harness has the same content as the perform harness. Components that make up a review harness include:

  • Case header: includes case type, ID, name, and status of the case
  • Assignment area: lists all work on the current case for the user and others on their team
  • Case summary: a summary of all information collected throughout the case lifecycle
  • Case overview: important, high-level information about the case, as well as auxiliary tools necessary to the case

Last updated: Aug 2019

Empty states

Empty states in containers and grids make it clear to the user that there is no content in them (versus a problem with loading the content).

Empty state layout example



If the user needs to perform an action once and once only, then no additional action button is needed besides the call-to-action button.

A simple empty state with a call to action


If the user will be iterating or editing, the same action can be repeated in the header on containers, and below in lists and grids. If needed, a concise explanation can be added to guide the user through the process.

A simple empty state with a call to action and extra information


If vertical space is at a premium, everything but the “no data” notification can be eliminated. “No data” should appear on the far left. Do not combine this method with the full-view on one screen or in one process.

An extra small empty state


  • Use a descriptive label that tells the user what they are doing (e.g. ”Add data” is good, “Add” is not).
  • Customize the icon to better reflect the contents of your application or the object being created.
  • Give the user indication of what they need to do in order to see data.

Last updated: May 2019


Navigation enables users to travel to their intended destination in the Pega Platform.

Pega's navigation patterns are both responsive and adaptive: scaling smoothly to meet your device’s dimensions and changing the appearance for specific device sizes. This allows for ease of use and adequately prioritized application content.

Navigation closed
Navigation open

Designed to meet four different screen sizes (breakpoints), this sidebar pattern is the default recommendation for both widescreen views (above 1440px) and desktop/laptop views (1025px–1440px). The sidebar is optimized to auto-collapse on smaller screens, allowing the content to breathe. While the tablet (769px–1024px) and mobile views (768px and under) are no longer our 'mobile’ default, they still are an effective, familiar way to navigate an application.

Last updated: Aug 2019


Primary container

Primary containers are the default container and often hold dashboard widgets, charts, or other information on a page.

A primary container

They are most often used to segment information on a dashboard, review harness, or landing page.

A primary container should not be nested inside another primary container. Primary containers appear directly on a page or inside an action container.

Secondary container

Secondary information can be shown in various ways — either a “nested” container can be put inside a primary or action container, or a secondary container can be used.

Two nested sections under a primary container

Collapsible container

Collapsible containers can be used when lots of information needs to be shown but space is limited.

Collapsible headers in a widget

Last updated: May 2019