UI Kit - Spacing

Spacing guidelines

The goal of whitespace is to maximize readability and understanding of content/data. The Pega Platform UI 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).

Spacing example