Type sizes is based off the 1.250 – Major Third scale. With Montserrat Bold (700) being the font used, and 18px being 1rem.

H1 – Page Title and Article Heading
Type Weight: Montserrat Bold (700)
Type Size: 3.052rem/54.93px
Line Spacing: 1.3em/71.409px

H2 – Chapter Heading Type
Weight: Montserrat Bold (700)
Type Size: 2.441rem/43.95px
Line Spacing: 1.3em/57.135px

H3 – Section Heading
Type Weight: Montserrat Bold (700)
Type Size: 1.953rem/35.16px
Line Spacing: 1.3em/45.708px

H4 – Information Box
Type Weight: Montserrat Bold (700)
Type Size: 1.563rem/28.13px
Line Spacing: 1.3em/36.569px

H5 – Card Title
Type Weight: Montserrat Bold (700)
Type Size: 1.25rem/22.50px
Line Spacing: 1.3em/29.25px

H6 – Special Use 1
Type Weight: Montserrat Bold (700)
Type Size: 0.80rem/14.40px
Line Spacing: 1.3em/18.72px

H7 – Special Use 2
Type Weight: Montserrat Bold (700)
Type Size: 0.64rem/11.52px
Line Spacing: 1.3em/14.976px

H8 – Limited Use
Type Weight: Montserrat Bold (700)
Type Size: 0.512rem/9.22px
Line Spacing: 1.3em/11.986px

P – Body Copy
Type Weight: Open Sans Regular (400)
Type Size: 1rem/18px
Line Spacing: 1.75em/31.5px

P – Body Copy Highlight
Type Weight: Open Sans Bold (700)
Type Size: 1rem/18px
Line Spacing: 1.75em/31.5px

List with Arrows
Type Weight: Open Sans Regular (400)
Type Size: 1rem/18px
Line Spacing: 1.75em/31.5px
Arrow Color: #CE262B
Arrow Line Weight: 2px

List with Numbers
Type Weight: Open Sans Regular (400)
Type Size: 1rem/18px
Line Spacing: 1.75em/31.5px
Number Color: #CE262B
Number Type Weight: Montserrat Bold (700)

Buttons can be used to show the user’s choice of options for actions and assign these to a clear hierarchy. The target page to be accessed or the action to be triggered is shown on the buttons by means of a label in Montserrat Bold – Sentence Case or else by an icon, or by a combination of the two. All buttons should provide visual feedback when clicked or tapped in the form of a response effect. We have three button variations shown below:

The size of buttons depends on the base font size used which can be adapted to the viewport width.

Button Shapes are rectangular with 6px rounded corners

The minimum width of primary and secondary buttons is defined as nine times the base font size. Thus, with a base font size of 18 px, the minimum button width is 9 × 18 px = 162 px. For buttons outside of the minimum width use padding of 24px on the sides and 8px on the top and bottom.

The filled-out primary button is used for the most important action on a page, section or in a view.

The text button is applied as a subtle call to action. The standard variant is a combination of text and arrow. It is possible to combine a text button with an icon or else omit an icon.

System icon buttons are used to trigger classic system interactions (e.g. settings, download, profile, menus etc.) The system icon button is transparent and should preferably be used without a label.

Forms are a particularly important interface between the user and RSF applications. They often appear at critical points in the user journey. For this reason, forms should be designed so that they can be easily understood and as few information points should be requested as possible. Optional questions bear a special marking in the form if they are unavoidable. The existing components are combined and grouped as required to create a form structure.

The size of the form element depends on the basic type size used, which can adapt to the viewport width in question. As such, it is flexible in size. The form elements are available in black and white.

Text fields consist of a label and a line. They can vary in width. When the user activates a text field, the label moves upwards, is reduced in size and leaves space for entry.

Text fields requiring certain data formats such as numbers, e-mail addresses or passwords are declared accordingly. This makes it easier for the user to enter information using a virtual keyboard.

Text fields can be combined with an icon.

Additional description of the information requested for the field can be put underneath the field like you see here. If no further clarification is needed then leave the area blank.

Multiple-line text fields can hold any amount of text and in doing so grow in height ahead of the user’s entries. The text quantity can be limited to a maximum number of characters if necessary and displayed by means of a countdown. Unlike other text fields, the label and entry text appear in a finely drawn frame.

Additional description of the information requested for the field can be put underneath the field like you see here. If no further clarification is needed then leave the area blank.

Form elements can be structured and grouped by means of interim headlines, white space, separation lines and blocks. Lengthier data requests should be subdivided into several stages so as to avoid potential data loss and in order to appear less daunting.

Form elements can be structured and grouped by means of interim headlines, white space, separation lines and blocks. Lengthier data requests should be subdivided into several stages so as to avoid potential data loss and in order to appear less daunting.

Additional description of the information requested for the field can be put underneath the field like you see here. If no further clarification is needed then leave the area blank.

Additional description of the information requested for the field can be put underneath the field like you see here. If no further clarification is needed then leave the area blank.

Erroneous entries are indicated by means of a red line, a red label, a red error description and, in the case of a group, with a red group headline.

Additional description of the information requested for the field can be put underneath the field like you see here. If no further clarification is needed then leave the area blank.