Skip to main content

Design guidance in Cosmos

Flexibility within prescribed design

The Pega Cosmos design system is driven by prescribed design. Based on research, testing, subject-matter knowledge, and feedback, Cosmos applications work and function in some particular ways. These optimized design methods free you up to focus on what really matters: the workflow for users.

Cosmos offers varying levels of flexibility within the design system:

Level of flexibility

Description

Example 

Very flexible

Landing pages allow you to add any pre-composed asset within the application. The layout of assets is mildly customizable, and Insights, pre-defined Widgets, and Views are all available to be added to any location on the screen. The Home page is an example of a custom landing page.

Landing pages

Flexible

The types of fields and data to display within your forms are flexible as well, but Cosmos does supply guidance on which assets to use when.   

Forms & fields; Tabs

Mildly flexible

Theming some aspects in an application, choosing which tabs and data appear within a case, and some sections or defaults that can be enabled or disabled based on user needs are examples of flexibility. 

Case page templates

Prescribed

The goal of great enterprise software is to facilitate the completion of work. Any deviation of flexibility here could seriously damage work performance for end users. 

Pulse

 
Check your knowledge with the following interaction.

Fluid design across devices and geographies

Designers are accustomed to working with pixels and points. Although the Pega Cosmos Designer mission discusses pixel-related information, it is critical to understand that Cosmos is a fluid design system that is responsive (adjusts the layout of components based on viewport size) and adaptive (changes, removes, or adds elements and functionality based on viewport size). The font size drives all units in the final product, so designs scale fluidly based on a user’s readability preferences and device size. 

As for common design sizes to target, Cosmos has flexible changes to the layout every 500 pixels. Typically, Pega designs at 1600 x 900 pixels (roughly desktop size) are the most common use cases. However, if you need to design for mobile size, it is recommended that you use 500 x 896 pixels (roughly mobile size). Targeting specific device resolutions is not recommended, as that goes counter to Pega’s Build for Change® philosophy given that device sizes may shift in the future.  

Cosmos is used internationally, and components have built-in consideration for the impact that sizes and scaling of shifting languages and text directions may have on the UI. Open Sans is used as the font family due to its support of international characters. 

Check your knowledge with the following interaction.

Accessibility

To supply an exceptionally rich experience for all users, Cosmos targets the international WCAG 2.1 AA standard for accessible software. However, the use of items such as color, button, and card from the library does not always mean your design will be accessible.  

Use the following tips to keep your Cosmos application accessible. 

Involve diverse people, including those with disabilities: Working closely with different perspectives supplies both clarity and exposes gaps in a design. 

Diverse people image

 

Label everything: Buttons, menu groups, headers, and so on. Especially do this for regions where labels may be visually hidden for stylistic reasons. 

Note: Hiding labels visually can make your design difficult to navigate for people that rely on labels to jump to areas quickly, such as users of Dragon Naturally Speaking. 

Instruct well: Make sure instructions and error messages explicitly say what needs to happen and do not rely on visual attributes such as shape, color, or visual location.  

Label everything image

Color clarity: Sufficient color contrast is key for those with low vision or color blindness. Use Cosmos patterns out-of-the-box and to avoid this issue. If you are working on a custom arrangement or theme, meeting a 4.5:1 contrast ratio will keep your designs compliant. There are many tools that can help with checking this. Additionally, never use color alone to show state changes or status updates. 

Color clarity image

Responsivity: 200% zoom support is an accessibility requirement. For example, a low-vision user working on a 1280-pixel wide monitor may see your app at 640 pixels. Responsivity is not just about phones. 

Interact wisely: Mice, touch, motion, voice controls, and keyboards all work differently, so avoid relying only on an interaction-specific method to get things done. Avoid timed events too; people using assistive technology typically need a longer time to act.  

Interact wisely

Check your knowledge with the following interaction.

Clarity and details

Quality designs within Cosmos require clear flows, standardization, and naming/labeling. When you are presenting a Cosmos design prototype, it must be clear to the reviewers who the intended user persona is, what is happening on each screen, how the math and values add up, that the text alignment is correct, designs are close to pixel perfect and using standard patterns. 

Designers must pay attention to the details: distractions can taint the quality of testing results and reviews.  

Clarity is also important when collaborating with other designers’ files. Artboards and pages should be clearly labeled. Notes should be able to be toggled on and off quickly as necessary, and design assets should use non-broken Cosmos library symbols when possible.

If you are having problems with your training, please review the Pega Academy Support FAQs.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice