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.

Color definitions

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.

The colors are divided into three main categories; UI colors, Instrument colors and Alert colors. A detailed definition of all colors can be found in the Figma palette files below.

Bright 4.0Day 4.0Dusk 4.0Night 4.0

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.