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>
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla vlupat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- 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<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>
<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
-
This is a linked news title.
Nov 28 Uncategorized -
This is a linked news title.
Nov 28 Uncategorized -
This is a linked news title.
Nov 28 Uncategorized
<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>