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.


Links, buttons, headlines and sentences should be in sentence case unless it’s a proper noun.

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>

Table with tabular number formatting

Serial No. Product Price
29553321265184 Toaster oven 39.00
90948024787993 Charcoal grill 350.00
43677792107393 Medicine cabinet 120.00
<div class="table">
<table class="table table--stripe">
      <th class="table__header">Serial No.</th>
      <th class="table__header">Product</th>
      <th class="table__header">Price</th>
      <td class="t-tabular-alignment">29553321265184</td>
      <td>Toaster oven</td>
      <td class="t-tabular-alignment">39.00</td>
      <td class="t-tabular-alignment">90948024787993</td>
      <td>Charcoal grill</td>
      <td class="t-tabular-alignment">350.00</td>
      <td class="t-tabular-alignment">43677792107393</td>
      <td>Medicine cabinet</td>
      <td class="t-tabular-alignment">120.00</td>


  • 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