The icons in the navigation bar are centered vertically. They must not overlap with text. For this reason, only one icon is used on each page on smartphones. The text is cropped. The icons respond to tapping or clicking. They have the following states:
The font is based on FontHeadline. It covers one line and is horizontally centered.
The background has the color ColorLightBackground and the lower border the color ColorRule.
With paging, a distinction is made between the Normal and Checked states. They are indicated by different colors. In the Normal state the border is ColorBlueGreen and the background ColorBright. In the Checked state the border is ColorLineGrey and the background ColorBlueGreen.
The panning area enables the user to scroll by swiping. It is important here that the “Content follows finger” interaction principle is observed.
“Flicking” is the act of swiping quickly in one direction. In this case the content scrolls quickly at first, then gradually slower until it stops. The starting speed depends on the speed of the gesture. The movement is natural. It gives the impression that the user has physically pushed the content, which gradually slows down. The scrolling speed is proportional to the speed at which the finger moves across the screen.
The scrolling area is fixed. It is not rotated. The user does not go back to the start by scrolling past the end. The scrolling movement stops once the end of the area is reached.
If several panning areas are arranged one on top of the other, they are visually separated by a separator.
A panning indicator is arranged horizontally or vertically. The panning indicator is not permanently visible. It is shown when the system recognizes a scrolling action. Once this action ends, the panning indicator is hidden again after a short pause.
The scroll indicator sits vertically centered on the base.
The width of the base is the width of the container minus the spacing. The width of the scroll indicator is calculated based on the ratio of the scrollable area to the visible area.
The ratio of the scroll indicator to scroll indicator base must equal the ratio of the visible to scrollable area. The width of the scroll indicator is at least 1 rem.
The panning indicator baseline has the color ColorTrackBase. The panning indicator scroll indicator has the color ColorBlueGreen.
The menu consists of several components. There is just one title. This is located on the top border of the menu. The title text is defined by the application developer. Below it is a list. This can consist of one or more main entries. Main entries divide the entries into groups. A main entry contains at least one entry. After the user clicks on an entry the application opens the corresponding screen.
Alternatively, an entry may also open a submenu. A click on the entry moves the current menu left and off the screen and displays the submenu. The title is replaced by the option to navigate back. Clicking on the Back navigation restores the next highest menu (also animated).
If the menu is used on the right-hand side, it is mirrored horizontally.
The panning indicator has a width (a) of 1.1 rem and a variable height (B). The protected area (C) at the top and bottom corresponds to 0.05 rem.
The shading has a width (a) or 1.5 rem and a height of 100%. The background has the color ColorBright. The gradient has the color #002223 with an opacity of 0% on the left and the color #002223 with an opacity of 30% on the right.
The title dividing line has a width (a) of 27.5 rem and a height (E) of 0.05 rem. The title is based on font FontHeadline. The background has the color ColorLightBackground and the dividing line the color ColorRule.
The text is centered vertically. In the Normal state the font is based on FontClickable and in the Checked or Active states on FontClickableHighlight. The background has the color ColorSoftBackground. The gradient has the color ColorRule.
Main entries divide the menu into several sections. They have a unique label. There is at least one entry under a main entry.
The text of the main entry is based on font FontHeadline with the color ColorLightText. The background has the color ColorSoftBackground and the gradient the color ColorRule.
Menu entries divide the menu into several sections. They have a unique label in relation to all entries in the menu.
An icon can be added to an entry. When an entry opens a submenu, this must be identifiable by an arrow on the right-hand side.
In the Normal state the font is based on FontClickable and in the Checked or Active states on FontClickableHighlight. The background has the color ColorSoftBackground and the gradient the color ColorRule.
A popover appears over the content on the screen in response to a user action. Only one popover may be open at any one time. If several popovers are available on one screen, the user can open a popover directly without having to close the previous one. The previous popover must close automatically. Every action outside the open popover closes the window.
The orientation of the arrow on the popover depends on the control from which it was opened. The arrow points to the respective control. It can therefore be shown on all four sides of the popover.
The background has the color ColorBright. The border has the color Border. The dividing line between containers has the color ColorLineGray. The shading used (dropshadow effect in normal mode) has the color ColorBorder with an opacity of 100% (offset x/y: 0, blur: 5 pixels).
Multiple list entries are separated by a horizontal line. Its height (C) is 0.05 rem. The width is variable.
In the Normal state the font is based on FontClickable. In the Active and Visited states the font is based on FontClickableHighlight.
A dialog consists of a header with title on the top border, content, and an optional footer. A dialog appears over and covers the content on screen. The background is shaded.
The font of the title is based on FontHeadline. It is centered horizontally. The background has the color ColorLightBackground and the dividing line the color ColorRule.
The background has the color ColorBright.
All buttons must have the same width. All of the buttons are centered horizontally on the background. The footer background has the color ColorBright. The shaded background has the color ColorDark with an opacity of 80%.
In the Normal state the font is based on FontClickable. In the Active state the font is based on FontClickableHighlight.
The background has the color ColorBright. In the Normal state the border has the color ColorBorder and in the Active state the color ColorLightText.