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).
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 filesLast updated: May 2017