UI MarCom 3

States

States display to the user the status of an interactive component.

They are defined visual appearances during the interaction. The UI MarCom states concept defines five types of states for both light and dark theme:

  • Initial: shows the default status of a component while no interaction is being executed.
  • Hover: shows the status when the cursor is placed over a component without activating or selecting it. The hover state is darker in light theme and brighter in dark them than the initial state, except for text- or icon in standard color which becomes orange in both themes.
  • Focus: shows the status when a component is emphasized e.g. using the keyboard. It turns up as a 2px border in 50% Healthy Orange.
  • Active: shows the state when a component is activated. It appears twice as dark as the hover state in light theme or rather bright in dark theme and it also can appear in orange in both themes – depending on size and importance.
  • Disabled: shows the status of a component that cannot be interacted with. Disabled components are displayed with 40% opacity.

The state indicator of a component is either the background color, the text- or icon color, or the tab line in the navigation. Based on this, the states concept is divided into four areas in which the states are defined accordingly.

Neutral colored background areas

The state indicator is a neutral background color in light or dark theme.

Neutral colored background areas light-type-1-default Neutral colored background areas light-type-1-hover Neutral colored background areas light-type-1-focus Neutral colored background areas light-type-1-active Neutral colored background areas light-type-1-disabled

Neutral colored background areas dark-type-1-default Neutral colored background areas dark-type-1-hover Neutral colored background areas dark-type-1-focus Neutral colored background areas dark-type-1-active Neutral colored background areas dark-type-1-disabled

Brand colored background areas

The state indicator is the brand color Healthy Orange.

Brand colored background areas-light-type-2-default Brand colored background areas-light-type-2-hover Brand colored background areas-light-type-2-focus Brand colored background areas-light-type-2-disabled

Brand colored background areas-dark-type-2-default Brand colored background areas-dark-type-2-hover Brand colored background areas-dark-type-2-focus Brand colored background areas-dark-type-2-disabled

Strong neutral colored foreground items

The state indicator is the standard colored text- or icon in light or dark theme.

Strong neutral colored foreground items-light-type-3-default Strong neutral colored foreground items-light-type-3-hover Strong neutral colored foreground items-light-type-3-focus Strong neutral colored foreground items-light-type-3-active Strong neutral colored foreground items-light-type-3-disabled

Strong neutral colored foreground items-dark-type-3-default Strong neutral colored foreground items-dark-type-3-hover Strong neutral colored foreground items-dark-type-3-focus Strong neutral colored foreground items-dark-type-3-active Strong neutral colored foreground items-dark-type-3-disabled

Restraint neutral colored foreground items

The state indicator is the grayed-out text- or icon color in light or dark theme – in navigation components supplemented by a tab line.

Restraint neutral colored foreground items-light-type-4-default Restraint neutral colored foreground items-light-type-4-hover Restraint neutral colored foreground items-light-type-4-focus Restraint neutral colored foreground items-light-type-4-active Restraint neutral colored foreground items-light-type-4-disabled

Restraint neutral colored foreground items-light-type-4-default Restraint neutral colored foreground items-light-type-4-hover Restraint neutral colored foreground items-light-type-4-focus Restraint neutral colored foreground items-light-type-4-active Restraint neutral colored foreground items-light-type-4-disabled