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

  • #10132E

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

    Labels (#626475)
  • #cacdd6

  • #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

  • #FFD9DB

    Pale red, pink
  • #C44500

    Dark orange
  • #FD6000

  • #FFE0CC

    Light orange
  • #CC8914

    Dark yellow
  • #FEB53A


    Light yellow
  • #7F9F00

    Dark olive
  • #A9D400

  • #EEF2DA

    Light olive
  • #006624

    Dark green
  • #20AA50

  • #DAF2E3

    Light green
  • #00647D

    Dark teal
  • #179595

  • #C3E6E6

    Light teal
  • #113DA6

    Dark blue
  • #295ED9

  • #E6EDFF

    Light blue
  • #202A79

    Dark purple
  • #2B38A1

  • #D9DDFF

    Light purple
  • #A9085B

    Dark magenta
  • #E10B81

  • #FFD9EE

    Light magenta
  • #3A3C4D

    Dark grey
  • #585B73

  • #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


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


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