Web Style Guide

This Style Guide presents an inventory of web elements for the purpose of viewing the design system that will be applied across the entire website and how it renders in different browsers and on different devices.

Brand Elements

Below are brand elements like logos, marks, fonts and colors that will appear on the site.

Typography

The typographic system shown here is comprehensive and accounts for a variety of different type scenarios on the site. The fonts used are live webfonts which provide a more semantically accurate account of content for maximum web visibility.

Headers

h1. This is a very large header

h2. This is a large header

h3. This is a medium header

h4. This is a moderate header

h5. This is a small header

Subheaders

h1.subheader

h2.subheader

h3.subheader

h4.subheader

h5.subheader
Paragraphs

This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content. Phasellus vitae faucibus erat. Morbi condimentum lacus non lectus sodales, eu volutpat sapien fermentum. In a tortor suscipit, varius felis et, tincidunt velit. Maecenas eu dui maximus, facilisis felis vel, pharetra orci. Proin sollicitudin justo id gravida rutrum. In vitae urna nec augue scelerisque condimentum sed non leo.

Small Paragraphs

This is a small paragraph. Small paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content. Phasellus vitae faucibus erat. Morbi condimentum lacus non lectus sodales, eu volutpat sapien fermentum. In a tortor suscipit, varius felis et, tincidunt velit. Maecenas eu dui maximus, facilisis felis vel, pharetra orci. Proin sollicitudin justo id gravida rutrum. In vitae urna nec augue scelerisque condimentum sed non leo.

Hyperlink

This is a hyperlink

Unordered List
  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item
Ordered List
  1. List Item 1
  2. List Item 2
  3. List Item 3
Blockquote
I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.Isaac Asimov
IMAGES

Image dimensions, states and behavior are previewed below.

Colors

Below you can find each of the color swatches used on the website for background, text, and accent color.

  • Background #FFFFFF
  • Primary Color #061456
  • Secondary Color #FABDB0
  • Tertiary Color #FFFCF7
  • Info Alert Color #07bbd2
  • Success Alert Color #43ac6a
  • Warning Alert Color #f08a24
  • Critical Alert Color #f04124
Forms & Fields

.com
Button HTML

<!-- Size Classes -->
<a href="#" class="button tiny">Tiny Button</a>
<a href="#" class="button small">Small Button</a>
<a href="#" class="button">Default Button</a>
<a href="#" class="button large">Large Button</a>
<a href="#" class="button expand">Expanded Button</a>
<!-- Radius Classes -->
<a href="#" class="button radius">Radius Button</a>
<a href="#" class="button round">Round Button</a>
<!-- Color Classes -->
<a href="#" class="button success">Success Button</a>
<a href="#" class="button warning">Warning Button</a>
<a href="#" class="button alert">Alert Button</a>
<a href="#" class="button info">Info Button</a>
<a href="#" class="button primary">Primary Button</a>
<a href="#" class="button disabled">Disabled Button</a>

									
grid

A 12 column, flexible grid allows layout breaks to retain compositional and hierarchical integrity between varying screen sizes.

Every row contains up to 12 columns. You can organize columns of various sizes, as long as the total width adds up to 12.

A. Six columns

B. Six columns

C. Four columns

D. Four columns

E. Four columns

F. Three columns

G. Three columns

H. Three columns

I. Three columns

J. Two columns

K. Two columns

L. Two columns

M. Two columns

N. Two columns

O. Two columns

HTML

<div class="row">
  <div class="small-2 large-4 columns">...</div>
  <div class="small-4 large-4 columns">...</div>
  <div class="small-6 large-4 columns">...</div>
</div>
<div class="row">
  <div class="large-3 columns">...</div>
  <div class="large-6 columns">...</div>
  <div class="large-3 columns">...</div>
</div>
<div class="row">
  <div class="small-6 large-2 columns">...</div>
  <div class="small-6 large-8 columns">...</div>
  <div class="small-12 large-2 columns">...</div>
</div>
<div class="row">
  <div class="small-3 columns">...</div>
  <div class="small-9 columns">...</div>
</div>
<div class="row">
  <div class="large-4 columns">...</div>
  <div class="large-8 columns">...</div>
</div>
<div class="row">
  <div class="small-6 large-5 columns">...</div>
  <div class="small-6 large-7 columns">...</div>
</div>
<div class="row">
  <div class="large-6 columns">...</div>
  <div class="large-6 columns">...</div>
</div>

							
custom modules

Custom site modules go here.