LinkedIn
Copied!

Table of Contents

Styling your application with design systems

Version:

Only available versions of this content are shown in the dropdown

Design systems help you introduce consistency to the applications that you build. By choosing to use a design system, you can scale your designs to maintain a unified presence across a number of platforms with less effort.

A design system is a library of patterns and rules that determine how an interface responds to user interaction. Design systems contain the best practice guidelines, operational assets, and UI components that are required to deliver the interface. For example, a design system might include a reusable table component that supports sorting, filtering, and grouping. You can source every table in your application from that component, which means that every table in the application can have the same basic architecture and rely on consistent rules to model user interactions.

Some organizations develop proprietary design systems to unify the presentation, behavior, and structural rules of their application interfaces. However, most businesses rely on the design system that is provided by Pega. Either approach helps improve consistency, and creates a system that is easier to upgrade and maintain.

Cosmos design system

Pega Platform uses the Pega Cosmos design system as its main product design resource. The system provides a consistent library of components that form the entire user experience for both customer-facing applications and Pega Platform itself.

Cosmos relies fully on templates and prefabricated components for more efficient development and performance. In addition, a more modern design and increased focus on intuitiveness help save time on application updates and user training.

Cosmos supports a number of JavaScript libraries, including React UI, which is the framework on which Pega Platform bases its UI components. For more information, see Accelerate your workflow with Cosmos UI.

UI Kit

UI Kit is the classic set of product design resources that is aimed at improving consistency in business applications. As the original Pega Platform design solution, UI Kit speeds up maintenance and continued development of existing applications.

Discover more about styling your application in the following articles:

  • Skins

    Skins help you style the graphic elements of your interface, such as borders and backgrounds, separately from the content. This approach ensures greater consistency, promotes reuse, and provides you with tools to make quick changes to the graphic design of your application.

  • Updating the UI Kit in your application

    Ensure that your application includes a modern, responsive, and consistent UI by updating the out-of-the-box UI Kit layer in your application stack.

  • Updating the Cosmos theme in your application

    Build your application by using the latest UI tools. By ensuring that the Cosmos theme ruleset is up to date, you provide your application with a modern and responsive interface.

  • Managing Cosmos UI settings in case designer

    Adjust the Cosmos-based user interface of your application to the needs of your organization. By changing Cosmos settings, you can control case-level fields and case behavior to make the interface cleaner or more informative, according to your preferences.

  • CSS helper classes

    CSS helper classes are snippets of code that introduce minor formatting changes to your UI. If your application has many formats of the same type, and these formats vary only slightly, using CSS helper classes can save you development time by limiting the number of customized skin formats.

  • Uploading custom font files

    Ensure that your user interface meets the branding requirements of your company by adding new fonts to Pega Platform. Your custom font files can comprise standard fonts or icon fonts, which you can then add to the default icon set for your application.

  • Login screen customization

    You can customize the appearance of the login screen and other screens that unauthenticated users access, to maintain design consistency with your company's style guidelines.


100% found this useful

Have a question? Get answers now.

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