alumni_lookup

Champion Portal — Design Guidelines

Version: 1.0
Last Updated: December 2025
Purpose: Ensure the Champion Portal feels warm, welcoming, and distinctly Belmont Status: Living Document

Design Philosophy
Brand Colors
Typography
Iconography
Imagery
UI Components
Recognition & Celebration
Mobile Considerations
Accessibility
Image Request Checklist

1. Design Philosophy

Warm, Not Sterile

The Champion Portal is a community, not a corporate portal. Every design decision should reinforce that Champions are welcomed, valued, and connected.

❌ Avoid:

Generic corporate UI patterns
Cold, gray-heavy color schemes
Transactional language (“Submit,” “Process,” “Request”)
Empty states that feel abandoned

✅ Embrace:

Warm, inviting color palettes (Belmont blues + accents)
Friendly, conversational language (“Say Hello,” “Share Your Story”)
Empty states that encourage action (“No Champions in Portland yet—could you be the first?”)
Moments of delight and celebration

Community Over Utility

This isn’t just a tool—it’s a place to belong. Design should:

Surface people, not just data
Celebrate contributions (events hosted, stories shared, connections made)
Make Champions feel recognized
Create moments of unexpected delight

Recognition Matters

Per JOBS-TO-BE-DONE.md Job C10:

“When I put effort into being a Champion, I want to see that my contributions matter.”

Every feature should ask: How can we recognize the people who contribute?

Examples:

“Sarah hosted 3 events this year” badge on profile
“Active in your city this week” highlights in directory
“Welcome our newest Champion: Mike from Atlanta!” on dashboard
Subtle activity indicators (green dot, recent badge)

2. Brand Colors

Based on Belmont Brand Guidelines:

Primary Colors

Color	Hex	Tailwind Class	Usage
Belmont Blue	`#001D54`	`bg-belmontblue`, `text-belmontblue`	Primary brand, headers, buttons
Tower Red	`#862633`	`bg-towerred`, `text-towerred`	Accents, alerts, important callouts

Secondary Colors

Color	Hex	Tailwind Class	Usage
Sky Blue	`#6AB3E7`	`bg-skyblue`, `text-skyblue`	Highlights, links, engagement indicators
Fountain Blue	`#2874AF`	`bg-fountainblue`, `text-fountainblue`	Secondary buttons, hover states
Admissions Blue	`#1D4289`	`bg-admissionsblue`, `text-admissionsblue`	Alternative primary for variety

Supporting Colors

Color	Hex	Tailwind Class	Usage
Light Gray	`#F5F5F5`	`bg-lightgray`	Backgrounds, cards
Dark Gray	`#3D3D3D`	`text-darkgray`	Body text
Belmont Red	`#B21029`	`bg-belmontred`	Warnings, destructive actions

Color Usage Principles

Belmont Blue is the anchor — Use for primary navigation, buttons, and headers
Sky Blue for engagement — Activity indicators, success states, “active” badges
Tower Red sparingly — Alerts, important notices, but not dominant
White space is your friend — Let content breathe, avoid color overload
Warm over cold — When in doubt, choose warmer tones

Example Color Applications

<!-- Primary button -->
<button class="bg-belmontblue hover:bg-fountainblue text-white px-4 py-2 rounded">
  Say Hello
</button>

<!-- Secondary button -->
<button class="bg-white border border-belmontblue text-belmontblue hover:bg-lightgray px-4 py-2 rounded">
  Learn More
</button>

<!-- Success/Active indicator -->
<span class="bg-skyblue text-white text-xs px-2 py-1 rounded-full">
  Active
</span>

<!-- Card with warmth -->
<div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm hover:shadow-md transition">
  <!-- Content -->
</div>

3. Typography

Font Families

Already configured in application.tailwind.css:

Purpose	Font	Tailwind Class
Body text	Inter	`font-sans` (default)
Headings	Montserrat	`font-sansalt`

Usage Guidelines

