Colors

• Forest - #296A57
• Emerald - #46977F
• Black - #000000
• Charcoal - #535859
• Slate - #8C9495
• Sun - #F9E07F
• Fire - #D46C4E

Type Styles

• Heading One

  DM Sans - Bold
  50px / 3.125rem
  Page Titles

• Heading Two

  DM Sans - Bold
  32px / 2rem
  Section Titles

• Heading Three

  DM Sans - Bold
  26px / 1.625rem
  Sub-Section Titles

• Heading Four

  Roboto - Medium
  22px / 1.375rem
  Sub-Headings

• Heading Five

  Roboto - Medium
  18px / 1.125rem
  Sub-Headings

• Heading Six

  Roboto - Medium
  17px / 1.0625rem
  Sub-Headings
• Introduction
  DM Sans - Regular
  20px / 1.25rem
  Page Intro Copy
• Body
  Roboto - Regular
  16px / 1rem
  Body Copy
• Body Bold
  Roboto - Bold
  16px / 1rem
  Bold Body Copy
• Caption
  Roboto - Bold
  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.

• Emerald Button (Default)
  Forest Button
  Sun Fire 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.

• Immitation Button Theme
  Fire / Sun Theme
  Forest / Emerald Theme
  Immitation Text Link Theme

Promotions

Promotions 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.

• Green Bar

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

  Learn More

  Black Bar

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

  Learn More

  Fire Bar

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

  Learn More

  Simple Text Theme

  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

Step Lists

Step lists are an example of a proposed bit type that would help us to make interfaces and text content more visual and interactive.

• 1. Gather your personal info.

  2. Fill out your online application.

  3. Once your application is approved, say "Cha Ching"!!

  • #1 Mortgage Provider in Vermont

  • High Member Satisfaction

  • Low Interest Rates

  • Local Underwriting and Servicing

  • Free Pre-Approval

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 Home Equity Line of Credit

   01-09-2020

  Annual Percentage Rate1	Index2	Margin	Loan to Value3	Alert Me
  4.25%	4.75%	- 0.50	up to 80%	Receive a notification when this rate changesReceive a notification when this rate changes
  6.00%	4.75%	+1.25	80.01% - 85%	Receive a notification when this rate changesReceive a notification when this rate changes
  Generally, fees paid by NEFCU. If appraisal required, member-paid fees may range from $350 to $550. For Home Equities in first Mortgage position, members may be required to pay Title Examination fees which may range from $250 to $500 and Title Insurance fees which may range from $1.65 to $2.75 per $1000 borrowed.
  1All rates quoted are subject to change monthly, the maximum interest rate is 18% and the minimum interest rate is 4.50%. The rate may increase after the consummation of the loan. These are our posted rates; your rate could vary according to your credit.↵ 2The Index is the Prime Rate published in the Wall Street Journal on the last Wednesday of each month.↵ 3Maximum allowable loan to values may vary based on current market conditions. Up to 80% LTV based on a current appraisal. Up to 75% LTV based on a current Tax Assessed Value. Call a loan officer for further details.↵

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