Hoback Club

Brand
Guidelines

Internal brand reference for the Hoback Club team. Consolidates brand standards, website page structure, image library, and content sections. The website is built with Astro, hosted on Firebase, and managed via the Admin Dashboard.

Public Site Member Dashboard Injectable Modules Mailchimp Templates
View Live Demo Site →
Project Scope

What This Package Covers

The redesign spans the public marketing site, private member-facing experiences, reusable Club Essential modules, and a branded email system.

9Public Pages
7Private Pages
14Injectable Modules
84Images
Redesign Goals

Let the Club Sell Itself

Use the beauty of Hoback Club and Jackson Hole to attract renters. More high-quality images of the club, local wildlife, and local activities. All imagery should follow a consistent luxury style — natural light, composed shots, elevated mood.

High-quality club photography / Local wildlife & activities / Consistent luxury aesthetic
Brand Standards

Logo, Color, Typography & Components

All brand rules for the Hoback Club redesign. This is the single source of truth for visual identity.

Logo System & Assets

All images hosted on Mailchimp Content Studio. Use these URLs directly.

Shield Logo Shield Logo (PNG) Primary logo for headers/footers
Logo Nav Text Wordmark (SVG) Horizontal wordmark for compact headers
Teton Range Drawing Teton Range Drawing Hero/intro watermark at 15% opacity
Building Drawing Hoback Building Drawing Closing section accent at 25% opacity
Mailchimp CDN URLs
Shield Logo (PNG): https://mcusercontent.com/c4b9546b92e82ffccc39aa16c/images/1128138d-9212-2ebf-c730-5ca629b99ea9.png
Logo Nav (SVG): https://mcusercontent.com/c4b9546b92e82ffccc39aa16c/files/3808e980-a573-8512-355b-384fd67f773c/logo_nav.svg
Mountains (PNG): https://mcusercontent.com/c4b9546b92e82ffccc39aa16c/images/3014529e-7a5a-646a-3a9c-32e89256771c.png
Building (PNG): https://mcusercontent.com/c4b9546b92e82ffccc39aa16c/images/e1d7d626-3731-d70e-5fb3-8f73f62cb84f.png

Color Palette

Primary Palette

Dark Blue#1e2d3a
Warm Tan#ede9e1
Light Background#f7f5f2
White#ffffff

Text Colors

Body Text#272f36
Secondary Text#666666
Muted / Caption#999999
Accent Gray#7a8d98

UI & Accent

Button Hover#365e75
Divider / Border#e8e4df

Typography

Headline Font — Cormorant Garamond

Used for large section headlines, hero text, and event titles. Always light weight (300).

Upcoming Dining Events

Wine Pairing Dinner

Questions or Special Requests?

Email sizes: Hero headline 32px, event titles 28px, section headings 26px

Body Font — Lato

Used for all body text, navigation, buttons, labels, and captions.

Subheading Label — 11px / 700 / uppercase / 3px tracking

Body text — Lato 300, 14px, color #666666, line-height 1.7. Used for event descriptions, paragraph content, and supporting text throughout.

Emphasis text — Lato 700, 13px, #1e2d3a. Used for pricing, guest limits, and key details.

Time / Meta — 11px / 700 / uppercase / 3px tracking / #999

Web Font Links

Include in <head>. Falls back gracefully in Outlook to Georgia + Helvetica.

<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Cormorant+Garamond:wght@300;400&display=swap" rel="stylesheet">

Fallback stacks:
Headlines: 'Cormorant Garamond', Georgia, 'Times New Roman', serif
Body: 'Lato', Helvetica, Arial, sans-serif

Date Badge

Square badge showing day and month, positioned to the right of event titles.

22 MAR
Size: 66 x 66px  |  Background: #1e2d3a
Day: Cormorant Garamond 300, 26px, #ffffff
Month: Lato 700, 10px, uppercase, 2px tracking, rgba(255,255,255,0.6)

Button System

Five button variants. In email, all buttons must use the "bulletproof button" pattern (table + td with background color) for Outlook compatibility.

View Full Menu
Primary — Main CTA on light backgrounds
Reserve Your Seat
Tan — Secondary CTA on white backgrounds
Learn More
Outline — Tertiary action, lighter visual weight
Explore
White Outline — CTA on dark/image backgrounds
Reserve Now
White Solid — High-emphasis CTA on dark backgrounds
VariantBackgroundText ColorBorderUse On
Primary#1e2d3a#ffffffNoneLight backgrounds, closing CTA
Tan#ede9e1#1e2d3aNoneWhite event cards, secondary CTAs
OutlineTransparent#1e2d3a2px solid #1e2d3aLight backgrounds, tertiary
White OutlineTransparent#ffffff2px solid #fffDark/image backgrounds
White Solid#ffffff#1e2d3aNoneDark backgrounds, high emphasis

