YMCA of Greater Montgomery Source · ymcamontgomery.org

A Montgomery-area community-Y design system, a homepage, three landing pages.

Real colors lifted from production CSS — Montgomery's signature blue and purple, never federation red. Real branch and program photography from the live WordPress library spanning 17 branches across the Alabama River Region. Sofia Sans is the free Google Fonts substitute for proprietary Cachet.

The system

Tokens, type, and components — extracted, not invented.

Sixteen color swatches with real hex values, a complete type ramp on Sofia Sans (with the distinctive weight-200 H3 + body), nine signature patterns (overlapping-stack hero, triangle CTA, gradient-frame branches, downward-triangle stat cards, outline-flip cards, and the pale-blue rounded footer with floating logo).

Open the design system
#0060af
#0089d0
#00aeef
#e3f2fa
#92278f
#5c2e91
#f0ecf5
#140000
#f7fafd
Homepage preview
For all to learn,
grow, and explore.
The homepage

The full Montgomery beat at full strength.

The 4-piece overlapping hero (video + 3-color titles card + alerts pill + pale-blue intro), program categories, downward-triangle stat cards, gradient-frame branch listings, member quote, signature triangle-wedge CTA, and the floating-logo pale-blue footer.

Open the homepage

Three landing pages on the same system.

Click to open
Landing 01
Membership

Membership

Four membership tiers (Youth · Adult · Family · Senior), what's included, scholarship messaging, FAQ, and a closing triangle-CTA.

Open landing
Landing 02
Youth programs

Programs

Camp Chandler, swim, sports, after-school. Three-area grid by Y mission, full-bleed program-tile grid, weekly schedule rows.

Open landing
Landing 03
Annual campaign

Give

Annual campaign, give-options grid (one-time / monthly / planned / sponsor-a-child), scholarship narrative, impact stats, donor closing block.

Open landing