Design system

The Cosmos design system is a front-end library of UX/UI templates, patterns and components for building enterprise applications with Pega. Cosmos contains workflows, styles, components, patterns, and themes and may be rendered in multiple technologies.

Cosmos provides a seamless, consistent, and familiar set of end-user experiences, allowing companies to build faster across technologies and channels. Cosmos has evolved alongside Pega technology to become the premier low-code, configurable system for enterprise applications.

Cosmos empowers designers and developers create powerful enterprise case management applications styled with Pega’s best practices for interaction design. By using its templated, prescribed patterns and components, app builders save valuable time to solve larger-scale business and user problems.

With Cosmos, you will:

  • Solve for people’s needs, not pixel problems
  • Build case-management software with built-in best practices
  • Automatically upgrade, worry-free
  • Build faster and spend less time training builders and users

A fully templated system, Cosmos offers built-in components, patterns and templates that allow you to create case management applications faster – so you can focus on what your user needs to see and not what it looks like.

The Cosmos design system is part of the Pega Digital Experience (DX) framework, an extensive front-end and UX framework that provides enterprise organizations with scaled, low-code UX solutions. The Digital Experience Framework includes both the latest UX/UI treatment of Pega technology and traditional UI technology. Cosmos represents the front-end layer of the ecosystem.

Cosmos may be rendered on several front-end technologies, including:

  • New React-based UI (as "Cosmos React", production-ready in 8.6+)
  • Classic Pega Section-based UI (as "Theme Cosmos", from 8.5 and prior)
  • Native Mobile (iOS/Android)

Learn how to design with Cosmos by taking the Pega Cosmos Designer Mission at Pega Academy.

The Cosmos design system replaces Theme UI-Kit. Legacy UI-Kit documentation may be found on Pega Community.

Transitioning to Cosmos on Pega's new Cosmos React UI architecture will be a managed migration. Most applications will transition to the new architecture in future releases.

Starting with Pega 8.4, the App Studio Compliance landing page highlights areas of your application UI that do not conform to best practices through configuration capabilities in the App Studio.

To prepare for migration, Pega recommends prioritizing best practices today.

Comply 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 using UI templates

Cosmos is a fully templated system. Moving to design templates in your apps now will 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.

Take inventory of data pages

Cosmos React will take full use of data pages. Take inventory of the data pages available in your application to prep your data for migration. List-based controls will also begin using data pages for their list source.

Use of custom HTML, controls and sections

Applications built in previous Pega releases will still have many custom components built using jsp or other technologies, which will not work in a React-based UI. Out-of-the-box controls that have out-of-the-box React equivalents are recommended.