A Montgomery community-Y identity, in tokens.

The Montgomery YMCA's primary mark is the YMCA "Y" wordmark in a custom Montgomery purple-on-blue tint. Pulled directly from `wp-content/uploads/2025/03/purple-blue-y-logo-cropped-1.png`. There is no anniversary lockup variant for this association — Montgomery uses the plain Y across header, footer, and branded materials. The padded variant (square 100% padding) is used for favicons and mobile-tile placements.

Montgomery's identity is blue + purple, NOT the YMCA federation default red. The dominant brand color is `--blue-dk` (#0060af) — the deep brand blue. `--blue-md` (#0089d0) is the H2 default and the secondary CTA. `--blue-lt` (#00aeef) is the cyan-edge accent for chevrons and icons. `--purple-dk` (#5c2e91) is the dominant link/anchor color and the second half of the purple gradient. Pure white and a cool off-white (`--bg`) are the page surfaces.

Montgomery's site loads Cachet (Berlow) at three weights — Extra Light 200, Book 400, Bold 700. Cachet is not a free Google Font. We substitute with Sofia Sans (Lazaridis) — humanist sans freely available on Google Fonts. The standout Montgomery move: H3 is weight 200 (extra-light), and the default body voice is also weight 200 at 24px. Letter-spacing across H1/H2/H4/H5 is uniformly -0.05em — aggressively tight.

Montgomery's signature button: a pill (`border-radius: 1000px`, padding `8px 28px`) with transparent 3px outline that flips to purple on hover (offset -3px, drawn inside). NO padding shimmy (different from YCVA). The default fill is the `--blue-gradient` (214deg). Btn-chevron is the alternate pattern: a 5px-rounded blue button with an animated chevron arrow that travels left-to-right on hover — Montgomery-only motion idiom.

The three-up grid for Montgomery's three areas of focus — Youth Development / Healthy Living / Social Responsibility. Each card: full-bleed editorial program photography with bottom-fade scrim, brand-pill badge upper-left, Sofia Sans 700 H3 in `--blue-md`, paragraph in weight-200, brand-blue arrow CTA. Outline-flip on hover (`outline 6px → blue-md`).

Montgomery's signature conversion moment — a 38/62 horizontal split where the left blue-gradient panel uses `clip-path: polygon` to draw a sharp triangle pointing right INTO the photo on the right. White headline, weight-200 H3 sub-line, two-button row. Used at the bottom of every landing page.

Montgomery's `.statistic-cards` pattern — `--blue-gradient` filled cards with a downward purple-gradient triangle anchored at the top edge (clip-path polygon). 80px Sofia Sans 700 figures with extreme letter-spacing (`-0.08em`), labels in weight-200 white, sources in muted Inter caps.

Montgomery's `.location-cards` pattern — gradient-frame cards (blue or purple) wrapping a centered white inner card with shadow. The inner card holds the branch name, address, hours, and phone. The outer-frame-with-inner-white-card is a Montgomery distinctive. 17 real branches in the live association — Bell Road, Britton, Cleveland Avenue, Downtown, East Family, Wetumpka, Camp Chandler, etc.

Four-up membership pricing grid. The "Family" tier is featured with `--blue-gradient` background and a gold "Most Popular" ribbon. Each card: label + name in `--blue-md` 700 / 28px, 50px price in `--ink-deep`, 5 included features with `+` bullets in `--brand`, CTA button. Outline-flip on hover.

28 real photos lifted directly from Montgomery's WordPress media library. The mix is editorial program photography across aquatics, group fitness, youth sports, daycare, summer camp (Camp Chandler), branch architecture, and outreach (brown-bag, community lifestyle). Never replace these with stock — the local Montgomery authenticity is a brand asset.

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.