UI Kit

UI Kit

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.

CRUD

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

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

Configuration pages hold a list of application settings and modifiers. Groups of similar configurations can be collected in a heading or tabbed view.

Reporting

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: Jun 2017

Get the files

Want to begin working with the Pega Design System? Download the vector assets below.

Download design files

Last updated: May 2017

Next: Visual design