We also use the 8-pt methodology to control the vertical rhythm of our typography. Our base type size is 16px with a 1.5 line-height for optimal reading.


Sentences should be in sentence case unless it’s a proper noun. Links and buttons are title case. Headlines should be title case.

Font Stack

We use Typekit to deliver our fonts. We employ Proxima Nova as the typeface across the application.


Instead of targeting elements (for example: h1), we use classes. This means you can use semantic tags while still getting the style you need.


Type sizes

Extra large





Extra small


Small ghost


This text will be left-aligned. This is rarely needed.

This text will be centered.

This text will be right-aligned. This is rarely needed.

This text will be normal weight.

This text will be bold.

This will be our dangerous color.

<p class="t-xl">Extra large</p>
<p class="t-large">Large</p>
<p class="t-medium">Medium</p>
<p class="t-base">Base</p>
<p class="t-small">Small</p>
<p class="t-xs">Extra small</p>
<p class="t-ghost">Ghost</p>
<p class="t-ghost-small">Small ghost</p>
<a class="t-link" href="#">Link</a>
<p class="t-left">This text will be left-aligned. This is rarely needed.</p>
<p class="t-center">This text will be centered.</p>
<p class="t-right">This text will be right-aligned. This is rarely needed.</p>
<p class="t-normal">This text will be normal weight.</p>
<p class="t-heavy">This text will be bold.</p>
<p class="t-dangerous">This will be our dangerous color.</p>


Choose the heading size based on what semantically makes sense instead of type size. As long as you provide a class name, it’ll render correctly.


  • Limit the number varying typefaces in a container
  • Ensure there is clear type hierarchy
  • Use bold weight for headings and labels


  • Use bold styling on entire paragraphs, try using a heading with paragraph content
  • Use varying typefaces in a single content


  • Regular list item 1
  • Regular list item 2
  • Regular list item 3
  • Bullet list item 1
  • Bullet list item 2
  • Bullet list item 3
  • Numbered list item 1
  • Numbered list item 2
  • Numbered list item 3
  • Pipe delimited item 1
  • Pipe delimited item 2
  • Pipe delimited item 3
  <li>Regular list item 1</li>
  <li>Regular list item 2</li>
  <li>Regular list item 3</li>

<ul class="bulleted-list">
  <li>Bullet list item 1</li>
  <li>Bullet list item 2</li>
  <li>Bullet list item 3</li>

<ul class="numbered-list">
  <li>Numbered list item 1</li>
  <li>Numbered list item 2</li>
  <li>Numbered list item 3</li>

<ul class="pipe-delimited-list">
  <li>Pipe delimited item 1</li><li>Pipe delimited item 2</li><li>Pipe delimited item 3</li>

<hr class="horizontal-rule">

Keyboard shortcut

<kbd class="keyboard-shortcut">⌥</kbd>
<kbd class="keyboard-shortcut">⇧</kbd>
<kbd class="keyboard-shortcut">k</kbd>


  • Copy must be:
  • Distinguishable
  • Accessible to assistive tech
  • The visual presentation of text and images of text has a contrast ratio of at least 4.5:1