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

  • #000

    Content
  • rgba(0,0,0,.55)

    Label, placeholder
  • #ccc

    Borders
  • #f4f4f4

    Work area bkg
  • #fff

    Card bkg
  • #0062E6

    Interactive items
  • #F4F7F9

    Hover, select, action
  • #023468

    App header
  • #E3E5E7

    App bkg
  • #022345

    App tab area

Secondary palette

  • #8C1711

    Dark red
  • #C23824

    Red
  • #F07874

    Light red
  • #FFA79F

    Pale red, pink
  • #A83916

    Dark orange
  • #C8501E

    Orange
  • #FFCA5F

    Yellow
  • #F8E2AD

    Pale yellow
  • #4f5500

    Dark olive
  • #6e7e00

    Olive
  • #b5bc5b

    Light olive
  • #056338

    Dark green
  • #0b8753

    Green
  • #aad398

    Light green
  • #def4be

    Pale green
  • #004c54

    Dark teal
  • #0081a1

    Teal
  • #67bbc1

    Light teal
  • #24619d

    Dark blue
  • #07c

    Blue
  • #8fcde5

    Light blue
  • #e4f4f9

    Pale blue
  • #52006A

    Dark purple
  • #87269b

    Purple
  • #b869c4

    Light purple
  • #e4c7ea

    Pale purple
  • #b50079

    Dark magenta
  • #e018a1

    Magenta
  • #ed83d1

    Light magenta
  • Status - info / no issues, app search background
  • Info notification border, action area border
  • Info notification background, row highlight color
  • Successes, completions, increases, positive messaging
  • Success notification border
  • Success notification background
  • Errors, negative messaging, losses, high priority, overdue, important
  • Error notification border
  • Error notification background
  • Status - warning, progress on primary buttons
  • Warning notification border
  • Warning notification background

Last updated: Jun 2017

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

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