Design guidance in Cosmos

Prescribed design drives the Pega Cosmos design system. Based on research, testing, subject-matter knowledge, and feedback, Cosmos applications offer optimized design methods that let you focus on your priority: the workflow for users.

Cosmos offers varying levels of flexibility in its design system:

Designers are accustomed to working with pixels and points. Although the Pega Cosmos Designer mission discusses pixel-related information, you need to understand that Cosmos is a fluid design system that has two major characteristics:

• Responsive--adjusts the layout of components based on viewport size
• Adaptive--changes, removes, or adds elements and functionality based on view port size

The font size drives all units in the final product to ensure that designs scale fluidly based on user readability preferences and device size. 

Regarding common design sizes to target, Cosmos permits flexible changes to the layout every 500 pixels. Typically, Pega designs at 1600 x 1000 pixels, roughly desktop size, which are the most common use cases. However, to design for mobile size, use 500 x 896 pixels, roughly mobile size. Do not target specific device resolutions. It is counter to the Pega Build for Change® philosophy, given that device sizes can shift.

Cosmos has a global user base. Components have built-in consideration for the impact that sizes and scaling of shifting languages and text directions can have on the UI. Cosmos uses Open Sans as the font family due to its wide support of international characters.  Finally, Cosmos offers data localization.

Check your knowledge with the following interaction.

To supply an exceptionally rich experience for users, Cosmos targets the international WCAG 2.1 AA standard for accessible software. However, using items from the library does not always mean your design will be accessible, for example:

• Color
• Button
• Card

To keep your Cosmos application accessible, take the following tips:

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

Label everything: Labeling UI elements, such as buttons, menu groups and headers, makes it easier for users to navigate. Especially label regions where labels might be visually hidden for stylistic reasons.

Instruct well: Ensure that instructions and error messages explicitly say what needs to happen. Do not rely on visual attributes, such as:

• Shape
• Color
• Visual location  

Color clarity: Sufficient color contrast is key for those with low vision or color blindness. In 8.7, Cosmos helps designers and citizen developers select the correct color choice in theme authoring in order to keep applications accessible for all users. Use Cosmos patterns out-of-the-box to avoid color-based accessibility issues. If you are working on a custom arrangement or theme, meeting a 4.5:1 contrast ratio keeps your designs compliant. Many tools can help with checking compliance. 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 might see your app at 640 pixels. Responsivity is not just about phones. 

Interact wisely: Mice, touch, motion, voice controls, and keyboards all work differently. Avoid relying only on an interaction-specific method to do things. Also, avoid timed events. 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, clear standardization, and clear naming and labeling.

• Clear flows
• Clear standardization
• Clear naming and labeling

When you present a Cosmos design prototype, reviewers expect to see certain things:

• The intended user persona
• What happens on each screen
• How the math and values work
• The text alignment is correct
• Designs are close to pixel perfect and use 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 the files of other designers. Label artboards and pages clearly. Users should be able to toggle on and off quickly, and design assets should use unbroken Cosmos library symbols when possible.