Base by AppDirect

Guidelines

Foundational principles, guidelines and styles

Typography

Use Helvetica Neue for the generic type face. Arial is the prefered typeface for forms and content. Our PX / EM ratio is 14px/1.6em. You can convert your project to the correct size with a Pixel to Em Converter

The example displays: font-size in px/em ratio|line height in px

Titles

For titles the PX / EM ratio is 14px/1.4em. The title xxxxxlarge should be used rarely.

bold 42px/1.4em|58.8px Title 0.

bold 24px/1.4em|33.6px Title 1.

bold 20px/1.4em|28px Title 2.

bold 18px/1.4em|25.2px Title 3.

bold 16px/1.4em|22.4px Title 4.

bold 14px/1.4em|19.6px Title 5.
bold 12px/1.4em|16.8px Title 6.
<h1 class="adb-title__xxxxxlarge">Title 0.</h1>
<h1>Title 1.</h1>
<h2>Title 2.</h2>
<h3>Title 3.</h3>
<h4>Title 4.</h4>
<h5>Title 5.</h5>
<h6>Title 6.</h6>

Paragraphs

Alias consequatur aut perferendis sit. voluptatem accusantium doloremque aperiam eaque. ipsa quae ab illo inventore. veritatis et quasi architecto beatae. vitae dicta sunt explicabo aspernatur 14px/1.4em|12.25px 

<p>
  Aut odit aut fugit sed. quia consequuntur magni dolores eos. qui ratione voluptatem sequi nesciunt. neque dolorem ipsum quia dolor. sit amet consectetur adipisci velit
</p>

Quotes

Sed quia non numquam eius. modi tempora incidunt ut labore. et dolore magnam aliquam quaerat. voluptatem ut enim ad minima. veniam quis nostrum exercitationem ullam 
<blockquote>
  Corporis nemo enim ipsam voluptatem. quia voluptas sit suscipit laboriosam. nisi ut aliquid ex ea. commodi consequatur quis autem vel. eum iure reprehenderit qui in
</blockquote>

Links

Here is a sentence. This is a link. 

<p>
  Here is a sentence.
  <a>
    This is a link.
  </a>
</p>

Lists

Unordered List

  • Ea voluptate velit esse quam
  • Nihil molestiae et iusto odio
  • Dignissimos ducimus qui blanditiis praesentium
  • Laudantium totam rem voluptatum deleniti
  • Atque corrupti quos dolores et 
<ul>
  <li>
    Quas molestias excepturi sint occaecati
  </li>
  <li>
    Cupiditate non provident sed ut
  </li>
  <li>
    Perspiciatis unde omnis iste natus
  </li>
  <li>
    Error similique sunt in culpa
  </li>
  <li>
    Qui officia deserunt mollitia animi
  </li>
</ul>

Ordered List

  1. Id est laborum et dolorum
  2. Fuga et harum quidem rerum
  3. Facilis est et expedita distinctio
  4. Nam libero tempore cum soluta
  5. Nobis est eligendi optio cumque 
<ol>
  <li>
    Nihil impedit quo porro quisquam
  </li>
  <li>
    Est qui minus id quod
  </li>
  <li>
    Maxime placeat facere possimus omnis
  </li>
  <li>
    Voluptas assumenda est omnis dolor
  </li>
  <li>
    Repellendus temporibus autem quibusdam et
  </li>
</ol>

List with Icon Bullets

Add .check class to li elements for green checks and .x for red X marks.

  • Mauris ullamcorper mi et imperdiet pellentesque.
  • Praesent ullamcorper magna in pulvinar dictum.
  • Maecenas bibendum massa vel felis tristique, vitae vestibulum nunc volutpat.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Nulla dignissim purus eleifend ipsum vehicula, id auctor mauris malesuada.
  • Etiam semper turpis quis nulla ullamcorper, venenatis varius arcu vestibulum.
  • Sed mollis libero at orci tempus, sed pulvinar ipsum hendrerit. 
<ul class="adb-icon_list">
  <li class="adb-icon_list--check">
    Mauris ullamcorper mi et imperdiet pellentesque.
  </li>
  <li class="adb-icon_list--x">
    Praesent ullamcorper magna in pulvinar dictum.
  </li>
  <li class="adb-icon_list--check">
    Maecenas bibendum massa vel felis tristique, vitae vestibulum nunc volutpat.
    <ul>
      <li class="adb-icon_list--x">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </li>
      <li class="adb-icon_list--x">
        Nulla dignissim purus eleifend ipsum vehicula, id auctor mauris malesuada.
      </li>
    </ul>
  </li>
  <li class="adb-icon_list--x">
    Etiam semper turpis quis nulla ullamcorper, venenatis varius arcu vestibulum.
  </li>
  <li class="adb-icon_list--check">
    Sed mollis libero at orci tempus, sed pulvinar ipsum hendrerit.
  </li>
</ul>

Attributes

Default

Company 12px/1.4em|10.5px
AppDirect
<dl>
  <dt>Company</dt>
  <dd>AppDirect</dd>
</dl>

Inline

Company:
AppDirect
<dl>
  <div class="adb-description_line">
    <dt>Company:</dt>
    <dd>AppDirect</dd>
  </div>
</dl>

Time

<time>
  01/02/2013 4:56 PM
</time>

<time>
  Monday, January 2, 2013, 4:56 PM
</time>

Code

Inline Code

Use monospace, serif for the code font face.

Please apply .class_name to the following elements. 

<p>
  Please apply
  <code>.class_name</code>
  to the following elements.
</p>

Code Blocks

Aut consequatur vel illum qui. dolorem eum fugiat quo voluptas. nulla pariatur at vero eos. et accusamus officiis debitis aut. rerum necessitatibus saepe eveniet ut
<pre>Et voluptates repudiandae sint et. molestiae non recusandae itaque earum. rerum hic tenetur a sapiente. delectus ut aut reiciendis voluptatibus. maiores doloribus asperiores repellat repellat</pre>

Subtitles

This is a title.

This is a subtitle.

<p class="title3">This is a title.</p>
<p class="adb-subtitle">This is a subtitle.</p>

Captions

Default

4/5 based on 3 reviews 
<div class="adb-rating">
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__unrated"></i>
  <i class="adb-rating--icon adb-rating--icon__unrated"></i>
</div>
<div class="adb-caption">
  4/5 based on 3 reviews
</div>

Image Captions

This is a caption.
<figure>
  <img src="../../images/content/product-feature.png?1625765173" />
  <figcaption class="adb-caption">This is a caption.</figcaption>
</figure>

See Form Overview for examples of form captions.

Footnotes

Alias consequatur aut perferendis sit. voluptatem accusantium doloremque aperiam eaque. ipsa quae ab illo inventore. veritatis et quasi architecto beatae. vitae dicta sunt explicabo aspernatur

This is a footnote. 

<p>
  Aut odit aut fugit sed. quia consequuntur magni dolores eos. qui ratione voluptatem sequi nesciunt. neque dolorem ipsum quia dolor. sit amet consectetur adipisci velit
</p>
<p class="adb-footnote">
  This is a footnote.
</p>

See Form Overview for examples of form footnotes.