A Lynchburg community-Y identity, in tokens.

Four canonical logo variants pulled from YCVA's WordPress media library. The 170th-anniversary lockup is the primary identity for 2025–2026 — a horizontal composition combining the YMCA "Y" mark with a "170th Anniversary · 9050" callout in YCVA's blue/purple palette. The plain "Y" marks (purple-blue and white) are used for square placements: favicon, social avatars, footer corner. Light-version lockup goes on light backgrounds; white version on `--brand` blue or `--ink-deep` chrome.

YCVA's identity is blue + purple, NOT the YMCA federation default red. Brand blue does the heavy lifting — primary CTAs, links, headlines, the dominant voice across the live site (8 occurrences in source CSS, more than any other branded color). Purple is the signature accent — the "Y" mark gradient, the "give" CTA, the differentiator from sibling YMCAs (4+4 occurrences). Deep navy carries gravity for footer + dark sections. Soft cool off-white is the page surface — never pure white as default. Gold is a federation-style program-highlight color for "most popular" badges and warm CTAs.

The live YCVA site loads a single proprietary face: Cachet (Berlow) at Extra Light 200 / Book 400 / Bold 700. Cachet is not free. We substitute with Sofia Sans (Lazaridis) — a free Google Fonts humanist sans that captures the same friendly, gently-squared character at every weight from 400 to 800 with matching x-height proportions. Sofia Sans handles both display and body, matching YCVA's single-font approach. Body and display use the same family for visual unity.

Primary buttons are solid brand-blue with a full pill radius (matches YCVA's WordPress button style — softer than the contractor-flat 4px) and Sofia Sans 700 sentence-case (NOT uppercase — softer voice for a community org). Hover deepens to `--brand-deep` plus a subtle drop shadow. The arrow link is the soft alternative — used wherever a button would be too loud. Purple variant exists for "give" / annual-campaign actions. The on-dark white button anchors join-bands and dark CTAs.

YCVA's signature treatment for the three areas of focus — Youth Development / Healthy Living / Social Responsibility. Full-bleed editorial program photography with bottom-fade scrim, brand-pill badge in the upper-left, Sofia Sans 800 H3, paragraph description, brand-blue arrow CTA. Three-up grid on desktop, stacked on mobile. Drop shadow on hover for tactile lift.

YCVA's signature conversion moment — a full-bleed `--brand` band with the real diagonal-stripe background pulled from YCVA's CSS (`diagonal-bg.png`) at 30% opacity, white headline, two-button row, and member-promise line. Used at the bottom of every landing. The diagonal motif is a YCVA signature decorative element.

YCVA's most powerful trust signal is the impact figures — members impacted, scholarships granted, swim lessons taught, programs operated. 48–80px Sofia Sans 800 figures in `--brand-soft` over `--ink-deep` background, paired with 18px Sofia Sans 600 labels and Inter caption sources. Each stat carries a left-rule in `--accent-purple` for visual interest.

Two-column grid for the four YCVA branches. Each card has a 240px square branch photo on the left + name + address + meta line on the right. Real branch photos pulled from YCVA's WordPress library — the photos ground the brand in the actual Lynchburg geography. Hover lifts the card with brand-blue border.

Four-up membership pricing grid. The "Family" tier is featured with `--brand` background and a gold "Most Popular" ribbon — that's intentional, family memberships are 60% of YCVA's roster. Each tier card shows label, name, price, monthly cadence, 5 included features, and a CTA. Hover lifts each card.

15 real photos lifted directly from YCVA's WordPress media library. The mix is editorial program photography across aquatics, fitness, youth development, and family scenes — plus four real branch-location photos that ground the brand in actual Lynchburg geography. Mix of indoor program scenes and exterior architecture. Never replace these with stock — the local authenticity is part of the brand.

All CSS variables defined in _shared.css. Use these — never hard-coded hex values — when extending the system. The four palettes in palettes.json override these tokens at runtime via ../palette-toggle.js.