Styling your application with design systems
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.
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.
- Overriding disabled screen layout formats
Define which screen layout styles your application can use by overriding disabled formats in the skin. Some inherited style formats for screen layouts are disabled by default to improve loading time. If you decide to use one of the disabled screen layouts in your application, you can override the default setting.
- 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.
- 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.
- Customizing fonts for your Pega application
Pega Platform™ supports importing web fonts for use in your Pega application.
- Customizing login screens for your Pega application
Your Pega application uses several rules that correspond to each screen accessed by unauthenticated operators (users who have not logged in). Pega Platform allows you to customize these screens-including the login screen, authentication screen, logout screen, and other screens-through their source HTML and custom cascading style sheets (CSS).
- Styling controls at run time
You can style many types of controls at run time in App Studio, rather than switching to Dev Studio and modifying the application skin. For example, for drop-down controls, you can specify text color, background fill and color, and border width and color. When you style controls directly in App Studio, you can save development time and reduce maintenance work.
Previous topic Legacy forms Next topic Skins