Corey C. Griffin Foundation Web Style Guide

Color Palette

Primary
#034872

Accent
#EC1D45

Secondary
#HEX

Text
#333333

Typography

Lorem Ipsum Dolor

Heading 1 (Page Titles) | Font: Futura PT / Weight: 600 / Size: 48px / Line Height: 1.2em / Letter Spacing: .01pt / Color: #034872

Lorem Ipsum Dolor

Heading 2 | Font: Futura PT / Weight: 600 / Size: 32px / Line Height: 1.2em / Letter Spacing: -1pt / Color: #034872

Lorem Ipsum Dolor

Heading 3 | Font: Futura PT / Weight: 600 / Size: 24px / Line Height: 1.2em / Color: #034872

Lorem Ipsum Dolor

Heading 4 | Font: Futura PT / Weight: Bold / Size: 18px / Line Height: 1.4em / Color: #034872
Lorem Ipsum Dolor
Heading 5 | Font: Futura PT / Weight: 500 / Size: 18px / Line Height: 1.4em / Color: #034872
Lorem Ipsum Dolor
Heading 6 | Font: XXX / Weight: XXX / Size: XXpx / Line Height: XXem / Color: #XXXXXX
Lorem Ipsum Dolor
Display Title 1 | Font: XXX / Weight: XXX / Size: XXpx / Line Height: XXem / Color: #XXXXXX
Lorem Ipsum Dolor
Display Title 2 | Font: XXX / Weight: XXX / Size: XXpx / Line Height: XXem / Color: #XXXXXX

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Lead Paragraph | Font: XXX / Weight: XXX / Size: XXpx / Line Height: XXem / Color: #XXXXXX

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Paragraph | Font: XXX / Weight: XXX / Size: XXpx / Line Height: XXem / Color: #XXXXXX
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit.
  • Proin gravida dolor sit amet lacus accumsan
  • Proin sodales pulvinar tempor. Sociis natoque penatibus et magnis.
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit.
  3. Proin gravida dolor sit amet lacus accumsan
  4. Proin sodales pulvinar tempor. Sociis natoque penatibus et magnis.
Lists | Font: XXX / Weight: XXX / Size: XXpx / Line Height: XXem / Color: #XXXXXX

Accessible Buttons

There needs to be a visible change on hover & focus. Color change is not sufficient. Pick one variation from the options below for each client.

Forms

Inquire Now

Panel Examples

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis.

Image Gallery