Grid System

Our products use a 24 column grid to help position and organize the different elements on the page. The grid has an equal gutter and margin width of 24px. Resizing the screen will not affect the gutter and margin; the change occurs only to the column’s width. When using side menus or panels, expanding or collapsing them will also affect the width of the columns.

The grid is based on an 8px module, which means that every space, width, and height is divisible by 8, and the distance between two elements is in additions of 8. In some cases, when 8px is too much space between elements, increments of 2 pixels can be used.

Layout

The basic layout of our products is composed of a masthead that spans to the screen’s full width, a content canvas, and optional side panels. Side panels can serve as secondary navigation or temporary display. Titles and toolbars should be positioned on the top area of the content canvas or side panels.

Elevations

All the elements in the screen are positioned in layers or elevations. This helps to establish a clear hierarchy across the content and guides the user on what to focus on.

The bottom-most layer will act as the base of our elevations and will serve as the product’s background. Everything that is in the content canvas (such as cards, dashboards, tables) will usually be considered elevation one, while structure elements, such as masthead or side panels, will have elevation two. This means that the content in the canvas will scroll behind things on a higher elevation. Notifications or dialogs will be elevation 3 or 4, meaning that they will appear on top of all the rest of the components. Tooltips and similar elements that need to be easily recognizable in busy backgrounds will have the top elevation, which will use a darker color than the other elevations.

Border Radius

Rounded corners should be used on the outermost edge of content. Containing shapes such as cards and tables will use a 4px radius. More basic atom components like tooltips, buttons, input fields, and the like, use a radius of 2px.

Questions? Drop us a line

helloux@microfocus.com

ยฉ Copyright 2021 Micro Focus or one of its affiliates