Visual design
Cosmos Work color palette
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 -
#252B32
Main nav -
rgba(0,0,0,.8)
Labels
-
#8396AB
Input border -
#CBD3DC
Dividers -
#E9EEF3
App bkg
-
#0076D1
Interactive -
#69BEFF
Interactive (Dark mode) -
#FFF
Card background
Secondary palette, reserved for statuses and badges
-
#A6020D
Urgent text -
#D91C29
Urgent banner -
#FFD9DB
Urgent background
-
#C04503
Warn text -
#FD6000
Warn banner -
#FEEDE2
Warn background
-
#006624
Good text -
#20AA50
Good banner -
#D4F7D5
Good background
-
#681FC3
Wait text -
#AC75F0
Wait banner -
#F1E9FB
Wait background
-
#4C5967
Info text -
#8396AB
Info banner -
#E9EEF3
Info background
Last updated: Apr 2020
Spacing guidelines
The goal of whitespace is to maximize readability and understanding of content/data. CosmosWork uses a 8px system (multiples of eight pixels) to define relationships with the data.
- 8px 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).
- 4px (8px * .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”).
- 16px (8px * 2): The space between rows of data inside the same container, or the inner padding on the container itself.
- 24px (8px * 3): The space between unique sections of data within a card.
Last updated: Apr 2020
Typography
Open Sans 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 both local and international applications.
Usage | Values |
---|---|
Default | 14px, 1.43 line-height |
H1 | 22px bold |
H2 (Summary panel tabs) | 15px |
H3 | 18px semi-bold |
H4 | 14px bold |
Field label | 13px semi-bold, 80% opacity |
Secondary data | 13px, 60% opacity |
Badge text | 12px bold, all caps |
Last updated: Apr 2020