Select Page

Style Guide

TYPOGRAPHIC STYLES

Heading 1

color:#000;

Heading 2

color:#555;

Heading 2 Blue

color:#1370AE;

Heading 3

color:#555;

Heading 3 Blue

color:#1370AE;

Heading 4

color:#555;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae efficitur nibh. Proin tincidunt ligula ac ipsum rutrum, nec hendrerit erat semper. Sed blandit fermentum lorem, quis aliquet nunc posuere eu. Vestibulum dui sapien, accumsan sed malesuada nec, volutpat et ligula. Aliquam commodo tincidunt justo sed mattis. Maecenas tristique neque massa. Etiam vel turpis commodo, consectetur lectus ac, tincidunt ipsum. Sed pellentesque, mi quis viverra gravida, magna lectus malesuada arcu, a pellentesque erat odio ut ipsum. Vestibulum sollicitudin magna ac mauris auctor, in viverra nibh placerat. Suspendisse eu ligula vestibulum, tempus enim quis, dignissim libero. Curabitur fringilla massa ipsum, sagittis auctor ligula ultrices vitae. Sed non lacus a lacus ornare auctor. Donec placerat orci lacus, pulvinar fermentum dui luctus sit amet. Nunc congue id ex ut rhoncus. Suspendisse auctor molestie mi, a suscept purus dapibus non. Donec viverra bibendum odio, maximus dictum diam vulputate in.

Aenean a sem at ligula placerat eleifend sit amet vitae urna. Nullam tincidunt risus nec mi aliquam aliquam. Mauris ante dui, volutpat vitae tellus sed, aliquet ullamcorper tortor. Nullam in arcu vitae sapien hendrerit ornare. Nulla vel velit vitae diam facilisis placerat. Morbi rutrum urna ac convallis aliquam. Ut sit amet tempor enim. In arcu erat, consectetur nec euismod nec, hendrerit lacinia mauris.

color:#555; font-weight:400; line-height:1.4;

COLORS

Primary: #005488
Primary: #FFF
Accent: #1370AE
Accent: #b5e1e1 (Use Sparingly)
Accent: #739dd2 (Use Sparingly)
Accent: #abb1b1 (Use Sparingly)

BUTTON STYLES (see code below):

CSS class: ctaBig

Call to Action

CSS class: ctaOne

Call to Action

CSS class: ctaTwo

Call to Action

.ctaBig{ transition: all 0.5s ease; color:#FFF; text-decoration:none; background:#1370AE; border:1px solid #1370AE; padding:10px; padding-left:30px; padding-right:30px; border-radius:50px; min-width:200px; text-align:center; font-size:20px; } .ctaBig:hover{ color:#1370AE; text-decoration:none; background:#FFF; border:1px solid #1370AE; padding:10px; padding-left:30px; padding-right:30px; border-radius:50px; min-width:200px; text-align:center; font-size:20px; } .ctaOne{ transition: all 0.5s ease; color:#FFF; text-decoration:none; background:#1370AE; border:1px solid #1370AE; padding:10px; padding-left:30px; padding-right:30px; border-radius:50px; min-width:200px; text-align:center; } .ctaOne:hover{ color:#1370AE; text-decoration:none; background:#FFF; border:1px solid #1370AE; padding:10px; padding-left:30px; padding-right:30px; border-radius:50px; min-width:200px; text-align:center; } .ctaTwo{ transition: all 0.5s ease;color:#1370AE; text-decoration:none; background:#FFF; border:1px solid #1370AE; padding:10px; padding-left:30px; padding-right:30px; border-radius:50px; min-width:200px; text-align:center; } .ctaTwo:hover{ color:#FFF; text-decoration:none; background:#1370AE; border:1px solid #1370AE; padding:10px; padding-left:30px; padding-right:30px; border-radius:50px; min-width:200px; text-align:center; }