Our new design language is in rapid iteration.
Refer to the PDF for full details.
Download latest design manual

Type

Aktive Grotesk is our primary typeface family.

Example Element Description

Heading 1

 
<h1 class="ace-h1">
 The main heading

Heading 2

 
<h2 class="ace-h2">
 Second level heading

Heading 3

 
<h3 class="ace-h3">
 Third level heading

Heading 4

 
<h4 class="ace-h4">
 Fourth level heading
Heading 5
 
<h5 class="ace-h5">
 Fifth level heading
Heading 6
 
<h6 class="ace-h6">
 Sixth level heading

Body

 All body copy and other default text

Emphasis

 
<em class="ace-em">
 Used in body type to highlight important information

Underline 

<u class="ace-u">
 Used in body type to underline information

Strong Emphasis

 
<strong class="ace-strong">
 Used within body type to highlight important information

Small text

 
<small class="ace-small">
 Used to reduce the visual weight of less important information

Link 

<a href="http://example.com/" class="ace-link"><span class="ace-text">Link</span></a>
 Inline link used to differentiate an interactive element in a paragraph of text, and most often opening a new page.

Subtle link 

<a href="http://example.com/" class="ace-subtlelink"><span class="ace-text">Subtle link</span></a>
 Subtle Link is used to deemphasize as not to distract from primary actions on current view. It will use the same color as its container and share the aktiv-medium font family.
  • item 1
  • item 2
  • item 3
 

                                                                    <ul class="ace-ul">
                                                                      <li>item 1</li>
                                                                      <li>item 2</li>
                                                                      <li>item 3</li>
                                                                    </ul>
 ace-ul is used to style ul's as bullet lists
  1. item 1
  2. item 2
  3. item 3
 

                                                                    <ol class="ace-ol">
                                                                      <li>item 1</li>
                                                                      <li>item 2</li>
                                                                      <li>item 3</li>
                                                                    </ol>
 ace-ol is used to style ol's as numbered lists