Typography

Headlines

<h1>Headline 1</h1>
<h2>Headline 2</h2>
<h3>Headline 3</h3>
<h4>Headline 4</h4>
<h5>Headline 5</h5>

Subtitles

Use: subtitles, names of screens and modals, Subtitle 2 is prefered over subtitle 1 for better readability, but it is possible to use Subtitle 1 on the screens which are heavy with elements and information

<p class="subtitle-3">Subtitle 3</p>
<p class="subtitle-2">Subtitle 2</p>
<p class="subtitle-1">Subtitle 1</p>

Body

Paragraph spacing: 5 Use: main text, button text Body 2 and 3 are prefered over body 1 for better readability, but it is possible to use Body 1 on the screens which are heavy with elements and information

Attention: You can remove the padding classes (p-5) here, they are present for a better spacing between the sample elements.

<p class="body-3 p-5">Body 3</p>
<p class="body-2 p-5">Body 2</p>
<p class="body-1 p-5">Body 1</p>

Button

Attention: You can remove the padding classes (p-5) here, they are present for a better spacing between the sample elements.

<p class="button-2 p-5">Button 2</p>
<p class="button-1 p-5">Button 1</p>

Table Header

Attention: You can remove the padding classes (p-5) here, they are present for a better spacing between the sample elements.

<p class="table-header-2 p-5">Table Header 2</p>
<p class="table-header-1 p-5">Table Header 1</p>

Caption

Attention: You can remove the padding classes (p-5) here, they are present for a better spacing between the sample elements.

<p class="caption">Caption</p>