Question
Registers of Scotland
GB
Last activity: 13 Oct 2025 12:48 EDT
CSS Framework & Coding Standards
For one of our clients we are building a solution for their customer. While discussing the digital strategy for UX/Branding with the Marketing/Design team (Non Pega team) there was a question raised that whilst there are variations of UX/UI, it’s not anything that falls outside the normal realms of HTML5 and CSS3 coding standards. One question however, is what CSS framework the Pega front end is currently running? i.e Bootstrap, Grid 960 etc and can the Pega front end make use of Google’s Material Design framework or Bootstrap as they are both different styles of UI with different design standards.
We are trying to establish the way of working so that we don't have feasibility issue in delivering the UI design produced outside Pega in Pega.
For one of our clients we are building a solution for their customer. While discussing the digital strategy for UX/Branding with the Marketing/Design team (Non Pega team) there was a question raised that whilst there are variations of UX/UI, it’s not anything that falls outside the normal realms of HTML5 and CSS3 coding standards. One question however, is what CSS framework the Pega front end is currently running? i.e Bootstrap, Grid 960 etc and can the Pega front end make use of Google’s Material Design framework or Bootstrap as they are both different styles of UI with different design standards.
We are trying to establish the way of working so that we don't have feasibility issue in delivering the UI design produced outside Pega in Pega.
Can one of the Pega UX/UI specialist/expert give some guidance on this please?
Accepted Solution
Updated: 13 Oct 2025 12:48 EDT
Pegasystems Inc.
US
Pega has its own design system called Cosmos - see https://design.pega.com/.
When you create a new application in Pega, it is automatically built on top of UI-Kit which is a ruleset that implements the Pega Design system - UI-Kit provides a skin, CSS files that implements some of the responsive and adaptive behavior on mobile and some sections so that new cases types can be immediately created and used in the Case worker and Case Manager portals.
Pega does not use any library for the grid system - all the styling can be configured through a UI called the skin ruleform. Helper classes can be used to implement a 12 column grid layout like bootstrap for page layout. This doc covers some of the aspects https://collaborate.pega.com/discussion/how-use-flex-col-4-and-similar-helper-classes
other relevant articles
https://collaborate.pega.com/discussion/best-practices-using-design-templates-deliver-consistent-user-interface
Pega has its own design system called Cosmos - see https://design.pega.com/.
When you create a new application in Pega, it is automatically built on top of UI-Kit which is a ruleset that implements the Pega Design system - UI-Kit provides a skin, CSS files that implements some of the responsive and adaptive behavior on mobile and some sections so that new cases types can be immediately created and used in the Case worker and Case Manager portals.
Pega does not use any library for the grid system - all the styling can be configured through a UI called the skin ruleform. Helper classes can be used to implement a 12 column grid layout like bootstrap for page layout. This doc covers some of the aspects https://collaborate.pega.com/discussion/how-use-flex-col-4-and-similar-helper-classes
other relevant articles
https://collaborate.pega.com/discussion/best-practices-using-design-templates-deliver-consistent-user-interface
https://collaborate.pega.com/discussion/best-practices-using-section-ruleform
https://collaborate.pega.com/discussion/best-practices-styling-your-application