Size and distance

OpenBridge assume a pixel independent format for setting the size of user interface components to make it scaled accurately on all screens.

Reference pixel

Our scaling corresponds to the rules set in the W3C and is based on reference pixels (Px).

"The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arms length (710mm), 1px thus corresponds to about 0.26 mm (1/96 inch).

A reading distance of 71 cm (28 inches) results in a reference pixel of 0.26 mm, while a reading distance of 3.5 m (12 feet) results in a reference pixel of 1.3 mm."

Retrieved 14.11.2019,

Pixels and millimeters

Recalculate the px values by measuring the actual sizes on the screen that will be used. (Note: The buttons in OpenBridge is 40px plus an 8 px safe frame, making them in total 48px (15mm height) in correspondence with regulation. All touchable components have 48px space.

1px = 0,313 mm

1mm = 3,2 px

40px = 12,5 mm

Responsive principles

The OpenBridge Design System uses standard web responsive principles. Content and containers are stacked differently to fit different screen sizes and formats.

Push vs overlay

The Sidebar will push and resize the page (content) on wider screens. When the screen size is smaller, the Sidebar will overlap the page. On even smaller screens, the sidebar will take the full screen.


On wide screens, the content are arranged from left to right. When the screen size get smaller, it will stack the content from top to bottom.

Split - Tab

Pages are usually stacked in tabs, but can also run in split screen on large screen sizes (optional).

Master - detail view

Sections like Settings are arranged in a Master-Detail structure. On wide screen sizes two or more levels in the Settings-hierarchy are visible and stacked from left to right. When window is resized to a smaller screen, the master page will collapse, and the detail screen will go full screen. If there is three or more setting layers visible, it will collapse the topmost layer first (starting from the left side).