Style Guide

Colors

Primary - #1C3063

Secondary- #D38125

Tertiary - #90DBE7

Quaternary - ##BDF2FA

Gray-lighter - #f2f2f2

Gray-light - #ddd

Gray - #666

Gray-dark - #333

Typography

font-family: roc-grotesk, helvetica, sans-serif;

Heading 1 <h1>

Heading 2 <h2>

Heading 3 <h3>

Heading 4 <h4>

Heading 5 <h5>
Heading 6 <h6>

Paragraphs <p>

Nam pretium suscipit dolor commodo convallis. In sollicitudin condimentum dolor, at lacinia mi euismod at. In ac libero ipsum. Nulla semper lectus non ipsum facilisis consectetur. Nam ac dolor non purus placerat elementum.

Unordered Lists <ul>

  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla vlupat aliquam velit
    • Phasellis iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
      • Purus sodales ultricies
      • Vestibulum laoreet porttitor sem
      • Ac tristique libero volutpat at
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Ordered Lists <ol>

  1. Integer molestie lorem at massa
  2. Facilisis in pretium nisl aliquet
  3. Nulla vlupat aliquam velit
  4. Faucibus porta lacus fringilla vel
  5. Aenean sit amet erat nunc
  6. Eget porttitor lorem

Buttons

Secondary Button Border Button 
<a href="…" class="btn bgSecondary white">Secondary Button</a>
<a href="…" class="btn btn--border">Secondary Button</a>

Cards

Header Text

Header Text Header Text
Card Sticker 
<a href="…" class="card card--contain bgSecondary">
   <img src="…" class="card__img"/>
   <div class="sign sign--vertical sign--white sign--anim card__sign h2 center">
      <h2 class="sign__text sign__text--1">Header Text</h2>
   </div>
   <span class="card__sticker sticker">Card Sticker</span>
</a>

This is header text

This is paragraph text. This is a link.

 
<div class="card card--cover">
   <a href="…">
      <img src="…" class="card__bg"/>
   </a>
   <a href="…" class="sketch sketch--curve card__content vertBefore vertBeforeKill--d vertAfter vertAfter3x--d">
      <h2 class="h3 vertAfterMin">This is header text</h2>
      <p>This is paragraph text. <span class="link secondary">This is a link.</span></p>
   </a>
</div>

News Lists

<ul class="list">
   <li class="list__item list__item--border vertBefore2x vertBefore3x--d vertAfter2x vertAfter3x--d gray">
      <h3 class="h3 medium vertAfterMin primary">
         <a href="…" class="link link--reveal">This is a linked news title</a>
      </h3>
      Nov 28 <a href="…">Uncategorized</a>
   </li>
   …
</ul>