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.