OpenBridge
Design Guidelines

Topbar

The top bar are present on all applications and offer a consistent way for accessing critical functions in an application. It consist of a navigation menu, application label aligned to the left. Alarm icon,dimming and palette icon, optional fields and an application launcher are aligned to the right. The optional field include application icons with direct link to programs and a time component. Find detailed definition here.

In use

The top bar are present on all applications and offer a consistent way for accessing critical functions in an application. It consist of a navigation menu, application label aligned to the left.

Normal topbar

The normal topbar looks like this...

Topbar with app shortcuts

The normal topbar looks like this...

App icons

Topbar with clock

The normal topbar looks like this...

Topbar with alert

The normal topbar looks like this...

Alert notificationAlerts

Anatomy

The top bar are present on all applications and offer a consistent way for accessing critical functions in an application. It consist of a navigation menu, application label aligned to the left.

Components
1
Topbar container
2
Topbar button
Details
3
Topbar title
Details
4
Topbar subtitle
Details
5
Border
Details

Colors

The top bar are present on all applications and offer a consistent way for accessing critical functions in an application. It consist of a navigation menu, application label aligned to the left.

Element
Color name
Color value
1
Topbar container
surface-global
rgb (213, 213, 213)
2
Border
border-outline
rgb (213, 213, 213)
3
Topbar icon
on-backgorund-normal
rgb (213, 213, 213)
4
Topbar title
on-backgorund-normal
rgb (213, 213, 213)
5
Topbar subtitle
on-backgorund-normal
rgb (213, 213, 213)
Bright palette

Typography

The top bar are present on all applications and offer a consistent way for accessing critical functions in an application. It consist of a navigation menu, application label aligned to the left.

Text category
Text attributes
1
Topbar title
Aa
Typeface: Open Sans
Weight: Bold
Size: 24px
2
Topbar subtitle
Aa
Typeface: Open Sans
Weight: Semibold
Size: 24px

Measures and spacing

The top bar are present on all applications and offer a consistent way for accessing critical functions in an application. It consist of a navigation menu, application label aligned to the left.

1
Component measures
2
Spacing
3
Border sizes