Mastering Theming in Pega Constellation: A Deep Dive into Design Tokens

In Pega Constellation, design tokens are a key part of the theming system that ensure a consistent look and feel across applications. They enable scalable, modular, and brand-aligned styling through variables for colors, typography, spacing, and more.

What Are Design Tokens?

Design tokens are platform-agnostic variables that define core design values such as colors (e.g., –palette-primary), font sizes, border radius, spacing, and shadows. They are the foundation of styling in the Constellation UI engine, allowing centralized, configurable, and consistent UI design.

Where Are Design Tokens Used?

Design tokens play a crucial role across multiple areas in Constellation, including view rules (fields, layouts), theme configuration (via App Studio – Theme Cosmos/Constellation), generated CSS at runtime, React components in the Constellation Engine, and custom components or extensions.

Creating Design Tokens in App Studio (Step-by-Step)

1. Open App Studio
   Log in to your application. Use the top-left switcher to enter App Studio if you’re in Dev Studio.

2. Navigate to Settings > Theme
   Go to Settings and select Theme. This opens the theming interface tied to your application’s Theme-Constellation rule or its extension.

3. Choose or Create a Theme
   If no theme exists, create a new theme. Name it and optionally base it on Theme-Constellation or your own theme. If a theme already exists, select it to edit and customize.

How Design Tokens Work (Behind the Scenes)

On app load, the Constellation Engine executes:
PCore.getEnvironmentInfo().getDesignTokens()

This fetches the computed token set, which is cached in browser memory (JavaScript context) for the session, used by all React components to render consistent styles, and re-fetched after theme updates, logouts, or system restarts.

You can clear cache manually with the URL parameter ?pyClearCache=true or by clearing IndexedDB → pConnectMetadata in browser DevTools.

Viewing Tokens at Runtime

To inspect active design tokens, open your browser console when the app is fully loaded and run:
console.log(PCore.getEnvironmentInfo().getEnvironmentInfo().designTokens);

To dig deeper:
Go to DevTools → Application → IndexedDB, open pConnectMetadata , look in resources or metadata store, and locate the object with designTokens inside the environment metadata.

Why Design Tokens Matter

Design tokens are a pillar of Pega’s move toward modern front-end architecture. They make your applications easier to maintain, faster to build, simpler to brand, and visually consistent across all UIs.