Design system technology

Pega currently offers two design systems:

  • The Constellation design system (previously referred to as Cosmos React in Pega 8.7)—this is the latest Pega design system, built on Pega’s Constellation architecture.
  • Theme Cosmos (available since Pega 8.6)—this design system is built on Pega’s traditional section-based UI architecture.

Each is different in how it is authored and in level of prescriptiveness.

The Constellation design system is built on Pega’s new, view-based architecture:

  • Emphasizes configuration over customization of the UI— enables you to configure business logic instead of building UI from scratch
  • Provides prescribed workflows for users and guided authoring for low-code developers— allows you to build applications fast with pre-made UI designed for productive user experiences
  • Allows you to configure Views, instead of sections— enables you to configure business logic and then add a presentation layer to the data, instead of adding logic to pieces of UI

Theme Cosmos is built on Pega’s traditional section-based UI architecture:

  • Allows you to customize skins, sections, and harnesses
  • Available for Pega 8.7 and prior
  • Provides prescribed workflows for users
  • Authored in a mix of App Studio and Dev Studio
  • Emphasizes customization over configuration— allows you to customize UI, but can lead to inconsistent UX and challenges with upgrades

Differences between the Constellation design system and Theme Cosmos

The Constellation design system represents a shift in how designers and low-code developers build applications with Pega. Instead of customizing sections, or pieces of the UI, it lets you configure Views, or entire combinations of data and templates.

With the Constellation design system, you no longer start with a piece of UI and add business logic to it after—you do the opposite. You start with the business logic and then apply a pre-developed presentation layer. This lets you build cohesive, efficient applications, fast.

It also offers prescribed workflows for users and guided authoring to designers and low-code developers. As a designer of Pega applications, you no longer need to worry about small UI details, like where a button should go on a form. Instead, you can focus on tackling bigger, more important UX issues that your users face, such as the outcomes they need to achieve in their workflows.

Migrating to the Constellation design system

We recommend that you evaluate the Constellation design system for your use case for new applications starting in Pega 8.8. Any applications currently not on Constellation should stay on their current version. Theme Cosmos, and its predecessor Theme UI-Kit, will continue to be supported for years to come.

Learn about the differences between the Constellation design system and its predecessor Theme Cosmos on Pega Community.

Migrating existing apps to the Constellation design system will be a managed effort. We will continue to develop guidance and tooling for existing applications to migrate in the future.