<!-- Page titles -->
<h1 class="font-sansalt text-3xl font-bold text-belmontblue">
  Welcome, Sarah
</h1>

<!-- Section headers -->
<h2 class="font-sansalt text-xl font-semibold text-gray-800">
  Champions in Nashville
</h2>

<!-- Body text -->
<p class="text-darkgray leading-relaxed">
  Connect with fellow Bruins in your city.
</p>

Tone of Voice

Friendly, not formal — “Hey there” over “Dear User”
Active, not passive — “You hosted 3 events!” over “3 events were hosted”
Encouraging, not neutral — “Almost there!” over “Step 3 of 4”
Inclusive, not exclusive — “Everyone’s welcome” over “Members only”

4. Iconography

Icon Style

Use outline icons from Heroicons for consistency:

Context	Icon	Usage
Contact/Message	`envelope`	Contact button, messaging
Profile	`user-circle`	Profile views, account
Directory	`users`	Champion directory
Events	`calendar`	Event listings
Location	`map-pin`	City/location indicators
Search	`magnifying-glass`	Directory search
Success	`check-circle`	Confirmations
Activity	`sparkles`	Recent activity, engagement

Icon Usage

<!-- Icon with text -->
<button class="inline-flex items-center gap-2 bg-belmontblue text-white px-4 py-2 rounded">
  <%= heroicon "envelope", variant: :outline, options: { class: "w-5 h-5" } %>
  Say Hello
</button>

<!-- Icon-only (with accessibility) -->
<button aria-label="View profile" class="p-2 hover:bg-gray-100 rounded">
  <%= heroicon "user-circle", variant: :outline, options: { class: "w-6 h-6 text-belmontblue" } %>
</button>

Avoid

❌ Mixing icon styles (outline vs. solid randomly)
❌ Generic clip art
❌ Corporate stock icons
❌ Too many icons (let text do the work when clear)

5. Imagery

Photography Style

The Champion Portal should feature real Belmont imagery:

Campus photos (recognizable landmarks)
Alumni events (genuine, not staged)
City skylines (Champion cities: Nashville, Atlanta, Dallas, etc.)
People connecting (small groups, conversations, not giant crowds)

Image Categories Needed

Category	Purpose	Examples
Hero images	Landing pages, welcome screens	Campus sunset, tower shot
City headers	City pages, directory filters	Nashville skyline, Atlanta skyline
Activity illustrations	Empty states, section headers	People at coffee meetup, alumni at event
Profile placeholders	Default avatar	Friendly, neutral silhouette
Success moments	Confirmation screens	Celebration, connection

Default Profile Image

For Champions without photos, use a friendly placeholder:

Neutral silhouette or abstract avatar
Belmont Blue background
Not a generic gray person icon

Image Treatment

Subtle overlays for text legibility
Rounded corners on profile images
Consistent aspect ratios within components
Lazy loading for performance

6. UI Components

Cards

Champions, events, and content appear in cards:

<div class="bg-white rounded-lg border border-gray-200 p-6 hover:shadow-md transition">
  <!-- Card content -->
</div>

Buttons

Type	Usage	Example
Primary	Main actions	“Say Hello,” “Submit Event”
Secondary	Alternative actions	“Learn More,” “Cancel”
Ghost	Subtle actions	“Edit,” “View All”

Empty States

Empty states should encourage action, not just report absence:

❌ Bad:

No Champions found.

✅ Good:

No Champions in Portland yet.
Know an alum there? Invite them to join!
[Invite a Champion]

Loading States

Skeleton screens over spinners when possible
Keep users oriented during loads
Progressive loading for lists

7. Recognition & Celebration

Activity Indicators

Show who’s active and engaged:

<!-- Active indicator on profile card -->
<div class="relative">
  <img src="..." class="w-12 h-12 rounded-full" />
  <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white rounded-full" 
        title="Active this week"></span>
</div>

Contribution Badges

Recognize Champions for their contributions:

Badge	Trigger
🎉 Event Host	Hosted at least 1 event
📖 Storyteller	Shared a story
🤝 Connector	Sent 5+ messages
⭐ Active	Active every week for a month

