Changes in the design process in Theme Cosmos
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:
| Component | Change | Best practice |
| App Studio | App 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 templates | Theme 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 pages | Theme 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. |
| Personas | User 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 settings | In 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 views | Theme 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. |
| Preview | The 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. |
| Utilities | The 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. |
Previous topic Learning about core user interface principles Next topic Out-of-the-box UI tools