Structure

Base

Base elements define how all UIs are built. At their essence, they are Micro Focus’s base foundations.

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.

Elements

Elements are made up of visual styles that help define Micro Focus’s identity, and contribute to interfaces across all product lines having a cohesive look and feel.

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. 

Border Radiuses

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.

Colors

Our color foundation is based on our brand blue and monochromatic color palette. In addition to these colors, we have a variety of accent, secondary, and status colors that can be used throughout product UIs. Below is a sample of how our colors are applied, and the full palette along with specs is available in the tokens section.

Drop us a line

helloux@microfocus.com

© Copyright 2021 Micro Focus or one of its affiliates

Contribute  |  Updates