Skip to main content

         This documentation site is for previous versions. Visit our new documentation site for current releases.      

Design tokens

Updated on October 21, 2022
Applicable to Cosmos React applications

UI components in Cosmos React use design tokens, which are a tool that helps you store the visual attributes of your application as discrete options. By using a design token, you can unify style elements across different channels, tools, and applications.

When you style a Cosmos React application on the App Studio Branding and Themes landing page, Pega Platform automatically updates the theme rule for you. However, you can gain a more granular level of control over your theme by manually editing the theme JSON file in Dev Studio.

You can search for the theme JSON file by entering the name of the theme in the Dev Studio search box, or by exploring the Rule-UI-Theme class.

For a list of design tokens and sample values, see Pega Cosmos.

For example: In this scenario, a sample Customer service theme is expanded to include palette tokens, such as brand-primary, foreground-color, and app-background.

Sample theme JSON file with added tokens
The JSON file that lists palette tokens.

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best. is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us