Skip to main content

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.

Flexibility within prescribed design

Cosmos offers varying levels of flexibility in its design system:

Component/template

Description

Level of flexibility

Landing pages

Landing pages allow you to add any pre-composed asset within the application. The layout of assets is mildly customizable, and you can add any of the following items anywhere on the screen:

  • Insights
  • Pre-defined Widgets
  • Views

The Home page is an example of a custom landing page.

Very flexible

Forms & fields
Tabs

The fields and data to display on your forms are also flexible, but Cosmos supplies guidance regarding which assets to use when.   

Flexible

Case page templates

The following abilities are examples of mild flexibility:

  • 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
  • Enabling or disabling certain sections or defaults according to user needs

Mildly flexible

Pulse

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

Prescribed

 
 

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, you must understand that Cosmos is a fluid design system that has two major characteristics:

  • Responsive -- Cosmos adjusts the layout of components based on viewport size
  • Adaptive -- Cosmos changes, removes, or adds elements and functionality based on viewport 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 that you should target, Cosmos permits flexible changes to the layout every 500 pixels. Typically, Pega designs at 1600 x 1000 pixels, roughly desktop size, which is the most common use case. However, to design for mobile size, use 500 x 896 pixels, which is roughly an average mobile size. Do not target specific device resolutions, which is counter to the Pega Build for Change® philosophy, given that device sizes can change.

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. In Pega Platform™ ’23, Cosmos supports AI-generated localization in App Studio. The new Localization landing page helps you pre-translate your application with generative AI, and includes the option to export suggested translated text or to import your own translation.

Accessibility

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. 

Diverse people image

 

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.

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: Ensure that instructions and error messages explicitly say what needs to happen. Do not rely on visual attributes, such as:

  • Shape
  • Color
  • Visual location  
Label everything image

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.

Color clarity image

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.  

Interact wisely

Clarity and details

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.

 

Check your knowledge with the following interaction:


This Topic is available in the following Module:

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