OpenBridge
Design Guidelines
Application design

Palettes

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.

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.

Bright
Day
Dusk
Night
Color name
RGBa
HEX
Opacity
UI colors
ui-dynamic
rgb (0, 0, 255)
#0000FF
100%
ui-input
rgb (255, 200, 0)
#FFC800
100%
Alert colors
alert-running
rgb (0, 210, 0)
#00D200
100%
alert-caution
rgb (0, 210, 0)
#00D200
100%
alert-warning
rgb (255, 160, 0)
#FFA000
100%
alert-alarm
rgb (255, 40, 0)
#FF2800
100%
Surface colors
surface-backdrop
rgb (187, 187, 187)
#BBBBBB
100%
surface-background
rgb (255, 255, 255)
#FFFFFF
100%
surface-section
rgb (234, 234, 234)
#EAEAEA
100%
surface-global
rgb (213, 213, 213)
#D5D5D5
100%
Border colors
border-divider
rgba (0, 0, 0, 0.12)
#000000
12%
border-outline
rgba (0, 0, 0, 0.2)
#000000
20%
On background colors
on-background-active
rgba (0, 0, 0, 0.9)
#000000
90%
on-background-unfocused
rgba (0, 0, 0, 0.7)
#000000
70%
on-background-raised
rgba (0, 0, 0, 0.7)
#000000
70%
on-background-disabled
rgba (0, 0, 0, 0.3)
#000000
30%
on-background-indent
rgba (0, 0, 0, 0.12)
#000000
12%
on-background-hinted
rgba (0, 0, 0, 0.06)
#000000
6%
On primary colors
on-primary-active
rgb (255, 255, 255)
#FFFFFF
100%
on-primary-normal
rgba (255, 255, 255, 0.7)
#FFFFFF
70%
on-primary-disabled
rgba (255, 255, 255, 0.3)
#FFFFFF
30%
Color name
RGBa
HEX
Opacity
UI colors
ui-primary
rgb (0, 0, 255)
#0000FF
100%
ui-input
rgb (255, 200, 0)
#FFC800
100%
Alert colors
alert-running
rgb (0, 210, 0)
#00D200
100%
alert-caution
rgb (0, 210, 0)
#00D200
100%
alert-warning
rgb (255, 160, 0)
#FFA000
100%
alert-alarm
rgb (255, 40, 0)
#FF2800
100%
Surface colors
surface-backdrop
rgb (187, 187, 187)
#BBBBBB
100%
surface-background
rgb (255, 255, 255)
#FFFFFF
100%
surface-section
rgb (234, 234, 234)
#EAEAEA
100%
surface-global
rgb (213, 213, 213)
#D5D5D5
100%
Border colors
border-divider
rgba (0, 0, 0, 0.12)
#000000
12%
border-outline
rgba (0, 0, 0, 0.2)
#000000
20%
On background colors
on-background-active
rgba (0, 0, 0, 0.9)
#000000
90%
on-background-unfocused
rgba (0, 0, 0, 0.7)
#000000
70%
on-background-raised
rgba (0, 0, 0, 0.7)
#000000
70%
on-background-disabled
rgba (0, 0, 0, 0.3)
#000000
30%
on-background-indent
rgba (0, 0, 0, 0.12)
#000000
12%
on-background-hinted
rgba (0, 0, 0, 0.06)
#000000
6%
On primary colors
on-primary-active
rgb (255, 255, 255)
#FFFFFF
100%
on-primary-normal
rgba (255, 255, 255, 0.7)
#FFFFFF
70%
on-primary-disabled
rgba (255, 255, 255, 0.3)
#FFFFFF
30%

UI colors

About the UI colors

Dynamic color

Show primary color in use

User input color

Show User Input color in use

Alert colors

About the UI colors

Alarm color

Show alarm color in use

Warning color

Show warning color in use