UI Philosophy
UI Components

UI Philosophy

Grid System

Our UI grid system is based on 24 columns grid layout. The grid layout has an equal gutter and margin width of 24px.

Resizing the screen's width does not affect the gutter and margin; the change occurs only to the columns width.

The Grid is based on an 8 pixels module. That means every space, width and height is in a duplicate of 8.

The distance between two elements can be either 8 pixel, 16, 24 pixel and so on.

Nested Grid

Furthermore, while using a side-menu, resizing will not affect the menu's columns.

UI Structure

The UI layout is composed of a Masthead, Content Canvas, and optional side panes.

Side Panes can be on either side of the Content Canvas and can stretch to the full height of the screen size. The side pane can be presented as a permanent display or temporarily.

Content Canvas, as well as side panes, can contain a secondary toolbar for titles, navigation, and other secondary actions.
Primary masthead area: 56px.

Secondary masthead area: 48px.

Titles / Toolbar Area: 88px.

Layered UI Approach

We utilize surfaces and shadows in our interfaces to create a sense of space and depth.

Surfaces and backgrounds in our products will use the monochromatic color palette. The lowest layer is the darkest and the highest layer is the lightest.

Elevation And Shadows

There are four content layers in our interfaces with their own shadow scheme.

The lowest layer is the background. And we use it as a desktop on which we place the other content layers.

The next layer presents the primary content and is placed on top of the background layer which has a darker shadow to it.

The third layer is used for side menus which has a lighter and larger shadow in order to give a feeling of hovering.

The fourth and final layer is in Micro Focus blue and it is used as the masthead. The layer has a very distant and transparent shadow.
In the animation above, the content canvas in the first layer responds to a mouse over
and elevates up to the second layer, where it's shadow changes accordingly

Selected Tile Behavior