A layout offers versatile ways of presenting and structuring content to create a balanced user experience.


When to use

The layout and app structure is the foundation for designing applications in MindSphere.


There are the following layout types:

Fullscreen layout

Use the fullscreen layout to view and manage large sets of data, forms, charts or other types of visualization.

Fullscreen layout


Edit-mode in fullscreen

Fullscreen detail page used for managing large sets of data and comparing values.

Detail page in fullscreen

Use this layout for master detail layouts.

Sidebar left layout with leading region


Master detail layout

Use this layout if additional information or components in a context region are needed.

Sidebar right layout with context region


Sidebar right layout with additional information

Two sidebars layout

Use this layout if a leading region and additional information or components in a context region are needed.

Two sidebars layout


Extended layout

General construction

A layout consists of the following elements:

1. Global region, 2. Local region, 3. Leading region, 4. Main region, 5. Context region

1. Global region

  • Use the global region for the MindSphere OS Bar.

2. Local region

  • Use the local region for the app bar which is the first level navigation within an application.

3. Leading region

  • The leading region is mainly used for the content navigation and selection.

4. Main region

  • The main region contains the main content of the current page.

5. Context region

  • The context region is used for additional information and components.

The global and the main region are required in all parts of an application, all other regions are optional.


Screen sizes (Breakpoints)

Breakpoints are the point at which your application will respond to different screen sizes to provide best user experience.

Screen sizes Breakpoints
xs max-width 599px
sm 600px - 959px
md 960px - 1279px
lg 1280px - 1919px
xl 1920px - infinite

Region behavior

Desktop and tablet (landscape) screens

Region behavior on desktop and tablet (landscape) screens

Mobile and tablet (portrait) screens

Region behavior on mobile and tablet (portrait) screens: 1. Main region visible, 2. Local region active, 3. Leading region active, 4. Context region active

Responsive behavior

Mobile size and tablet portrait size

To use the limited screen area of a mobile device, the vertical app bar changes into a horizontal version with a menu selection function and the sidebar toggle buttons. The sidebars overlay the content.

1. Default mobile view, 2. App bar drop-down (local region), 3. Sidebar left active (leading region), 4. Sidebar right active (context region)

Tablet landscape size

In the tablet view there are two behavior options for the sidebar (in leading region or context region): Content pushed and content overlaid. It depends on the use case which behavior makes sense.

Sidebar collapsed with toggle button in tablet screen

Content pushed

The sidebar can be persistent visible and the content of the main region resizes. With the region toggle button (1) you can slide in the sidebar or collapse it.

Sidebar with content pushed

Content overlaid

The sidebar can be temporary visible and slides over the content. The width and position of the content of the main region stay the same. With the region toggle button (1) you can slide in the sidebar. The sidebar disappears again optionally on click on a navigation item (2) or on click elsewhere outside the sidebar.

Sidebar with content overlaid

Desktop size

On desktops the sidebar is visible by default and can be toggled by clicking the toggle button. The content gets pushed by the sidebars.

Sidebar with toggle button in desktop screen

The clickable area of the toggle button extends in full sidebar height next to the sidebar. It gets highlighted on mouseover.

Toggle button in desktop screen with mouseover

Do’s & Don’ts


  • Ensure a simple navigation structure.
  • Don’t use more than one app bar or navigation component.


  • Only one sidebar at a time can be active on mobile size.
  • Don’t activate two sidebars at a time.


This chapter shows several layout styles in the design system.


Edit form example (Fullscreen layout)

Master detail layout example (Sidebar left layout)

Additional information example (Sidebar right layout)

Extended layout example (Two sidebars layout)

Sidebars collapsed on tablet size

Leading region slides over the content on tablet size


The following table gives reference to the different colors and shades:

Region State Property Color name Modification
Leading/Context region all Background color Gray 100  
Leading/Context region all Border color Gray 400  
Leading/Context region all Shadow Black 0 0px 8px 0; rgba(0,0,0,0.3)
Region toggle button icon all Foreground color Gray 800  
Region toggle button all Background color White  
Region toggle button mouseover Background color Gray 100  
Region toggle button tablet all Border color Gray 400  
Region toggle button tablet all Shadow Black 0 1px 3px 0; rgba(0,0,0,0.08)

Sizing and spacing

The following measurements show the dimensions of the layout:

Basic layout elements

Sizing of local region and leading region

Sizing of context region

Spacing for main region on desktop and tablet size

Spacing for main region in a master detail layout example

Spacing for main region on mobile size (less than 768px)

Horizontal and vertical spacing

The standard horizontal spacing is an increment of 4px.

Horizontal spacing

The standard vertical spacing starts at 2px and increases by 4px and later by 8px.

Vertical spacing

Region toggle button

Sizing and spacing for region toggle button on tablet

Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top