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.