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 to create powerful enterprise case management applications styled with Pega’s best practices for interaction design. By using its prescribed patterns, templates, 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
  • Create applications that work across multiple channels
  • 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 provides enterprise organizations with scaled, low-code UX solutions. Cosmos UI elements stretch, adjust, and reflow according to the user’s screen dimensions. Cosmos UI elements may also be added or removed based upon available screen space.

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", available in early adopter mode in 8.6+)— on Pega’s newest UI architecture, Constellation
  • Classic Pega Section-based UI (as "Theme Cosmos", from 8.5 and prior)— on Pega’s classic Section-based UI
  • Native Mobile (iOS/Android)

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

Cosmos React is the newest version of the Pega Cosmos design system. Theme UI-Kit and Theme Cosmos will continue to be supported for existing applications. For UI-Kit documentation, refer to Pega Community.

In 8.7, new Pega applications will be built with Cosmos React on Pega’s newest UI architecture, Constellation.

Theme UI Kit and Theme Cosmos will continue to be supported for existing Pega applications. However, as a designer or low-code developer, there are steps you can take to prepare for future migration of your existing Pega application. Follow these best practices in your work today:

  • Prioritize designing using Cosmos UI templates and out-of-the-box components.
  • Configure your case types and sub case relationships in App Studio.
  • Take inventory of your data pages.
  • Avoid use of custom HTML, controls, and sections.

For more information, refer to the App Studio Compliance User Interface landing page (Pega 8.4+).