Skip to main content

Branding, theming, and styling in Constellation

Following organizational branding and theming guidelines is important for many organizations. With App Studio, developers can easily apply colors, font styles, and other styling aspects of the Constellation design system to match organizational guidelines to support that adherence. 

Accessibility is also essential for high-quality apps, and the Branding and Themes landing page in App Studio provides developers with the configurations that they need to achieve accessibility requirements by flagging color combinations that fail Web Content Accessibility Guidelines (WCAG) guidelines.

Theme warning flag App Studio
Note: For more information on configuring the theme of your application, see Defining themes.

The Center of Excellence layer

Use a Center of Excellence (COE) layer that implements your design system. Inheriting UI elements from the COE layer increases both maintainability of the product and updates to specific UI elements. As a best practice, use out-of-the-box components and reduce customizations to create a COE layer with reusable components. In the COE layer, you can implement all the elements of your design system, such as web fonts, icons, and design templates.

Depending on the depth of your design system, you can decide whether to use the out-of-the-box COE layer or build your own layer.

Define branding and themes at the COE level, and then share them across multiple applications in the application portfolio. The following figure shows an example of the use of the COE layer across systems. Each project inherits and reused components from the COE layer. Then those components can be used across distinct channels.

Diagram that demonstrates the layered architecture of Pega Platform for enterprise-wise design systems..

Design tokens

The consistency of an application across platforms is critical. For example, match the primary button styling on mobile with the primary button styling on the desktop. To achieve consistency across platforms, quality design systems often employ design tokens, a strategy to design and store component styling aspects in one place and allow the system to automatically generate the platform-specific styling. The components in the Constellation library leverage 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:

This Topic is available in the following Module:

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