Pega UX Design System DESIGN.md

Design System Inspiration of Pega UX Design System

Overview

Visual Theme & Atmosphere

Pega is an enterprise AI decisioning and workflow-automation company whose public UX system is built for people completing consequential, guided work. The system’s recognizable expression is deliberately prescribed rather than a loose sticker sheet: it directs teams toward pre-built workflows, familiar patterns, and reduced interface choice so that attention can stay on business logic, accuracy, and progress. In the supplied Pega UX System surfaces, a deep blue header, crisp white canvas, Roboto Flex, compact utility controls, and a single large pill-shaped action create a calm but operationally direct document experience. Pega’s corporate story has evolved from long-running AI and automation work toward its current enterprise-transformation position; its design-system documentation likewise says Constellation is now the default name and direction for the same system.

Key characteristics:

• Deep header blue #1a3a5c paired with white #ffffff utility text.
• A dark #03102e link styled as a 59px, 32px-radius primary action in the captured public system home.
• Roboto Flex is both loaded on the supplied surfaces and named in Pega’s official UX System ’25 design resources.
• Current web geometry is limited to Pega’s public design-system documentation, not Pega corporate marketing or an authenticated enterprise application.

Primary tasks

• Build an enterprise screen from prescribed workflow patterns
• Search the design-system documentation for a specific component
• Look up how to label and explain a form field
• Collect the Figma kit and icon library before designing

Brand Narrative

Pega says founder and CEO Alan Trefler began developing chess-playing AI agents more than four decades ago, applying the underlying ideas to technology and business. Its current corporate story positions the company as an enterprise-transformation platform for governed, scalable, adaptable processes and decisions. That long horizon helps explain the UX system’s emphasis on prescribed patterns: the public getting-started guidance explicitly redirects effort away from repeated button-placement choices and toward business logic, workflows, and productivity.

The current design-system site describes Constellation as the default design system name and direction while saying the underlying system remains the same. This is a product-language evolution, not evidence that all historical Pega public surfaces share the measured values in this reference. Pega’s 2021 brand account separately describes a move away from a rigid, four-color/four-shape visual system toward a more modern, flexible, narrative illustration approach; that corporate brand history is not used as a token source for the Pega UX System pages.

Principles

1. Guide work toward an accurate outcome. The system’s forms guidance makes speed, readability, and reduced overwhelm explicit. UI implication: show the next required task and its context before adding optional controls.
2. Prescribe the repeatable decisions. Pega’s getting-started page emphasizes pre-built workflows and consistent patterns. UI implication: make ordinary workflow choices predictable instead of styling each page as a separate concept.
3. Keep essential input explicit. Pega recommends labels and helper text instead of placeholders. UI implication: expose what a field means and what is required without relying on faint temporary copy.
4. Build for continuous change. Pega’s corporate position ties enterprise transformation to adaptable, governed systems. UI implication: use clear information hierarchy that can accommodate evolving case data without obscuring the current action.

The UI implications are this reference’s application of official public guidance, not a claim of unpublished Pega product rules.

Personas

This reference does not invent named personas. Pega’s official UX-system pages identify people who design, author, configure, and complete guided enterprise work: application designers and authors use the documented patterns, while end users create and manage Cases and complete Assignments. Pega’s public corporate context also names large organizations modernizing workflows and customer experiences. These are stakeholder groups, not substitutes for first-party user research or verified application roles.

Colors

Public Pega UX System surface roles

