Design system

Our design system

A design system is a library of UX patterns rendered as a 'building kit'—in multiple technologies. Such a building kit, with workflows, styles, components, patterns and themes, works to provide a seamless, consistent, and familiar set of interlocking end-user experiences. Design systems allow companies to scale design and development across multiple technologies and channels, at incredible speed.

Pega's Cosmos design system has evolved alongside Pega technology. Cosmos is a complete App Studio-configurable (low-code) front-end system for app builders, extensible by front-end developers using tools of their choice. Pega Cosmos provides a complete professional presentation layer with information architecture, interactions and proper accessibility. It is a complete UX toolkit for the needs of large organizations, and built around the use-cases of case management applications.

Cosmos focuses on high-production employee-facing application experiences, using innovative UX design and blazingly fast front-end technology to radically improve efficiency, productivity, and accuracy of enterprise applications, while reducing fatigue and the time needed to train employees, an enormous cost to organizations.

Cosmos can render in four distinct technologies: Traditional Pega UI, iOS, Android and for production applications, by 8.6: React.

Cosmos is a replacement for Pega's previous generation of design system, the Pega UI-Kit. Both were designed to improve the experiences of our client’s employees and focus on production applications but the Cosmos design system goes further than UI-Kit, providing a complete collection of immaculately implemented components, in a far more prescribed collection of interlocking patterns.

Migrating your Pega application

Transitioning to Cosmos React from current Pega UI will be a managed migration and not an auto-upgrade. We are building a collection of migration tools to assist in migration to Cosmos, including a version of Cosmos which runs on traditional Pega UI called Cosmos Rules

Some of these are pointers that will require manual intervention and others will be automated procedures. Because our current technology will co-exist with the new technology for the foreseeable future, you choose when and how to transition your applications to the new Pega technology, thus enabling you to keep your business running while you transition.

One of these tools available by 8.4 is the App Studio Compliance landing page, found in the Dev Studio. This landing page will highlight areas of your application UI that do not conform to the new best practices. These are best practices that are exposed through configuration capabilities in the App Studio.

Future migration guides will be published here and on Pega Community, as they are available. Until then, to prepare for this migration, we recommend engaging in a series of best-practice efforts today. The following recommendations are also highlighted by the App Studio Compliance landing page.

Compliance with the Case Designer

Use the Case Designer to configure your case types to employ a seamless case and sub-case relationships. Use the App Studio Data Designer to manage data relationships.

Design template-based UI

Cosmos takes full use of templating, as it is a completely templated system. Moving to design templates in your apps now will considerably aid in moving to Cosmos later. When you run automation tools to move your application to Cosmos UI, we can re-flow your data to fit inside the same UI regions.

Data pages

Cosmos React will take full use of data pages. Moving to data pages will be necessary to take advantage of this rollout strategy. Take inventory of the data pages available in your application to prep your data for migration. List-based controls will also have to start using data pages for their list source.

Use of custom HTML, custom controls and custom sections

Apps that were built in older releases of Pega still have many custom components built using jsp or other technologies. Those will not work within a React-based UI. It is best to use out-of-the-box controls instead which will have out-of-the-box React equivalents.

Recommended actions in 8.4 or 8.5

For new apps built in 8.4 or 8.5

  • Build on Cosmos Rules (traditional Pega UI—non-React) through App Studio.
  • App Studio application building means:
    • While you create your new app (in Dev Studio), choose “Cosmos” in the new application wizard. Then shift app-building focus to App Studio.
    • In 8.4 you should define personas, case types, workflow for the cases and UI corresponding to the steps of the workflow and validations using App studio. In 8.5 you can also define portals and landing pages specific to each persona.
    • If there are requirements that cannot be achieved via App Studio, switch to Dev Studio but ensure that you are conforming to modern best-practices: Use of data-pages, case designer based case definitions and use of OOTB Design Templates.
  • Cosmos React is available as early-beta in 8.5. However is not fully featured, so you will not be able to build fully functional apps that can be taken to production. In 8.6 Cosmos React will be fully-featured and be the default for all applications built using App Studio. Applications built with App Studio and modern best-practices will have an easy migration path to Cosmos React.

For existing applications

UI-Kit and Cosmos are two different design systems. As with migrating to any new design system, migrating from UI-Kit to Cosmos is a development process.

The effort to migrate from UI-Kit to Cosmos Rules on traditional Pega UI (non-React) largely depends on the complexity of an existing application, including the number of case types, amount of overridden or custom skin formats, custom CSS, and the amount of section rules not based on design templates. We do not recommend migrating production apps to Cosmos Rules and suggest waiting to migrate to Cosmos React.

For guidance on determining the level of effort and to understand the steps involved during migration, refer to "Migrating an existing application from UI-Kit to Cosmos"

Apps that can be considered for migration to Cosmos Rules (on traditional Pega UI) in 8.4 should have App Studio defined personas, case types, steps, and the UI of the workflow (in 8.5 this also includes portal creation)

If your application is does not meet that critera, we recommend remaining on UI-Kit and waiting until 8.6 when Cosmos React is available. To better prepare for that effort, we recommend the following:

  • Start with moving the above configurations to App Studio now.
  • For things that you cannot achieve in App Studio, use Dev Studio but confirm you are sticking to modern best-practices: Use of data-pages, case-designer based case definitions and use of OOTB design templates.
  • Wait until 8.6 to switch to make the switch to Cosmos.

Cosmos roadmap

  • Pega 8.3 (September 2019): Early preview release of Cosmos Rules (traditional Pega UI—non-React). While this provided a glimpse of the new design system, it is likely not robust enough for production applications.
  • Pega 8.4 (February 2020): Cosmos Rules is ready for new applications.
  • Pega 8.5 (October 2020): Cosmos Rules is the default for new applications. Early beta of Cosmos React available but not for production applications.
  • Pega 8.6 (Q1 2021): Cosmos React will be the default for new applications (completion of Cosmos component library and orchestration layer) built using the platform. Release of initial Pega strategic apps on Cosmos.
  • Pega 8.7 (Q3 2021): Release of Pega strategic apps using Cosmos React continues.

UI Kit

Starting in 2013 as an initiative to improve consistency in business applications, the UI Kit is an available collection of product design resources. UI Kit was introduced as an optional sample UX for customers, as they could adapt any version of UI-Kit and choose to upgrade with each release.

Cosmos is the latest design system created by the Pega Product Experience organization. The UI Kit is now considered a legacy product. Though UI Kit is still usable and documented until the foreseeable future, it will not be receiving continued design effort.

Last updated: Oct 2020