Colors
The OpenBridge Design system organizes colors into types of colors reflecting the function each color has in an application. This makes it easier to develop and change between in a more consistent way.
In the OpenBridge Design System we are working on a predefined palette set for bright, day, dusk and night. The goal is to develop palettes that both meets class regulations and OpenBridge requirements. The palettes also works as examples on how to use the color system.
Color definitions
A list with all base Colors in the design system. The colors are divided into three main categories; UI colors, Instrument colors and Alert colors.
UI colors
UI colors are the basic colors used for ui text, icons, containers and border in the design system.
Instrument colors
Instrument colors are used for instrument text and graphics, visualising output and input data from the system.
Alert colors
Alert colors are used for text and graphics related to alerts. They can also be applied on instrument texts.
Element colors
The element color is the inversed version of the background color (white on black background and black on white background). It is used for icons, static elements and text throughout the UI. The element color appears in three different variations: Active, Neutral, Disabled.
The inverted element color is the inverted version of the element color. It is used for elements displayed on a surface where the regular element color has insufficient contrast to the background. Use version that gives the best contrast to the background.
Active
Used for active elements like text, selected icons, headings and static instrument text. Elements that are static but needs to be highlighted in the UI.
Active inverted
Used for active elements like text, selected icons, headings and static instrument text. Elements that are static but needs to be highlighted in the UI.
Neutral
Used for static, unselected icons, elements and title texts.
Disabled
Disabled text and elements that are disabled / unavailable and placeholder text.
Container colors
The surface colors are used as backgrounds behind text and elements. There are different surface colors to separate different areas related to different levels in the user interface. By separating into different areas you make it easier to structure the content in the UI, and to give the components a context.
Backdrop
The backdrop container color is only used when there are multiple background colored areas associated with different functions. This could be as a background in widget areas, where the widgets are separate functions with no direct relation.
Background
The background container color is the most used and most dominant container color in the system. The main area where the content and information in each application will be displayed, uses the background color.
Section
The section container color should be used for side and bottom bars. This is mainly areas where there user can do actions to interact with the application, like settings, configuration, zooming etc. This color is used for separating application level-functionality from global menus.
Global
The global container color is used for areas related to the topmost level in the application hierarchy, where you can access global functions and navigate through the top level in the application.
Instrument
The instrument container color is used as a background color in instrument graphics. They appear on top of a background color.
Border colors
There are different kind of borders with different purposes used in the system: Outlines and Dividers. Outlines are used to separate content with no relation, and dividers are used to separate related content. The Outline border should be more visible and clearer than the divider color.
Outline
Outlines are used to separate content from each other to make it easier for the user to understand the relation or non-relation between content displayed on the same screen. The combination of using container colors and outlines will create natural sections and hierarchy to the content displayed at the same time.
Divider
Dividers appears between equal elements. In situations where there are list items with multiple columns in a row (for instance an icon + label item), and the distance between the rows is relatively equal or smaller than between the columns, a divider can be used to separate the list items.
Instrument colors
The UI colors are used to highlight dynamic data, active elements, selected components, components in use, and more. It is a pair of two colors - one used to display output data and current system state, and one to display user input waiting for the system to respond.
Static
The static color is used for static data texts and graphics.
Dynamic
The dynamic color is used for active elements like dynamic instrument data texts and graphics.
Input
The input color is used for situations where the system needs time to respond to the users input, and you want to display both the user input value and the current value in the system.
Alert colors
The alert colors is used to highlight the different levels of alerts displayed in the system. This is four main levels of alerts: Alarm, warning, caution and OK/ Running. This is a category of colors that is regulated, and have to be a specified type of color.
Running color
The running color is used for processes where it is important that the process is running properly, and has a "running" state. This can be processes with startup time, where there is important to signify the difference between a starting process and a running process.
Caution color
The caution color have to be yellow. Make sure the yellow color is easy to separate from the warning color, but does not blend into the background color.
Warning color
The warning color have to be orange. Make sure the orange color is easy to separate from the alarm color.
Alarm color
The alarm color is only used for system alarms. This have to be a unique color to make it visually stand out in the interface when an alarm pops up in the system. Due to regulations, this color have to be red.
Colors
The OpenBridge Design system organizes colors into types of colors reflecting the function each color has in an application. This makes it easier to develop and change between in a more consistent way.
In the OpenBridge Design System we are working on a predefined palette set for bright, day, dusk and night. The goal is to develop palettes that both meets class regulations and OpenBridge requirements. The palettes also works as examples on how to use the color system.
Colors
A list with all base Colors in the design system.
UI colors
The UI colors are used to highlight dynamic data, active elements, selected components, components in use, and more. It is a pair of two colors - one used to display output data and current system state, and one to display user input waiting for the system to respond.
Dynamic color
The main color in the color system is the dynamic color. This is used for active elements like dynamic instrument data texts and graphics.
User input color
The input color is used for situations where the system needs time to respond to the users input, and you want to display both the user input value and the current value in the system.
Alert colors
The alert colors is used to highlight the different levels of alerts displayed in the system. This is four main levels of alerts: Alarm, warning, caution and OK/ Running. This is a category of colors that is regulated, and have to be a specified type of color.
Running color
The running color is used for processes where it is important that the process is running properly, and has a "running" state. This can be processes with startup time, where there is important to signify the difference between a starting process and a running process.
Caution color
The caution color have to be yellow. Make sure the yellow color is easy to separate from the warning color, but does not blend into the background color.
Warning color
The warning color have to be orange. Make sure the orange color is easy to separate from the alarm color.
Alarm color
The alarm color is only used for system alarms. This have to be a unique color to make it visually stand out in the interface when an alarm pops up in the system. Due to regulations, this color have to be red.
Surface colors
The surface colors are used as backgrounds behind text and elements. There are different surface colors to separate different areas related to different levels in the user interface. By separating into different areas you make it easier to structure the content in the UI, and to give the components a context.
Backdrop surface
The backdrop surface color is only used when there are multiple background colored areas associated with different functions. This could be as a background in widget areas, where the widgets are separate functions with no direct relation.
Background surface
The Background surface color is the most used and most dominant surface color in the system. The main area where the content and information in each application will be displayed uses the background color.
Section surface
The Application level surface color should be used for side and bottom bars. This is mainly areas where there user can do actions to interact with the application, like settings, configuration, zooming etc. This color is used for separating application level-functionality from global menus.
Global surface
The Global surface color is used for areas related to the topmost level in the application hierarchy, where you can access global functions and navigate through the top level in the application.
Borders
There are different kind of borders with different purposes used in the system: Outlines and Dividers. Outlines are used to separate content with no relation, and dividers are used to separate related content. The Outline border should be more visible and clearer than the divider color.
Outline
Outlines are used to separate content from each other to make it easier for the user to understand the relation or non-relation between content displayed on the same screen. The combination of using surface colors and outlines will create natural sections and hierarchy to the content displayed at the same time.
Divider
Dividers appears between equal elements. In situations where there are list items with multiple columns in a row (for instance an icon + label item), and the distance between the rows is relatively equal or smaller than between the columns, a divider can be used to separate the list items.
On background
The OnBackground color is the inversed version of the background color (white on black background and black on white background). It is used for icons, static elements and text throughout the UI. The OnBackground color appears in four different levels: Active, Neutral, Disabled and Hinted.
Active
Used for active elements like text, selected icons, headings and static instrument text. Elements that are static but needs to be highlighted in the UI.
Neutral
Used for static, unselected icons and elements.
Disabled
Disabled text and elements that are disabled / unavailable.
Hinted
Not used for text, but as a background color in graphical objects.
On primary
The OnPrimary color is used on text and elements displayed on top of a primary colored surface to make sure that the text or element has sufficient contrast to the primary color.
Active
Show alarm color in use
Normal
Show warning color in use
Disabled
Show warning color in use