Color system

The color green is primarily used for success actions. For example, a green notification visualizes that an action, such as successfully saving data, immediately tells the user that the data has been saved, even without reading it. Also, during error validation, such as when data is entered into an input field, the color green signals that the input is valid.

The color green is also used as a signal color for the so-called primary button.

Red is mainly used for error messages and thus immediately shows if for example an editor cannot be opened for a certain reason or a page cannot be saved. It is also shown during error validation when as an example an input does not correspond to the default (such as not using any letters in the number field).

The color red is also used to visualize mandatory fields or as a signal color for so-called badges on the shopping cart and/or message client in the sidebar.

If the color yellow is displayed in the system, a warning message is signaled to the user. This means that there is not yet a serious error that would prevent saving for example.

The color orange is used to visualize required fields. These are expected to be filled in, but it is not mandatory.

In the OMN system, blue can occur in three color variants, as light blue, blue or dark blue. Light blue is used for hover effects and blue for selections or an activated state of an element (e.g. filter). Dark blue is used only in case of keyboard navigation. Dark blue is used as the so-called focus color so that the user can recognize which object is currently in focus, but does not have to select it directly.

The color gray can be found in many places in OMN, but is used in certain situations as an action and signal color. For example, in special cases it indicates inactivity (e.g. buttons) or a hover effect. Also, gray is used for the secondary action button (cancel functions).