Design Briefs — Three Visual Directions

Events Page — Three Design Direction Briefs

Date: 2026-03-16 Context: All 3 directions share the same page structure, data, and functionality (see build-spec.md). What differs is the visual treatment, density, and emotional tone.

Direction A: "Community Hub"

Mood

Warm, inviting, people-first. Feels like walking into a welcoming community center. Emphasizes the human connection — instructors, fellow students, shared experience.

Visual Approach

• Hero: Large background image (event photo or community gathering), purple gradient overlay, warm headline in Montserrat Black. Show a few instructor faces as circular avatars floating near the headline for immediate human connection.
• Cards: Medium-density. Generous padding. Instructor avatar prominently placed next to title. Background image (image_bg) as card header with subtle gradient overlay. Warm shadows.
• Filter bar: Pill tabs with soft transitions. Active pill uses purple. Continent tabs feel like "neighborhoods" — consider subtle icons (flag or landmark) next to continent names.
• Social proof emphasis: Show "X students registered" prominently on each card with stacked avatar circles. If total_attendees > 20, show it as a badge.
• Expanded view: Inline accordion below card. Show instructor section with larger avatar. Include a "Share with friends" WhatsApp button.

Color Emphasis (within brand palette)

• Primary: #811CE5 (purple) for structure
• Accent: #F5EBFF (light purple bg) for section alternation
• CTA: #FDCA17 (gold) for buttons
• Warm sections: use light purple (#F5EBFF) background between card rows for breathing room

Typography Emphasis

• Montserrat 800 for hero headline (large, impactful)
• Readex Pro 500 for card titles (slightly softer than bold)
• Use italic Readex Pro for instructor names (subtle warmth)

Card Layout

• Desktop: 2 columns, larger cards with more whitespace
• Mobile: Single column, full-width cards
• Card aspect: Horizontal on desktop (image left, content right — like the seminar carousel cards at 882px)
• Image: Use image_bg (960x600) cropped to left third of card

Unique Elements

• Floating "people registered" mini-avatars on cards
• Warm gradient dividers between continent sections
• "Recommended for you" badge on closest event (based on stored sort order)

Direction B: "Clean Directory"

Mood

Efficient, scannable, information-dense. Feels like a well-organized course catalog. Designed for the returning student who knows what they want and needs to find it fast.

Visual Approach

• Hero: Minimal. Compact header with headline, subheadline, and filter bar immediately visible. No hero image — the filter bar IS the hero. Get to the content in under 2 seconds.
• Cards: Compact, high-density. Small poster image (image, 250x375) as thumbnail on left. Key info (title, instructor, city, date, price) scannable in a single row. Credits and type shown as small badges.
• Filter bar: Prominent, sticky, with event count indicators. Each city pill shows count: "Dallas (2)" / "London (1)". Active filter uses purple. Include a simple sort dropdown (Date / Distance / Name).
• Social proof: Subtle — show registration count as a small number, not prominently featured.
• Expanded view: Slide-down panel below card with structured sections (Details | Schedule | Pricing). Tab-like structure within the expanded area.

Color Emphasis (within brand palette)

• Primary: #201B42 (dark navy) for headings — feels authoritative
• Structure: #F5F4F7 (off-white) for alternating row backgrounds
• CTA: #FDCA17 (gold) for Register button only — minimal gold, maximum impact
• Borders: #D9DBE1 consistently for card separation

Typography Emphasis

• Montserrat 700 for page title only (smaller than Direction A)
• Readex Pro 600 for card titles (crisp, scannable)
• Readex Pro 400 at 14px for meta information (tight, compact)
• Monospace-feel for dates and prices (consider tabular nums)

Card Layout

• Desktop: 1 column, list/table-like rows (full-width cards, image small on left)
• Alternate desktop: 3 columns, compact square cards
• Mobile: Single column, compact cards
• Image: Use image (250x375 poster) as small thumbnail (80x80 or 100x120)

Unique Elements

• Event count badges on city pills: "Dallas (2)"
• Sort dropdown in filter bar
• Compact pricing table in expanded view
• Keyboard navigation support (arrow keys to browse events)
• "X events found" result count above cards

Direction C: "Immersive Showcase"

Mood

Visual, cinematic, experiential. Feels like browsing a premium event platform. Large images draw you in. The courses feel like experiences worth traveling for.

Visual Approach

• Hero: Full-bleed background image (dark, atmospheric — could use one of the event bg images with heavy overlay). Large Montserrat 900 headline. Purple-to-transparent gradient. Feels like an event poster.
• Cards: Image-dominant. Large image_bg (960x600) as card background with text overlay at bottom (gradient from transparent to dark). Title in white over the image. Instructor and details revealed on hover/tap.
• Filter bar: Minimal, elegant. Continent tabs as underlined text links (not pills). City selection as a horizontal scroll of city names. Less chrome, more content.
• Social proof: Instructor reputation emphasized — larger name, bio snippet visible.
• Expanded view: Modal/lightbox that overlays the page. Full image at top, content below. Cinematic feel.

Color Emphasis (within brand palette)

• Dark dominance: black and #201B42 for card overlays
• Purple: #811CE5 for accents and active states only
• Gold: #FDCA17 sparingly — only on the Register CTA
• White text on dark backgrounds throughout cards

Typography Emphasis

• Montserrat 900 (Black) for hero — maximum impact
• Readex Pro 600 in white for card titles over images
• Readex Pro 400 in light gray for card meta on dark bg
• Larger base font size (18px body) for premium feel

Card Layout

• Desktop: 3 columns, square/landscape cards with image backgrounds
• Mobile: Single column, full-bleed cards edge to edge (no side padding)
• Image: Use image_bg (960x600) as full card background, 16:10 aspect ratio
• Text overlaid on bottom gradient

Unique Elements

• Parallax-subtle scroll on hero image
• Card hover: image zoom + info reveal from bottom
• Modal expanded view with cinematic layout
• "Featured Event" spotlight for the nearest/soonest event
• Smooth page transitions between filter states

Comparison Matrix