Business Loans Accounts Style 02 Car Loans Checking Credit Cards Digital Banking Accounts Style 01 Home Equity Loans Insurance Investing Membership Mortgage Personal Loans RV, Boat, Motorcycle Loans Savings

Colors

Colors

Description

VACU web colors. Please follow color usage guidelines closely to maintain consistency in visual display, interaction design, and information architecture.

Color Palette

Swatch Name Hex Variable Description
Blue #007dba $color--blue Primary action color. Use for buttons, links, and calls to action.
Periwinkle #3a5dae $color--periwinkle Hover state for primary buttons.
Deep Blue #003970 $color--deep-blue Action color. Use in links on colored backgrounds.
Blue Light #e1f6f9 $color--blue--light Secondary background color. Use in alert bars.
Blue Lighter #edf1f7 $color--blue--lighter Primary Background color. Use to highlight calls to action. Used in utility navigation.
Green #579904 $color--green Information color. Use in iconograph, images, and design elements to draw attention to key information.
Green Light #95c623 $color--green--light Highlight color. Used in image overlays and iconography. Use in conjunction with primary green.
Green Lighter #d5e9a7 $color--green--lighter Highlight color. Used in image overlays and iconography. Use in conjunction with primary green.

Grayscale

Swatch Name Hex Variable Description
Black #000 $color--black Black
Charcoal #2a2a2a $color--charcoal Text color.
Gray #666 $color--gray Alternate Text Color for subheadings, icons and deemphasized text.
Gray Light #e0e0e0 $color--gray--light UI color for Horizontal lines, table lines, etc.
Gray Lighter #f5f5f5 $color--gray--lighter Secondary Background color. Used in footnotes.
White #fff $color--white Primary background color, main site background.

Functional Colors

Swatch Name Hex Variable Description
Blue #007dba $link__color Link color.
Charcoal #2a2a2a $text__color Text color.

Fonts

Fonts

Font Family: Source Sans Pro

Example

Primary font light 300: "Source Sans Pro", sans-serif;

Primary font light italic 300i: "Source Sans Pro", sans-serif;

Primary font regular 400: "Source Sans Pro", sans-serif;

Primary font regular italic 400i: ""Source Sans Pro", sans-serif;

Primary font medium 500: "Source Sans Pro", sans-serif;

Primary font medium italic 500i: "Source Sans Pro", sans-serif;

Primary font bold 700: "Source Sans Pro", sans-serif;

Primary font bold italic 700i: "Source Sans Pro", sans-serif;

Base

VACU Digital Style Guide

Overview

Design guidelines and tools to help web designers and developers create consistent and accessible user experiences for all VACU digital assets.*

Description

The purpose of this document is to outline the digital design system for Virginia Credit Union. Please reference this style guide when building digital assets for VACU to maintain consistent brand presentation, UX/UI best practices and ADA/WCAG compliance. To maintain a consistent brand and user experience across all digital properties it is important that all guidelines are followed.

The style guide is organized into the following sections:

  • Global - Style Guide outline and Descriptions, as well as global colors and font styles.
  • Atoms - Individual components such as paragraphs, blockquotes, and grid layouts.
  • Molecules - Individual elements made up of elements: buttons, cards, etc.
  • Organisms - Larger elements made up of molecules: banners, heroes, etc.
  • All - The complete list of all elements.

It is important that all VACU digital properties abide by ADA/WCAG standards so our content and designs are accessible to all users. For details on those guidelines please refer to VACU’s ADA Guidelines. When designing for ADA compliance, please consider these general guidelines:

  • Information and user interface components must be presentable to users in ways they can perceive. For example, Alt-text for images allows users using a screen reader to understand what is on the screen.
  • User interface components and navigation must be operable. This includes building keyboard controls for web applications.
  • Information and the operation of user interface must be understandable. This means making content legible through appropriate text size and color contrast.
  • Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

If you feel there are elements missing, your use-case isn’t addressed in this document, or you have any questions, please reach out to VACU’s Web Marketing Team.

*Content within this document is for illustrative purposes only. Any references to Virginia Credit Union products, services, rates or other related content are not necessarily correct or up-to-date. For information about Virginia Credit Union’s products and services please visit vacu.org.