Typical layout
Layout overview
Having a defined layout encourages consistency and form across various designs, platforms, and screen sizes. When all elements and spacing follow a uniform framework, the human eye groups elements into shapes, shapes into patterns, thus making UX easier to understand at a glance.
Case layout is visually segmented into the three questions people have when reviewing the work or business object.
- Data: What's the most critical or unique information needed to grasp this quickly?
- Activity: What's happened, and what must happen next to complete this stage of work?
- Utilities: Which relationships, files, and tools are needed to provide context?

Visual layout follows the standard left-to-right reading order. On the far left is the Data region where the Summary panel lies. In the center is the Activity region containing the Case lifecycle and the Pulse feed. Finally, to the far right is the collapsible Utilities panel.
In right-to-left locales, this order is reversed.
Last updated: Feb 2020
Spacing
- 8px: 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).
- 4px (8px * .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”).
- 16px (8px * 2): The space between sections of data inside the same container, the inner padding on the container itself, and the default desktop text size.
- 24px (8px * 3): The space between unique sections of data (e.g., a case’s master details file starts 21px below where the Perform Harness ends).
Last updated: Dec 2019