Skip to main content

         This documentation site is for previous versions. Visit our new documentation site for current releases.      

Changes in the design process in Theme Cosmos

Updated on December 13, 2022

Theme UI-Kit and Theme Cosmos are the two UX libraries that are available for use in applications that have a traditional UI architecture that uses section rules, skin rules, and UI controls. While Theme UI-Kit is a classic experience, Theme Cosmos offers a more efficient, research-based approach to case processing.

Theme UI-Kit

Theme UI-Kit is the original design system that you use to improve UI consistency in Pega Platform applications. While no major new features are planned for Theme UI-Kit, Pega remains committed to updating Theme UI-Kit to address critical bugs and add accessibility improvements where possible. Theme UI-Kit also includes an active component and widget library for some framework applications and applications that use earlier versions of Pega Platform.

For more information about working with Theme UI-Kit applications, see the legacy Theme UI-Kit site.

Theme Cosmos

Theme Cosmos is the most recent design system and UX library for traditional, section-based Pega Platform applications. Theme Cosmos follows extensive research into the most common case management scenarios and aims to optimize work by reducing clicks, screen switching, and eye movement. Theme Cosmos can also help you reduce training time by bringing consistency to your applications, which makes introducing your application to a wider and diverse audience more convenient by following accessibility standards out of the box.

Changes in Theme Cosmos

Theme Cosmos offers a more outcome-focused approach to UI architecture and design. This approach relies on a library of out-of-the-box patterns that free designers from the need to negotiate trivial aspects of the UI, such as modal dialog box behavior or button placement. Instead, developers can now focus on optimizing the workflow and business logic. At the same time, Theme Cosmos provides extension points for advanced and professional front-end developers, striking a balance between quick, prescriptive prototyping, and business-specific customizations.

The following table lists some of the changes to the design process in Theme Cosmos:

ComponentChangeBest practice
App StudioApp Studio gains prominence as the tool for assembling low-code UI from patterns such as templates, fields, and views. As a best practice, build applications in App Studio to reduce potential errors. Switch to Dev Studio when configuring advanced features that are unavailable in App Studio, such as integration services or database class mappings.
Design templatesTheme Cosmos introduces design templates that provide common patterns for organizing your content.

Design templates encourage configuration rather than drag-and-drop customization. This approach helps you save time during updates, because out-of-the-box design templates update automatically.

Use design templates and populate them with UI components. For more information, see:
Cosmos React landing pagesTheme Cosmos applications can access selected Cosmos React capabilities, such as Cosmos React-based landing pages, in a seamless manner.

By supporting a mixed architecture, hybrid mode helps you to progressively prepare your application for future changes.

Use hybrid mode. For more information, see Hybrid mode.
PersonasUser management no longer requires a combination of hand-crafted harness, portal, and access groups. Instead, you can manage users more intuitively through personas, which represent realistic, relatable groups of users of your application.Create and use personas. For more information, see:
Cosmos UI settingsIn Theme Cosmos, case-level settings, such as header options, are now collected on a single landing page in the case designer.Define case-level settings in the case designer. For more information, see Managing Cosmos UI settings in case designer
Summary panel viewsTheme Cosmos features a prescribed summary panel configuration that provides an overview of case-relevant information.

The collapsible summary panel holds critical case data that users can scan and understand at a glance, and supplement with secondary information in tabs.

Configure the views according to your business needs. For more information, see Summary panel views.
PreviewThe new preview pane, which works on hover, helps your users see and interact with another case in the system without losing context.Configure the preview to best match the needs of your users. For more information, see Adding tabs to the summary panel.
UtilitiesThe Theme Cosmos utilities pane has been updated to a collapsible side panel that shows counts.

In addition, Theme Cosmos provides a number of out-of-the-box widgets, such as a widget listing case followers, with the panel count indicating the number of followers.

Configure the utilities pane. For more information, see Widgets in the utilities pane.

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best. is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us