Visual design

Colors

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

  • #10132E

    Content
  • rgba(16,19,46,.66)

    Labels (#626475)
  • #cacdd6

    Borders
  • #F2F3F4

    Secondary bkg
  • #ffffff

    Card bkg
  • #295ED9

    Interactive items
  • rgba(41,94,217,.06)

    Hover (#F3F6FC)
  • rgba(41,94,217,.1)

    Selected (#EAEFFA)
  • #1F2555

    App header
  • #344780

    App search
  • #E8EAEF

    App bkg

Secondary palette

  • #A6020D

    Dark red
  • #D91C29

    Red
  • #FFD9DB

    Pale red, pink
  • #C44500

    Dark orange
  • #FD6000

    Orange
  • #FFE0CC

    Light orange
  • #CC8914

    Dark yellow
  • #FEB53A

    Yellow
  • #FFECCC

    Light yellow
  • #7F9F00

    Dark olive
  • #A9D400

    Olive
  • #EEF2DA

    Light olive
  • #006624

    Dark green
  • #20AA50

    Green
  • #DAF2E3

    Light green
  • #00647D

    Dark teal
  • #179595

    Teal
  • #C3E6E6

    Light teal
  • #113DA6

    Dark blue
  • #295ED9

    Blue
  • #E6EDFF

    Light blue
  • #202A79

    Dark purple
  • #2B38A1

    Purple
  • #D9DDFF

    Light purple
  • #A9085B

    Dark magenta
  • #E10B81

    Magenta
  • #FFD9EE

    Light magenta
  • #3A3C4D

    Dark grey
  • #585B73

    Grey
  • #CFD1E6

    Light grey
  • 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: Jan 2018

Spacing

The goal of whitespace is to maximize readability and understanding of content/data. The Pega Platform UI uses multiples of 7 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).

Spacing example

Last updated: May 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 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

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: Language and text