Design guidance in Cosmos

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:

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.

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. 

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

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.  

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. 

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.  

Check your knowledge with the following interaction.

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.