Visual design

Consistency of color is critical to maintaining a coherent family of products, and accurately communicating the nature of specific content within an application.

Colors are also used to distinguish where on the screen particular content resides, such as on mobile devices where users need to be able to see visual breaks while scrolling.

Primary palette

Secondary palette

• Blue - Status - info / no issues, app search background, interaction
• Green - Successes, completions, increases, positive messaging
• Red - Errors, negative messaging, losses, high priority, overdue, important
• Orange - Warnings

Last updated: Apr 2019

The goal of whitespace is to maximize readability and understanding of content/data. The Pega Platform UI uses a 7px system (multiples of seven pixels) to define relationships with the data.

• 7px The minimum horizontal padding in an interactive element (e.g., the distance from the border edge of an input field, from the text inside it).
• 3.5px (7px * .5): The space between an icon and its related text (e.g., a back button with an image of an arrow and the word “Back”).
• 14px (7px * 2): The space between sections of data inside the same container, the inner padding on the container itself, and the default desktop text size.
• 21px (7px * 3): The space between unique sections of data (e.g., a case’s master details file starts 21px below where the Perform Harness ends).

Last updated: Aug 2019

Open Sans ¹ is the foundation type family in all Pega applications. With a wide range of weights, and a large diverse character set, the uniform simplicity and legibility over other font families makes Open Sans a great complement to the local and international applications Pega crafts.

• Standard font size — 14px at 400 weight (normal), and a 1.4 line-height
• H1 — 18px, 400 weight
• H2, H3 — 15px 600 weight
• H4 — 14px 600 weight, uppercase
• H5, H6 — 14px 700 weight

Last updated: Mar 2018