Grid system

Our UI uses a 24 column grid and is based on an 8-pixel module. That means that every space, width, and height is divisible by 8, and the distance between two elements is in increments of 8 pixels and increases as follows: 8, 16, 24, 32, and so on. In some use cases when 8 pixels is too much space, increments of 2 or 4 pixels can be used, but this should be the exception, not the rule.

The grid has an equal gutter and margin width of 24 pixels. Resizing the screen’s width does not affect the gutter and margin; the change occurs only to the column’s width. When using a side-menu, resizing will not affect the menu’s columns due to the nested grid.


Most of our productsโ€™ UIโ€™s are composed of a masthead, content canvas, and optional side panels. Content canvases, as well as side panels, can contain a secondary toolbar for titles, navigation, and other actions. Side panels can be used on either, or both, sides of the content canvas and can extend the full height of the screen. In addition, the side panel can also be used as a permanent or temporary display.

A Layered Approach

We utilize shadows in our interfaces to create a sense of depth. The backgrounds of our products use the monochromatic color palette and can be seen on the color tokens page. From a hierarchy perspective, and to aid in the sense of space, the bottom-most layer is the darkest and the highest layer is the lightest. Content is mostly displayed on a white background.
Questions? Drop us a line

ยฉ Copyright 2021 Micro Focus or one of its affiliates