Pega’s UI Kit is the guiding set of styles and guidelines that power the core of our applications. Tried-and-tested techniques and layouts optimize the completion of daily tasks and breathe transparency into whichever application they are applied to.
Part 1: UI
UI Kit is a framework of Pega components (modules of HTML, CSS, and JS, such as a form input with a label and validation) and Pega formats (re-usable styles applied to a component). This collection can be added to the framework stack of any Pega application. UI Kit’s UI components can all be found in the Components section of this site.
Part 2: UX
When it comes down to it, all applications have the same basic workflows.
Every application needs to provide a way to Create, Review, Update, and possibly Delete (CRUD) work items. An example from UI Kit is:
- A user creates a new case or object that will require some sort of work to be performed.
- A user may review this case to see what its core details are.
- A user may also either update or delete a case as needed.
Case management makes it clear where work is in the pipeline, who’s doing what by when, and what its priority is. Cases feature a “Perform Harness” (highlights the next step in the process), “Master Details” (details provided when the case was created), and other metadata (ID, stages, status, etc.). There are a few different case management layouts.
- Simple Case – Work that has no authorization or dependencies. A good example of this type of case might be a contact, because they typically would be attached to a case like a Loan Approval or Company.
- Standard Case – Has sub-cases and/or needs authorization or details at various stages of the workflow. Work must be completed in one stage before work can happen in the next.
- Ad-hoc Case – Like a standard case, but some or all work from any stage can be taken out of order as needed.
Configuration pages hold a list of application settings and modifiers. Groups of similar configurations can be collected in a heading or tabbed view.
Reporting takes a few different forms in Pega applications.
- Dashboard widgets - A default set of data monitoring views presented after login that can be customized.
- Tables (or grids as Pega calls it) - A list of data such as worklists or backlogs.
- Heads-up displays - Visually distinct areas of a case to highlight its most critical information.
- Reporting page - Dedicated location in an application where reports can be reviewed and created as needed.
Last updated: Jul 2018
Get the files
Want to begin working with the Pega Design System? Download the vector assets below.Download design files
Last updated: May 2017