• Header (#1a3a5c): measured background of the public design-system masthead.
• Action (#03102e): measured fill of the explicit link-as-button action on the public home surface.
• Canvas (#ffffff): measured page background and text-on-dark pairing.
• Foreground (#050505): measured dark menu and body text.
• Accent (#0b6dd3): measured blue foreground in a public-home link sample.
• Accent Weak (#e8f3fb): measured pale-blue background in that same public-home link sample.

The observed palette is a documentation-surface record. It does not establish Pega corporate campaign colors or authenticated-product semantic colors.

Typography

Official product-use and live surface-use

Roboto Flex is the loaded, high-confidence family across 184 visible observations in the supplied Pega UX System pages, including body text, headings, buttons, inputs, cards, and menu rows. The Pega UX System ’25 design-kit resource also names “Roboto Flex” as its font family. The measured public documentation values retained as reusable reference points are a 38.4px / 500 / 48px component-page heading and 16px / 400 / 24.64px body text.

Official distributed design asset

Pega’s design-resources page links its Figma kit, icon library, and Roboto Flex family. This confirms the family as a Pega UX System asset; it does not transfer a Pega project asset licence to another project.

Licence boundary

The Roboto Flex project publishes its fonts under the SIL Open Font License 1.1. That licence is typeface context, separate from Pega’s own application assets and from this reference’s measured web usage.

Declared-only and unresolved

DM Sans, JetBrains Mono, and Source Serif 4 were declared in the captured CSS but had zero visible uses. They are not promoted to a UI token. System stacks such as -apple-system and Arial were also observed, but are treated as runtime fallbacks rather than Pega brand families.

Layout

• Prescribed workflow first: Pega’s official getting-started material frames the system as a way to remove trivial UI decisions so teams can focus on business logic, productivity, and ROI.
• Compact documentation chrome: the captured version control uses 6px vertical and 12px horizontal padding; the search input uses 12px horizontal padding.
• Large forward action: the observed dark action uses 16px vertical and 32px horizontal padding at 59px height.
• Scope boundary: these dimensions describe the supplied public design-system pages at 1440×900; they do not prove a product application grid, responsive breakpoint, or authenticated workflow layout.

Responsive Behavior

Only 1440×900 surfaces were supplied. Pega’s official material says the system addresses multi-device support and responsive behavior, but this packet contains no measured breakpoint, reflow, touch-target, or mobile-navigation value. Those fields are therefore absent.

Elevation & Depth

The retained dark action, header controls, menu rows, and captured article containers report no box shadow. No Pega elevation scale is established. In this narrow evidence bundle, hierarchy comes from the dark header, contrast, padding, and the action’s rounded silhouette rather than a reusable shadow ladder.

Motion & Easing

The evidence packet records interactionCount: 0, no interaction kinds, and no transition or easing measurements. No duration, easing, reduced-motion, or motion-behavior token is established.

Components

Public dark link action

Default observed

• Background: #03102e
• Text: #ffffff
• Border: 1px solid #ffffff
• Radius: 32px
• Height: 59px
• Padding: 16px 32px
• Font: 16px / 700 / Roboto Flex
• States: default observed only; interaction capture reported 0
• Use: public design-system link with explicit link-as-button class

Header search input

Default observed

• Background: rgba(255, 255, 255, 0.14)
• Text: #ffffff
• Radius: 0px
• Height: 32px
• Padding: 0px 12px
• Font: 14px / 400 / Roboto Flex
• States: default observed only; interaction capture reported 0
• Use: public design-system search input

Menu row

Default observed

• Text: #050505
• Height: 42px
• Font: 16px / 400 / Roboto Flex
• Use: public design-system menu row

The menu item is retained as listItem: the supplied evidence records a row/menuitem, not button semantics. No hover, focus, pressed, disabled, error, or selection styling is asserted because the bundle records zero interaction actions and zero observed states.

Published component roster (42 not measured here)

Pega publishes 42 components in its UX Design System, enumerated by its own sitemap at design.pega.com/page-sitemap.xml:

form-controls (16) — button, checkbox, currency-input, date-time-input, email-input, field-group, file-input, form-progress, location-input, number-input, phone-input, radio-button, rich-text-editor, select-combobox, text-area, text-input case (10) — app-announcement, assignments, attachments, case-page, case-preview, followers, lifecycle, pulse, related-cases, stakeholders information-display (6) — avatar, badge, banner, card, file-display, icon overlays (4) — modal-dialog, popover, toast, tooltip tables-and-lists (3) — field-value-list, tables, timeline-list navigation (3) — app-shell, link, tabs

This reference has measured none of them. They are named so the gap is visible; no token, state, geometry or metric is asserted for any.

The three measurements above are documentation-site chrome, not Pega components

The dark link action, header search input and menu row are real, dated, selector-backed measurements and they stay. But they are the chrome of design.pega.com itself — its masthead search field, its navigation rows, and a link on its home page styled as a call to action. Pega's Button is form-controls/button, and this reference has never opened it.

Their use: strings now say so outright, and that reaches a reader: /builder renders the use: line under the measured values, so the pega preview shows dark-link-action with "design.pega.com documentation-site home action (link-as-button class) — not a Pega UX Design System component" printed beneath it. The type heading above still reads BUTTONS, because that is the grouping the preview uses, but the item under it is labelled for what it is.

This was briefly left open as a decision about moving the three out of tokens.components altogether, on the assumption that a use: string could not reach the builder. That assumption was wrong — it was checked by looking at the rendered page rather than reasoning about it — so the decision does not exist. Removing them would have orphaned the 24 dated tokens.components.* evidence claims that bind them to their capture, and bought nothing.

design.pega.com/components/ is cited below as a Tier 1 source and returns 200 with a full component index. Whoever captured it recorded the page's own chrome and not the components the page lists. That is the failure this roster exists to stop repeating.

---

Verified: 2026-07-13 Tier 1 sources: https://design.pega.com/ (supplied public Pega UX System computed-style and FontFaceSet evidence), https://design.pega.com/components/ (supplied public components-route evidence), https://design.pega.com/resources/design-resources/ (official design assets and Roboto Flex confirmation), https://github.com/googlefonts/roboto-flex (Roboto Flex licence context) Tier 2 sources: https://getdesign.md/pega (attempted through built-in web open; safe-open error, no usable record), https://styles.refero.design/?q=pega (attempted through built-in web open and domain search; safe-open error and no result record) Conflicts unresolved: none

States

No authenticated-product empty, loading, success, error, or disabled state was supplied. The packet records zero interaction actions and zero observed states, so no component-state contract is inferred. Pega’s public documentation discusses forms, accessibility, and workflow patterns, but that narrative does not create measured state tokens for this reference.

Live state probe, 2026-10-16 (https://design.pega.com/), dark-link-action: pressed — bg #ffffff, label #000000, shadow #ffffff 0px 0px 0px 1.76px, #076bc9 0px 0px 0px 2.88px, rgba(7, 107, 201, 0.1) 0px 0px 0px 4.8px.

Do's and Don'ts

Do

• Use the documented system as a guide for task-oriented enterprise flows, where the next meaningful action is clear.
• Preserve the measured dark blue #03102e action, white #ffffff text, and 32px action radius only in a comparable public-system context.
• Use Roboto Flex only when it is actually available and appropriately licensed for the target project.
• Keep labels, helper content, and form structure explicit; Pega’s forms guidance favors labels and helper text over placeholders.

Don't

• Do not transplant public documentation chrome into an authenticated Pega application without product-surface evidence.
• Do not substitute a system font and label it Roboto Flex.
• Do not invent hover, focus, pressed, disabled, error, or motion values from this zero-interaction capture.
• Do not promote DM Sans, JetBrains Mono, or Source Serif 4 from declared CSS into a Pega UI-family claim.

Voice & Tone

Pega’s official system language is practical and outcome-oriented: it describes guided workflows, familiar interaction patterns, accessibility, localization, and the fastest path to an accurate outcome. The corporate voice adds “Build for Change” to a long-running AI and automation story. Treat this as public documentation and positioning guidance, not as a complete error-message or transactional-copy specification.

Official wording samples

• “Patterns and components for building enterprise applications.” — Pega UX Design System home.
• “The fastest path to an accurate outcome.” — Pega forms guidance.
• “Build for Change®.” — Pega corporate positioning.

Agent Prompt Guide

Use this reference for a Pega UX System public documentation or guided-enterprise-workflow direction: a deep-blue utility header, white canvas, Roboto Flex when truly available, low-shadow separation, clear labels, and one highly legible dark rounded next-step action. Let the workflow and business information lead. Do not present this public documentation geometry as verified Pega product UI, and leave all interactive states and motion unspecified unless new product-surface evidence records them.

Governance

Known Gaps

• Contrast, header-search. Text #ffffff on #ffffff24 measures 1.00:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.