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

Secondary palette, reserved for statuses and badges

Last updated: Apr 2020

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

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.

Last updated: Apr 2020