Brand Guide

Logos

Always use the provided logo files. Do not redraw, stretch, or recolor.

View PDF Style Guide

Color — Light backgrounds ⬇ Download Hi-Res

Black — Print & one-color ⬇ Download Hi-Res

White — Dark backgrounds ⬇ Download Hi-Res

Colors

Core brand palette used across all materials.

Navy (Primary) #004A77 --brand-navy

Sky (Secondary) #70C2E2 --brand-sky

Orange (Accent) #F06421 --brand-orange

Gold (Accent 2) #F9C349 --brand-gold

Supporting Colors

Rust #A0522D

Steel #4682B4

Folie #79C000

Teal #2F6B6B

Typography

Heading Font

Josefin Slab

Weight 700 · Serif · Self-hosted via @fontsource

Body Font

Open Sans — The quick brown fox jumps over the lazy dog.

Weights 400/500/600/700 · Sans-serif · Self-hosted via @fontsource

Heading Scale

h1Share Vancouver2.75rem / 44px

h2Section Title2.25rem / 36px

h3Subsection1.75rem / 28px

h4Component Label1.25rem / 20px

Buttons

All buttons use pill shape (border-radius: 9999px), Open Sans 600 weight, and 0.25s transitions. Combine base .btn with a variant class.

Primary

Main CTA — navy blue. Use for the single most important action.

.btn .btn-primary

Secondary

Supporting action — sky blue. Pairs well next to Primary.

.btn .btn-secondary

Accent

High-visibility action — orange. Draws attention for urgent CTAs.

.btn .btn-accent

Accent 2

Warm action — gold with dark text. For supplementary highlights.

.btn .btn-accent2

Ghost

Outlined — navy border, transparent fill. Fills on hover.

.btn .btn-ghost

Transparent

Minimal — no border, no background. Subtle tint on hover.

.btn .btn-transparent

Dark Background Variants

For buttons on navy or dark backgrounds.

Badges

Badges are lightweight labels for categorization, status, or emphasis. Unlike buttons, they are not interactive. Combine base .badge with a variant class.

Sky .badge .badge--sky

Navy .badge .badge--navy

Orange .badge .badge--orange

Gold .badge .badge--gold

Outline .badge .badge--outline

Subtle .badge .badge--subtle

Shadows

Standard drop shadow for images and content cards. Apply the utility class for a consistent, lifted look across the site.

Image / Card

Image Shadow .img-shadow box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12)

Accordion

Collapsible FAQ-style panels with smooth height transitions, a rotating chevron icon, and distinct open / closed styling. Only one panel can be open at a time.

Open items get a white background, gold left border, subtle box-shadow, and the chevron rotates 180° turning gold.

Uses a small inline script that measures scrollHeight and animates the panel height with a cubic-bezier(0.4, 0, 0.2, 1) easing over 350 ms. The is-open class toggles all visual states.

Wrap items in .faq-list → .faq-item → .faq-trigger + .faq-panel → .faq-panel__inner. See the Volunteer page for a full working example.

Usage Notes

Wrap the whole accordion in an element with a unique id.
Each item is a .faq-item (or .bg__acc-item here) with a <button> trigger and a .faq-panel wrapper.
The script adds/removes the .is-open class and manages aria-expanded.
Transitions: height 0.35s cubic-bezier(0.4,0,0.2,1), chevron transform 0.35s, background/border 0.3s ease.

Decorative Elements

Keyword Underlines

Hand-drawn style underlines on emphasized heading words.

Navy Orange Sky Gold

Spectrum Divider

Form Fields

Standard form controls used across contact, volunteer, and donation forms. Combine a <label>, an input, and optional helper/error text inside a .form-group wrapper.

Text Inputs

Full Name

Email Address We'll never share your email.

Phone (Error State) Please enter a valid phone number.

Disabled Field

Textarea

Message

Select / Dropdown

Interest Area

File Upload

Attachment

Assembled Form

A compact example showing how the fields compose into a real form.