Skip to main content

Key front-end concepts of the Pega Cosmos design system

The Pega Cosmos design system follows a prescribed design: a set of informed default designs and templates with preset configurations to reduce design time, allowing the designer to create pages and flows that focus on user needs. Prescribed design iterates over time as new use cases are discovered or regulated. It does not preclude customization for patterns and components; it aims to reduce time-to-market and increase user needs.

Prescribed design allows you to focus on bigger decisions

In design, there may be many ways to solve a problem. For example, consider a Next button and where it might appear in a modal. Some companies place the button in the lower right (to allude to turning the page), the lower center (for a more natural reading flow), or even left-align the button (when key inputs or information appear at the top of the modal). While all of those solutions may work to solve consistency and readability, small decisions add up in both planning time (discussing, aligning, and implementing the solution) and implementation resources across teams. A prescribed design solves many of these issues on behalf of designers. In simpler terms, the prescribed design allows you to focus on what is actually in the modal and when the modal makes sense in the user’s flow through the application.

Illustration of different button placement affecting modal flow

Prescribed design concepts in the Pega Cosmos design system

Cosmos uses a number of tools and concepts in a prescriptive manner. As a designer, you should be familiar with the following terms:

Design tokens

Design tokens are tools used to convey key design and UX principles across multiple channels and technologies. Tokens are used to unify style elements across web, desktop, mobile, tools and applications. They are critical to use with Pega applications, as Pega applications blend native and web design elements.

Cosmos contains four types of design tokens:

Definitions and examples of prescribed design tokens in Cosmos
Design token type Description Examples
Primitive  Represent raw design elements
  • The exact shade of red to use
  • Spacing scales (for example, 8 px multiples)
  • Text sizes
  • Speed of animation
Meaningful  Tie functional purpose to Primitive tokens
  • Any combined token
  • Heading 2 (uses both a basic token such as font-size-l and font-weight-semibold)
Component-shared Repeated component parts that rely on Component tokens and may be shared across components. These often use both Primitive and Meaningful tokens. 
  • Input-border 
  • Button-border radius (parts of a button)
Component-specific All components have a set of tokens specific to that component, defining every element of styling from spacing to layout. These may use a combination of Primitive, Meaningful, or Component-shared tokens. 
  • Checkbox-border-radius (that may be mapped to an existing Component token or use a fixed value)

Some design tokens are editable when customizing your applications in order to allow for custom branding. Examples may include meaningful tokens such as brand-primary-color or changing basic tokens, such as the default color family.

Themes

Image of themes in Cosmos

Themes are simple settings used to style an application according to brand standards. 

Patterns

Image of patterns in Cosmos

Patterns are repeatable and scalable combinations of components and user flows that create a consistent experience.

Components

Image of component in Cosmos

Components are UI elements and combinations that perform a specific function.

Complex components that have a focused business goal and may be fully functional within any context are called widgets. For examples, a Files & Documents widget that allows for review, exploration, and creation of new linkages.

Check your knowledge with the following interaction.

If you are having problems with your training, please review the Pega Academy Support FAQs.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice