Colors

• Winnipesaukee - #3E6C7D
  Brand Color
  (5.76 Contrast Ratio on White - AA pass)
• Lichen - #979831
  Adjusted Brand Color
  (3.07 Contrast Ratio on White - AA+ pass)
• Oak - #4C412A
  Brand Color
  (10.02 Contrast Ratio on White - AAA pass)
• Pumpkin - #D57D28
  Adjusted Brand Color
  (3.07 Contrast Ratio on White - AA+ pass)
• Charcoal - #55565A
  Additional Color
  (7.33 Contrast Ratio on White - AAA pass)
• Overcast - #e3e3e3
  Additional Color
  (16.36 Contrast Ratio on Black - AAA pass)

Type Styles

• Heading One

  Rift - Bold
  58px / 3.625rem
  Page Titles

• Heading Two

  Rift - Bold
  38px / 2.375rem
  Section Titles

• Heading Three

  Rift - Bold
  30px / 1.875rem
  Sub-Section Titles

• Heading Four

  Rift - Bold
  22px / 1.375rem
  Sub-Headings

• Heading Five

  Hatch - Medium
  18px / 1.125rem
  Sub-Headings

• Heading Six

  Hatch - Medium
  17px / 1.0625rem
  Sub-Headings
• Introduction
  Hatch - Medium Italic
  20px / 1.25rem
  Page Intro Copy
• Body
  Hatch - Light
  15px / 0.9375rem
  Body Copy
• Body Bold
  Hatch - Bold
  15px / 0.9375rem
  Bold Body Copy
• Caption
  Hatch - Medium
  14px / 0.875rem
  Captions

Type Usage Examples

Some examples of how type styles may be used on the website.

• Primary Page Title

  Introduction: A compelling piece of copy that sets out the main idea for the page. This gives the visitor an overview of what to expect on the page.

  An example of a stock image and caption
  A regular paragraph of copy with some bold text and some links within it. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod.

  Section Title

  Along with another paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor.

  Sub-Title

  Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

• A Bulleted List

  • Morbi leo risus, porta ac consectetur ac.
  • Aenean lacinia bibendum nulla sed consectetu
  • Condimentum Dapibus Sem Malesuada
  • Quam Adipiscing Cursus Fringilla Ipsum

  A Numbered List

  1. Nullam id dolor id nibh ultricies vehicula ut id elit.
  2. Aenean lacinia bibendum nulla sed consectetu
  3. Condimentum Dapibus Sem Malesuada
  4. Quam Adipiscing Cursus Fringilla Ipsum

• Some small disclaimer style text

  Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Buttons

Buttons are links that can be styled as buttons within any editor in the admin. They are specific to one content area and are not reusable. The default button style will also be used for forms or other areas within the site.

• Pumpkin Button (Default)
  Lichen Button
  Winnipesaukee Button

Calls to Action

Calls to Action are a bit type that can be created once and placed in any number of content areas on the site. There are multiple themes available, one of which matches the default button style. There is also a CTA that is styled as a text link so if we wish to have text links for things like "open an account", the links can be managed in one place.

• Pumpkin Theme

  Winnipesaukee Theme

  Lichen Theme

Promotions & Testimonials

Promotions are a bit type that can be created once and placed in any number of content areas on the site. Promotions can be converted to testimonials with a configuration toggle.

• Pumpkin Simple

  Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

  Learn More

  Winnipesaukee Panel

  Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

  And More

  Multi Panel

  Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

  Learn More

  “ I didn't have a car, and then I went to the Credit Union and they helped me, because they actually cared. They listened to my story, and found a loan that I could afford.”

  Jane Member

  “ I didn't have a car, and then I went to the Credit Union and they helped me, because they actually cared. They listened to my story, and found a loan that I could afford.”

  Jane Member

  “ I didn't have a car, and then I went to the Credit Union and they helped me, because they actually cared. They listened to my story, and found a loan that I could afford.”

  Jane Member

Content Decks

Content Decks are a bit type that can be created once and placed in any number of content areas on the site. They support up to 5 columns of content, colored backgrounds, image backgrounds, image shading and more. They are a crucial layout tool for pages throughout the site.

Rate Tables

• Table data for New & Used Auto Loans

   Rates effective 07-22-2020

  Model Year	Rates As Low As	Annual Percentage Rate (APR)*	Term	Estimated Monthly Payment/$1000	Alert Me
  2013-2020	2.25%	2.43%	Up to 36 months	$28.75
  2013-2020	2.25%	2.39%	Up to 48 months	$21.81
  2013-2020	2.49%	2.60%	Up to 60 months	$17.74
  2013-2020	3.50%	3.60%	Up to 72 months	$15.42
  2013-2020	4.50%	4.59%	Up to 84 months	$13.90
  2012 & Older	4.50%	4.61%	Up to 60 months	$18.65
  Rates and amount financed are determined by your credit history. Rates are subject to change at anytime however the rate will remain in effect for the life of the loan once disbursed. Estimated monthly payment does not reflect the additional cost of insurances. Additional rates and terms available. Please contact Member Services for additional information. *Annual Percentage Rate (APR) is based on a loan amount of $35,000 plus a $95 origination fee.

Forms

• Please Fill Out Our Form

  Text Area Field with Label

  Example of a field label Example of some aid text that might accompany a label

  Example of a Select Box Option 1 Option 2 Option 3 Option 4

  Example of radio buttons and check boxes

  Yes No I don't know

  Yes No I don't know