All variants: Lato 700, 11px, uppercase, letter-spacing 3px, padding 12px 32px, no border-radius.

Imagery

Image Library

All photography for the redesign. Alpine-luxury standard: natural light, mountain scale, warm earth tones, crisp winter air, calm premium mood.

Club Essential admin format:
https://hobackclub.com/Default.aspx?p=.NETCEEditorPFSTC&NoNav=1&ShowFooter=Falsenoimgtrack=1&NoModResize=1&ID={ID}

CE Uploaded Images

External Photos — Need to Replace

Email & Marketing

Mailchimp Template Example

Embedded example of the dining events email template.

Website

Page Overview

Complete site structure with planned changes for each page.

Public Site hobackclub-website.web.app

Homepage / Video hero (curtain reveal), weather bar, auto-scrolling gallery, "Life at Hoback" showcase panels with tram overlay, Four Seasons section, card carousel, Reserve Your Stay CTA
Discover /discover Full-viewport hero (100170), "At the Foot of the Mountain" intro + Reserve Your Stay with tram overlay (single tan section), Explore Jackson Hole interactive 3D map, Upcoming Events (live from admin), Trail Explorer 3D Mapbox map
Come & Stay /stay Full-viewport hero (100169), mosaic gallery (stay-content layout), reservation form (tan), residence descriptions, amenities & services section, collapsible dining menu (Dinner/Lunch tabs, loaded from admin Firestore)
Amenities /amenities Full-viewport hero, zigzag alternating image/text sections, quick-reference cards, parallax divider
Lifestyle /lifestyle Full-viewport hero (Snowfall_hero.png), season summary lists (Winter/Summer), 4-panel season panels with hover expand, Winter/Summer toggle with 30 activity cards (3D tilt effect), section dividers, contact CTA
Membership /membership Full-viewport hero, membership inquiry form with references
Contact Us /contact Full-viewport hero, contact info cards, contact form (wired to Firebase submitForm)
Login /login Branded redirect to members.hobackclub.com

Admin Dashboard hobackclub-website-admin.web.app

Form Requests Inbox for all website form submissions (contact, reservation, membership). Filter by type, mark handled/unread, view details. Email notifications via Gmail SMTP.
Events Manager CRUD for events shown on Discover page. Add title, date, time, photo, description. Published events appear on the website immediately (client-side fetch).
Dining Menu CRUD for all menu items (Dinner/Lunch). Categories, prices, descriptions, images. Changes appear on Come & Stay page immediately.
Mailchimp AI-powered email template generator (Gemini). Chat interface to build branded Mailchimp-ready HTML emails using the component library.
Brand Guidelines This document. Embedded reference for all admins.

Tech Stack

Static Site Astro 6.x Compiles .astro files to static HTML. No runtime server.
Hosting Firebase Hosting Multi-site: public (website) + admin (dashboard). Custom domains configured separately.
Backend Firebase Cloud Functions 7 endpoints: submitForm, submissions, events, dining, gallery, generate, templates
Database Cloud Firestore Collections: formSubmissions, events, diningMenu, templates, gallery
Auth Shared Password Simple APP_PASSWORD secret. Not Firebase Auth.
Website Pages

Public Site

The visitor-facing pages on hobackclub.com. These are the pages any user sees before logging in.

hobackclub-website.web.app

Homepage

Current Sections (top to bottom)
  • Video Hero — Full-viewport with curtain reveal animation (Hoback_website_mov2.mp4, autoplay, muted, loop)
  • Weather Bar — 5-day forecast strip
  • Mountain Drawing — Tetons drawing at 15% opacity as decorative separator
  • Auto-scrolling Gallery — Horizontal image strip, pauses on hover
  • "Life at Hoback" Panels — 5 alternating image/text showcase panels (Lodging, Dining, Mountain, Apres, Concierge)
  • Reserve Your Stay — Tan section with tram drawing overlay, CTA to /stay
  • Four Seasons — Full-width seasonal imagery panels
  • Card Carousel — Draggable cards linking to Discover, Stay, Amenities, etc.
Key Images
  • Hero video: /videos/Hoback_website_mov2.mp4 (96 MB)
  • Tram drawing: /images/Jackson_tram.png (at ~55% opacity in reserve section)
  • Tetons drawing: /images/tetons_drawing4.png (at 15% opacity)
  • Building drawing: /images/hoback_drawing1.png (at 25% opacity in footer area)
hobackclub-website.web.app/discover

Discover

