Colors

Background

Panel content
Panel content
Panel content
Panel content

Light Tints/Shades

Panel content
Panel content
Panel content
Panel content
Panel content
Panel content
Panel content
Panel content

Border

Panel content

Text

Panel content
Panel content
Panel content
Panel content

Typography

Fonts

Avenir

<p class="font1">...</p>

Avenir

<p class="font2">...</p>

Headings

h1. heading (desktop) Avenir 300 52px

    <h1>...</h1>
    <p class="font-size-h1">...</p>

h1. heading (mobile) Avenir 300 32px

    <h1>...</h1>
    <p class="font-size-h1">...</p>

h2. heading (desktop) Avenir 300 42px

    <h2>...</h2>
    <p class="font-size-h2">...</p>

h2. heading (mobile) Avenir 300 33px

    <h2>...</h2>
    <p class="font-size-h2">...</p>

h3. heading (desktop) Avenir 300 36px

    <h3>...</h3>
    <p class="font-size-h3">...</p>

h3. heading (mobile) Avenir 300 32px

    <h3>...</h3>
    <p class="font-size-h3">...</p>

h4. heading (desktop) (mobile) Avenir 300 32px

<h4>...</h4>
<p class="font-size-h4">...</p>

h5. heading (desktop) (mobile) Avenir 300 24px
<h5>...</h5>
<p class="font-size-h5">...</p>

h6. heading (desktop) (mobile) Avenir 300 18px
<h6>...</h6>
<p class="font-size-h6">...</p>

Body Text Avenir 400 16px / line-height: 1.5

Lorem ipsum dolor sit amet, vim at nusquam gubergren elaboraret, vide meis oratio id quo. Sale ipsum placerat ne est. Qui mutat viris principes ei, solum sensibus suavitate no pri, at illud paulo his. Qui euismod volumus delicatissimi et, in ornatus corpora qui.

Esse utinam eam te, nec ut veniam postulant. Brute tractatos mel at, erroribus repudiare scriptorem est ex. Eum assum summo ludus ne, reque omittam ad duo, eam eripuit saperet et. Idque commodo legendos eu est, eam repudiare dissentiet ullamcorper ex. Ne posse erant tibique cum, sit veniam corpora inciderint ne.

<p>...</p>
<h4 class="font-size-base">...</h4>


Lists

Bulleted list:

  • list item 1
  • list item 2
  • list item 3

Ordered list:

  1. list item 1
  2. list item 2
  3. list item 3

font-weight

Lorem ipsum dolor sit amet.

font-weight: 300

<p class="fw-lite">...</p>

Lorem ipsum dolor sit amet.

font-weight: 400

<p class="fw-normal">...</p>

Lorem ipsum dolor sit amet.

font-weight: 600

<p class="fw-sbold">...</p>

Lorem ipsum dolor sit amet.

font-weight: 700

<p class="fw-bold">...</p>

Lorem ipsum dolor sit amet.

font-weight: 800

<p class="fw-xbold">...</p>

Helper Classes

Lorem ipsum dolor sit amet, vim at nusquam gubergren elaboraret, vide meis oratio id quo. Avenir 18px

<p class="font-size-large">...</p>

Lorem ipsum dolor sit amet, vim at nusquam gubergren elaboraret, vide meis oratio id quo. Avenir 14px

<p class="font-size-small">...</p>

Lorem ipsum dolor sit amet, vim at nusquam gubergren elaboraret, vide meis oratio id quo. Avenir 12px

<p class="font-size-fine">...</p>

a:hover { text-decoration: none }

<a href="" class="hover-dec-none">...</a>

Mobile Helper Classes

Lorem ipsum dolor sit amet, vim at nusquam gubergren elaboraret, vide meis oratio id quo. Avenir 24px

<p class="font-size-h4--m">...</p>

Lorem ipsum dolor sit amet, vim at nusquam gubergren elaboraret, vide meis oratio id quo. Avenir 18px

<p class="font-size-large--m">...</p>

Lorem ipsum dolor sit amet, vim at nusquam gubergren elaboraret, vide meis oratio id quo. Avenir 14px

<p class="font-size-small--m">...</p>

Buttons

Primary


Secondary


Tertiary


Other Helper Classes

display

display: block;

<span class="display-b">...</span>

display: inline-block;

<div class="display-ib">...</div>

position

position: relative;

<div class="pos-rel">...</div>

position: absolute;

<div class="pos-abs">...</div>

Box Model

margin: 0;

<p class="mar-none">...</p>

padding: 0;

<div class="pad-none">...</div>

border: 0;

<div class="border-none">...</div>