Components

Application headers

Application headers for end-user and industry applications are navy (#083358). The Designer Studio and authoring app headers are extremely dark grey (#151515). The portal header is 40px tall and 100% width on desktop. The Designer Studio header is 35px tall.

Application header example

Last updated: Mar 2017

The Pega 7 platform logo

The Pega 7 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. The double-story ‘g’ brings a sense of timeless stability to the mark, as if to say, this is a mature product here to stay. The overall hard angular shape against Pega blue aggressively leans forward (at 10.5°), illustrating its momentum into the future.

When used in an app header the ‘tail’ of the logo should present as squared.

Pega’s primary logo Pega’s application logo

Pega 7 favicon

The favicon should be used on all Pega products and is recommended to be used as the default for customer applications as well (with the assumption that they will change later).

Pega’s favicon

Last updated: Mar 2017

Application names

Application names should be presented in Open Sans 900 weight (extra bold) with a tracking of 50 (CSS: letter-spacing: 1px), and in all-caps.

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

The Pega 7 logo should be used for the Designer Studio, but should appear simply “Pega [application name]” as for all others.

Any trademark indication should be shifted to a higher baseline.

Application name examples

Last updated: Mar 2017

Application menus

One way of creating and launching new cases in Pega 7 is via a “New” menu in the header. The user has a global access point to start new cases and work that is consistent on all screens. This menu is not a required part of an end-user portal.

Create new menu example

The avatar is a circle (32px wide) with the user's chosen image or initials centered inside (Open Sans, 11pt, 400, #000). The color of the avatar is determined by the user's first initial. Upon clicking the avatar, the user is taken to their user dashboard.

User settings menu example

Last updated: Mar 2017

Menu formatting

All portal header menus should be formatted as follows:

  • Font: Open Sans
  • Font weight: 400
  • Font size: 14px
  • Color: #FFFFFF
  • Letter spacing: 1px
  • Opacity: 85% (on hover opacity should switch to 100%)
Menu formatting example Menu formatting hover example

Last updated: Mar 2017

Search bar

Pega applications have a universal search bar in the portal header. This search bar can live either on the far right next to the user menu, or can be centered. When utilized, it will search all objects and content in the application. The search bar is 28px tall, with a minimum width of 238px. It has a background color of #FFFFFF with a 50% opacity. A magnifying glass icon is shown in the far right identifying it as a search bar. To launch the search, the user may either click the magnifying glass, or press “Enter” on their keyboard.

Search menu example

Last updated: Mar 2017

Next: Headings and text