Current Sections (top to bottom)
  • Hero — Full-viewport, CE image ID 100170
  • "At the Foot of the Mountain" — Two-column intro (text + CE image 100160), tan background
  • Reserve Your Stay — Right-aligned text with tram drawing on left (700px, 15% opacity), same tan section
  • Explore Jackson Hole — Interactive 3D Mapbox map with 5 valley locations (accordion panel + flyTo map). Same tan section — tram drawing bleeds across all three.
  • Upcoming Events — Dynamic cards fetched from admin API (0–4 events). Tan background.
  • Trail Explorer — 3D Mapbox satellite map with GeoJSON trail/lift data, difficulty legend, elevation profiles on click
Key Images
  • Hero: CE 100170
  • Intro: CE 100160
  • Tram overlay: /images/Jackson_tram.png
  • Valley explorer images: Grand Teton, Snake River, Jackson Town, Yellowstone (external URLs)
Dynamic Content
  • Events fetched client-side from GET /events?published=true — managed in Admin > Events Manager
  • Trail data from /data/jh-runs.geojson and /data/jh-lifts.geojson
hobackclub-website.web.app/stay

Come & Stay

Current Sections (top to bottom)
  • Hero — Full-viewport, CE image ID 100169
  • Mosaic Gallery Part 1 — Two rows: (2 images) then (image + "A Quiet Escape" text). Tan background, stay-content layout.
  • Reservation Form — Tan background. Fields: name, email, phone, check-in, check-out, guests, comments. Submits to submitForm Cloud Function.
  • Mosaic Gallery Part 2 — Four rows: (2 images), (text "1-6 Bedroom Residences" + image), (2 images), (image + text "1-3 Bedroom Suites"). Tan background.
  • Amenities & Services — 6 amenity cards (white on paper bg) + 6 service badges (dark blue)
  • Dining — Collapsible section. Click "View Menu" to expand. Dinner/Lunch toggle tabs. Menu items loaded dynamically from Firestore diningMenu collection.
Key Images (Mosaic Gallery)
  • Row 1: CE 100151, CE 100196
  • Row 2: CE 100152 + "A Quiet Escape" text
  • Row 3: CE 100149, CE 100195
  • Row 4: "1-6 Bedroom Residences" text + CE 100156
  • Row 5: CE 100167, CE 100170
  • Row 6: CE 100172 + "1-3 Bedroom Suites" text
Dynamic Content
  • Dining menu fetched client-side from GET /dining — managed in Admin > Dining Menu
  • Form submissions go to POST /submitForm with formType: "reservation"
hobackclub.com / Amenities

Amenities

Key Changes
  • Improved layout throughout
  • Image and text alternate sides per section (zigzag pattern)

No injectable modules yet. The zigzag layout pattern is a template-level change using the showcase panel style.

hobackclub-website.web.app/lifestyle

Lifestyle

Current Sections (top to bottom)
  • Hero — Full-viewport, /images/Snowfall_hero.png
  • "A Year-Round Destination" — Intro text
  • Season Summary Lists — Two-column grid (Winter / Summer) with activity names. Tan background.
  • Winter/Summer Toggle — Pill-style toggle switching between activity sections
  • Winter Activities — Skiing (6 cards: Ski Passes, Lessons, Fitting, Backcountry, Heli, Nordic) + Section Divider + Other (9 cards: Snowmobiling, Sleigh Rides, Wildlife, Dog Sledding, Snowshoeing, Snowcoach, Ice Skating, Tubing, Climbing)
  • Summer Activities — Main (5 cards: Wildlife, Horseback, Rafting, Fly-Fishing, Hiking) + Section Divider + Other (10 cards: Climbing, Biking, ATV, Golf, Boat Floats, Hot Springs, Helicopter, Balloon, Paragliding, Stargazing)
  • Contact CTA — Dark section with "Plan Your Visit" and concierge button
Activity Card Design
  • 380px tall, border-radius 8px, overflow hidden
  • Full-bleed background image with gradient overlay
  • Title visible by default, description reveals on hover
  • 3D tilt effect on mousemove (perspective 800px, ±6deg rotation)
  • Scroll-reveal animation (translateY 40px → 0, staggered 0.08s per card)
  • All images from CE CDN (IDs 100100–100130)
hobackclub.com / Membership

Membership

Key Changes
  • Possibly add image gallery

No injectable modules yet. Pending decision on gallery addition.

hobackclub.com / Contact Us

Contact Us

Key Changes

Standard contact page — align styling with the new brand system.

No injectable modules. Brand styling applied at the template level.

Mountain Merged into Discover page

Status

The Mountain page content has been merged into the Discover page. Trail Explorer and Valley Explorer maps are live on /discover. Remaining items (weather bar, mountain report dashboard, webcams, flyover video) are documented in to_implement.md for future integration.

hobackclub.com / Login

Login

Key Changes
  • Complete layout redesign (see login.html prototype)

Branded page with Hoback Club logo and a button redirecting to members.hobackclub.com (Club Essential member portal). No auth logic in this repo.