Themes and styles for Constellation applications
Design consistency starts in the run time experience, where developers configure how an application looks and behaves for users. To scale that experience across applications, teams can define reusable design assets in the Enterprise layer and use design tokens to keep styling consistent across platforms.
Run time design
The UI Designer in Pega Platform™ helps application builders create Portals that are visually consistent, brand-aligned, and accessible. The UI Designer provides out-of-the-box design selections, a simple drag-drop interface, and an AI assistant to complete in-context design configurations. By using the UI Designer directly in the run time environment, developers can define Portal content, themes, and navigation while previewing changes in real time. This immediate feedback makes it easier to adjust the look and feel of an application.
Constellation applications include several ready-to-use themes that provide a helpful starting point. Developers can update a default theme provided for a new application or create a customized theme that better supports their design and branding needs. A key part of this customization is applying organizational brand guidelines. Developers can use the styling options available in the Constellation design system to apply approved colors, font styles, and other visual elements so that the application experience reflects the organization’s identity. These options help developers shape the visual experience without changing the underlying application functionality.
As developers refine the visual design, they should also consider accessibility. In addition to providing Portal users with theme switching to improve readability and accommodate user preferences or needs, the UI Designer gives developers real-time visualizations and configuration help to ensure that color contrasts, layouts, and display elements can be adjusted to meet accessibility standards during the design process.
The Enterprise layer
Use an Enterprise layer, also called a Center of Excellence (COE) layer, to implement your design system. Inheriting UI elements from the Enterprise layer increases both the maintainability of the product and enables easier updates to specific UI elements. As a best practice, use out-of-the-box components and reduce customization to create an Enterprise layer with reusable components. In the Enterprise layer, you can implement all the elements of your design system, such as themes, web fonts, icons, and design templates.
Depending on the depth of your design system, you can decide whether to use the default Enterprise layer or build your own layer.
Define branding and themes at the Enterprise level, and then share them across multiple applications in the application portfolio.
Tip: Themes do not support inheritance. As a best practice, use a theme to define a high-level set of design tokens to be shared among multiple applications. If a theme requires specialization for a specific application, save and update a copy of the Enterprise layer theme into a higher Ruleset.
The following figure shows an example of the use of the Enterprise layer across systems. Each project reuses predefined components from the Enterprise layer. Those components can be used across distinct Channels:
Design tokens
The consistency of an application across platforms is critical. For example, the primary button styling on mobile should match with the primary button styling on desktop. To achieve consistency across platforms, quality design systems often employ design tokens, a strategy for designing and storing component styling aspects in one place so that the system can automatically generate platform-specific styling. The components in the Constellation library all make use of design tokens.
For advanced use cases and more granular styling of specific Constellation components, developers can modify the default values of each component's design tokens.
Note: For more information on design tokens, see Design tokens.
Check your knowledge with the following interaction:
If you are having problems with your training, please review the Pega Academy Support FAQs.
Want to help us improve this content?