Foundation

Colors

Consistency of color is critical to maintaining a coherent family of products, and accurately communicating the nature of specific content within an application. For instance, a particular blue background can indicate system-supplied information.

Colors should also be used to distinguish where on the screen particular content resides. This is especially critical on mobile devices as users need to be able to see and understand these distinctions on a small screen while scrolling.

Maintaining semantic meaning to CSS formats helps developers choose the right format thereby driving consistent UX. Pega skin rules can generate enterprise-scaled CSS—or you can write your own CSS by hand using Pega's code editor.

Primary

  • Link color

  • Page background color

    #ECECEC
  • Edit experience color

    #020202
  • End user header color

    #083355
  • Container color

    #F4F4F4
  • Container color

    #FFFFFF
  • Selected item color

    #E3F7FC

Buttons

  • Strong button color

    #e77600
  • Simple button color

    #767676
  • Standard button outline color

    #006DFF

Notifications

  • Success

    #DEF4BE
  • General info / help

    #D6F1FB
  • Error

    #FFBAB3
  • Warning

    #F9E3AA

Last updated: Mar 2017

Typography

Open Sans 1 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 compliment 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 2017

Iconography

Icons should not be used strictly for decorative purposes. The purpose of icons is to guide users and help them understand the information displayed on screen—they should be used only to support what is being already being communicated, and to ease orientation on the screen.

Pega standards for usage of icons:

  1. List Categories

    Use icons in a list to show categorization of items. Make sure that the use of icons is scalable. If not, use text to show categorization instead.

  2. Identifying actions

    Icons are used for common actions, such as an edit action in a form (e.g., a pencil icon is preferable to the word 'edit' repeated many times). If a button or link appears on multiple screens but dynamically shifts from location to location an icon gives instant readability and consistency despite other contextual changes.

  3. Solution to space constraint

    Use icons when available space leaves no other option (e.g., in responsive design cases in which a link shifts from display of the label to icon only).

  4. Clear and familiar

    The icon must be easily recognizable. If it is not, consider using text only.

  5. Action buttons

    Clickable icons used to fire actions should always exist in the context of a button. Pega 7 allows almost any action to be fired from almost any element, however, a textless button is correct usage for actionable icons.

Icons are typically scaled at 16px, 25px, 32px, 48px, 50px, and 64px. Out-of-the-box icons are provided through Pega's icon font. They are vector graphics and scale to any size without pixelation.

A sample of Pega's current icon set:

Pega icon examples

Complete current set

Last updated: Mar 2017

Spacing

The goal of whitespace is to maximize readability and understanding of content/data. Generally the rules for whitespace are:

  1. If understanding the data is a primary design/business goal, use more white space. This is common practice in consumer applications.
  2. If task speed is the primary business goal, consider using a more dense structure.

Spacing pitfalls to be aware of:

  1. Double-spacing on embedded sections.
  2. Extra spacing on the last items in a dynamic layout.
  3. Inconsistent spacing

To keep spacing between objects consistent and allow for applications to both breathe and accommodate information-dense interfaces, Pega has adopted a helpful moniker known as the rule of 7's.

  • 7px — Between same-section components (e.g., form field components, like label and an input).
  • 14px — Inside each content section (e.g., headers, main content areas).
  • 42px — For container header height, grid column height, and grid row height.

Spacing example 1
Spacing example 2

Last updated: Mar 2017

Next: Mobility