We have two core fonts: Realtime Text and Proxima Nova.

Realtime Text is used for titles and elements (such as buttons), whereas Proxima Nova is used for paragraph text.

Title classes use the Greek alphabet as a naming convention. This allows the styled heading to be seperated from the semantic tag.

For example, an H1 and an H6 with a title--gamma class, will both visually look the same.

Page title (28px)

Section title - (24px)

Section sub-title - (22px)

Paragraph title - (18px)

Paragraph sub-title - (16px)

Paragraph heading - (12px)

<h1 class="title--alpha">H1 - Page title</h1>
<h2 class="title--beta">H2 - Section title</h2>
<h3 class="title--delta">H3 - Section sub-title</h3>
<h4 class="title--gamma">H4 - Paragraph title</h4>
<h5 class="title--epsilon">H5 - Paragraph sub-title</h5>
<h6 class="title--zeta">H6 - Paragraph heading</h6>

Utility Classes

These classes provide a quick way to change text color and alignment.

I will always be colored with the primary color

I will always be colored with the developer color

I will always be colored with the beta color

I will always be colored with the neutral snow color

I will always be colored with the neutral smoke color

I will always be colored with the neutral silver color

I will always be colored with the neutral slate color

I will always be colored with the neutral black color

I will always be colored with the ui danger color

I will always be colored with the ui warning color

I will always be colored with the ui success color

<span class="u-color-primary">I will always be colored with the primary color</span>
<span class="u-color-developer">I will always be colored with the developer color</span>
<span class="u-color-beta">I will always be colored with the beta color</span>
<span class="u-color-snow">I will always be colored with the neutral snow color</span>
<span class="u-color-smoke">I will always be colored with the neutral smoke color</span>
<span class="u-color-silver">I will always be colored with the neutral silver color</span>
<span class="u-color-slate">I will always be colored with the neutral slate color</span>
<span class="u-color-black">I will always be colored with the neutral black color</span>
<span class="u-color-danger">I will always be colored with the ui danger color</span>
<span class="u-color-warning">I will always be colored with the ui warning color</span>
<span class="u-color-success">I will always be colored with the ui success color</span>

I will be aligned centrally on desktop and tablet, and left aligned on mobile

<div class="u-text-align-center">
  <span>I will be aligned centrally on desktop and tablet, and left aligned on mobile</span>
</div>

I will be aligned to the right

<div class="u-text-align-right">
  <span>I will be aligned to the right</span>
</div>