Back to overview

Information and status

Activity indicator

Activity indicator  

Activity indicator

The activity indicator is horizontally and vertically centered in the surrounding element.

The spacing for both height and width is 5.8 rem.

The primary color of the activity indicator is #66686E. The application modifies the primary color of the individual slats and allows them to rotate.

Back to top

Splash screen

Splash screen  

Splash screen spacing

A splash screen is displayed when an app starts.

The logo appears in the center of the screen. The title of the application is centered to the left of the logo.

The font is based on FontDefault with the following exceptions:

  • Size: 2 rem
  • Line height: not defined, as text can only cover one line
Back to top
DescriptionValue: smartphoneValue: tablet
Logo width (a)21.1 rem41.5 rem
Upper spacing (b)11 rem13 rem
Spacing between logo and application title (c)11.5 rem16.5 rem

Text elements

Text elements  

Text element spacing

Text elements are combined with one another. The following combinations have been explicitly taken into account during the design:

  • Flowing text
  • Headline and flowing text or image or form
  • Headline and sub-headline and flowing text or image or form
  • Title and headline and sub-headline and flowing text
  • Headline and flowing text and sub-headline and flowing text or image or form and sub-headline and flowing text or image or form
Back to top
ElementDescription
Title
  • Upper spacing (A): 1.9 rem
  • Width: variable, 100% by default
  • Font: Headline H2, based on FontHeadline
Headline
  • Upper spacing (A): 1.9 rem
  • Lower spacing (B): 1 rem
  • Width: variable, 100% by default
  • Font: Headline H2, based on FontHeadline
Sub-headline
  • Upper and lower spacing (A): 1 rem
  • Width: variable, 100% by default
  • Font: Sub-Headline H3, based on FontDefault
Flowing text

In the case of consecutive paragraphs, several text elements are arranged one below the other. Text elements can also be separated from one another by horizontal dividing lines.

  • Upper spacing (A): 1.9 rem
  • Lower spacing (B): 1.5 rem
  • Width: variable, 100% by default
  • Font: RunningText, based on FontDefault
Bullet points

Bullet points are displayed by Unicode character • (code 0x2022) followed by a space. These two characters define the width of the area.

A flowing text container is located on the right of the bullet point container. Wrapped text is left-aligned in order to ensure consistent alignment.

  • Font: BulletPoints, based on FontDefault with a line height (text across several lines) of 2 rem
Description list

A description list structures content into lists. Instead of bullet points or reference numbers, the content is preceded by a term. The term is followed by the content:

A label or term appears on the left. A flowing text container appears on the right.

  • Upper spacing (A): 1.4 rem
  • Lower spacing (B): 1.55 rem
  • Distance from label (C): content at least 1.5 rem

If several elements of a description list are located one below the other, the contents are left-aligned.

  • Font: based on FontDefault.

Communication of advantages

Communication of advantages  

Communication of advantages spacing

With the communication of advantages you can create a list.

The font is based on FontDefault. The communication of advantages uses icons as resources.

  • Total width (a): variable, 100% by default
  • Total height (B): variable, dependent on number of lines
  • Upper icon spacing (C): 0.5 rem
  • Spacing between icon and text (d): 0.5 rem
  • Height and width of the icon: 2.4 rem
  • Upper text spacing (E): 1.2 rem
  • Lower text spacing (F): 1.15 rem
Back to top

PHOENIX CONTACT
GmbH & Co.KG

+49 5235 3-43862

Ulrich Becker

Information Architect