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...

Topbar with clock

The normal topbar looks like this...

Topbar with alert

The normal topbar looks like this...

Anatomy

Colors

Bright

Element

Color / Style name

1

Topbar container

color-ui-container-global

2

Border

color-ui-border-outline

3

Topbar icon

color-ui-element-neutral

4

Topbar title

color-ui-element-neutral

5

Topbar subtitle

color-ui-element-neutral

Typography

Bright

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