Welcome Moments

New Champions should feel welcomed:

<!-- Dashboard welcome for new Champions -->
<div class="bg-gradient-to-r from-belmontblue to-admissionsblue text-white rounded-lg p-6">
  <h2 class="text-2xl font-bold">Welcome to the Champion Portal, Sarah! 🎉</h2>
  <p class="mt-2">You're now connected to 127 Champions across 23 cities.</p>
  <a href="..." class="mt-4 inline-block bg-white text-belmontblue px-4 py-2 rounded font-semibold">
    Find Champions Near You
  </a>
</div>

Celebration Confetti

For milestone moments (first event submitted, account verified), consider subtle confetti or animation.

8. Mobile Considerations

Mobile-First Design

Most Champions will access via phone. Every component must work on small screens.

Principles:

Touch-friendly tap targets (min 44x44px)
Thumb-reachable primary actions
Collapsible navigation
Stacked cards on mobile
Bottom navigation consideration for key actions

Responsive Breakpoints

Breakpoint	Size	Design
Mobile	< 640px	Single column, stacked
Tablet	640–1024px	Two columns where appropriate
Desktop	> 1024px	Full layout, sidebars

9. Accessibility

Requirements

Color contrast: WCAG AA minimum (4.5:1 for text)
Focus states: Visible keyboard focus indicators
Alt text: All images must have descriptive alt text
ARIA labels: Interactive elements need accessible names
Skip links: Navigation skip for keyboard users

Testing

Test with keyboard navigation
Test with screen reader (VoiceOver, NVDA)
Check color contrast with browser tools

10. Image Request Checklist

When requesting images from stakeholders, provide:

Standard Practice: Image Placeholders in Designs

When building pages, always include explicit image placeholders with requests:

<!-- Example placeholder in ERB -->
<div class="relative bg-gray-200 rounded-lg overflow-hidden" style="aspect-ratio: 16/9;">
  <div class="absolute inset-0 flex items-center justify-center text-gray-500">
    <div class="text-center p-4">
      <svg class="w-12 h-12 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
      </svg>
      <p class="font-medium">IMAGE NEEDED</p>
      <p class="text-sm">Hero: Campus bell tower at sunset</p>
      <p class="text-xs">1920x600px, landscape, space for text overlay on left</p>
    </div>
  </div>
</div>

The placeholder should include:

Purpose (Hero, Profile, City header, etc.)
Subject description
Dimensions or aspect ratio
Any special requirements (text overlay space, mood, etc.)

This makes it clear what images need to be procured before launch.

For Hero/Header Images

Purpose: Where will this image appear?
Dimensions: Recommended size (e.g., 1200x400 for hero)
Orientation: Landscape, portrait, or square
Subject: What should be in the image?
Mood: Warm, celebratory, professional, casual
Text overlay: Will there be text on top? (affects composition)

For City Images

Cities needed: List of cities (Nashville, Atlanta, Dallas, etc.)
Recognizable landmarks: Skylines, iconic buildings
Time of day: Daytime preferred for warmth

For Activity/People Images

Context: Event, meetup, conversation, celebration
Group size: Individual, small group (3-5), crowd
Diversity: Representative of Champion community
Authenticity: Real events preferred over stock

Example Request

Image Request: Champion Portal Hero Image

Purpose: Landing page hero image for champions.bualum.co Dimensions: 1920x600px (will be cropped responsively) Subject: Belmont campus with alumni, ideally near the bell tower or lawn Mood: Warm, welcoming, aspirational Text overlay: Yes — need space on left side for headline Notes: Avoid dated clothing or event-specific signage

Document	Purpose
../JOBS-TO-BE-DONE.md	User motivations
../STAKEHOLDER-OVERVIEW.md	Value propositions
`application.tailwind.css`	Tailwind color configuration
Belmont Brand Colors	Official brand guidelines

This document should evolve as we build. Add patterns that work, remove patterns that don’t.