Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Spacing

Updated on February 2, 2021

The goal of whitespace is to maximize readability and understanding of content/data. UI Kit uses a 7px system (multiples of seven pixels) to define relationships with the data.

  • 7px: The minimum horizontal padding in an interactive element (e.g., the distance from the border edge of an input field, from the text inside it).
  • 3.5px (7px * .5): The space between an icon and its related text (e.g., a back button with an image of an arrow and the word “Back”).
  • 14px (7px * 2): The space between sections of data inside the same container, the inner padding on the container itself, and the default desktop text size.
  • 21px (7px * 3): The space between unique sections of data (e.g., a case’s master details file starts 21px below where the Perform Harness ends).

Have a question? Get answers now.

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

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us