alumni_lookup

Phase 15 — Design Consistency Pass

Canonical sources: Portal philosophy, posture, and language live in /docs/planning/champion-portal/source/README.md.

Status: ✅ Complete
Completed: March 2026
Prerequisites: Phase 14 Complete ✅
Type: View-only polish pass — no model changes, no route changes, no feature logic

Overview

Phase 14 established a refined design language on the /home dashboard via the cp/home/cards/_primary.html.erb and _standard.html.erb partials and the DESIGN-GUIDELINES-PROPOSED.md token set. Every other page in the Alumni Portal (cp/ views) still uses pre-Phase-14 patterns — rounded-xl cards, inconsistent border radius, ALL CAPS section labels, and subtle gradient backgrounds on content containers.

Phase 15 is a visual consistency pass only: update templates across all app/views/cp/ sections to match the design tokens established by /home. No database changes, no route additions, no controller logic. Every sub-phase is independently reviewable and deployable.

What This Is Not

Not a redesign — layout and information architecture are unchanged
Not a feature pass — no new functionality
Not a component refactor — no new Stimulus controllers, no new partials required
Not touching auth/onboarding (sessions/, registrations/, profile_wizard/, landing/) — those belong to a separate UX pass
Not touching the Lookup Portal (app/views/champions/) — these tokens apply to the Alumni Portal only

Design Token Reference

These are the accepted tokens from DESIGN-GUIDELINES-PROPOSED.md. All changes in this phase must conform to them.

Token	Value	Applies To
Card radius	`rounded-md` (6px)	All card/panel containers
Card border	`border border-gray-200`	All cards
Card background	`bg-white`	All card bodies
Card header bg	`bg-gray-50`	All card headers
Card header border	`border-b border-gray-100`	Header separator
Header padding	`px-5 py-3`	Card headers
Body padding	`px-5 py-4`	Card bodies
Shadow	`shadow-sm`	All cards
Section label style	`text-sm font-semibold text-gray-600`	Section/sidebar labels
Section label case	Title Case	Never ALL CAPS

Intentional Exceptions (Do Not Change)

The following patterns are intentionally preserved and must not be changed by this phase:

Pattern	Location	Rationale
`rounded-2xl` on chat bubbles	`support_threads/show`, `messages/*`	Chat UI affordance — the rounded pill shape is a standard messaging convention
Full blue gradient on sharing banner	`messages/index`	Promotional CTA block, not a content card
Full blue gradient on “Still need help” block	`help/index`	Promotional CTA block, not a content card
Community invite banner gradient	`communities/index`, `communities/show`	Status-colored feedback (yellow invite, green referral) — gradient communicates state
Role card micro-gradients	`roles/index`	`from-belmontblue/[0.03] to-white` — barely perceptible, gives each role a distinct flavor
Month abbreviation `uppercase`	`events/show` date badge	Typographic date convention (e.g. “FEB”), not a UI label pattern
Decorative gradient accents	`profile/show`, `directory/show`	Thin `h-2` color bars across card tops, hero image overlays, avatar fallback gradients — all decorative
`rounded-full` everywhere	All	Avatars, badges, pill shapes — not changed
Button radius	All	Button radius is out of scope for this pass

Sub-Phase Summary

Sub-Phase	Name	Scope	Status
15.1	Card Radius Sweep	All `rounded-xl/2xl/lg` → `rounded-md` on cards/panels	✅ Complete
15.2	Card Header Treatment	Add `bg-gray-50 border-b` headers to show-page cards	✅ Complete
15.3	Typography Cleanup	Remove ALL CAPS section labels; standardize to title case	✅ Complete
15.4	Gradient Audit	Replace content-area gradients with flat design tokens	✅ Complete

Sub-Phase 15.1: Card Radius Sweep

Goal

Replace rounded-xl, rounded-2xl, and rounded-lg with rounded-md on all card and panel containers site-wide. This is the highest-impact change and the most mechanical.

Scope Rule

Change: Any div, article, section, or container element that serves as a card, panel, filter bar, empty state, or CTA block and currently uses rounded-xl, rounded-2xl, or rounded-lg.

Do not change:

Buttons (any radius) — deferred
Avatars / rounded-full elements
Chat message bubbles (see Intentional Exceptions)
Role card bodies (see Intentional Exceptions)
Decorative image crops (rounded-lg on photo thumbnails within a visual gallery context is acceptable; change only where it’s a content container)
rounded-lg or rounded-xl on inline icon containers (e.g., type icon blocks inside cards)

Per-File Changes

`cp/discussions/index.html.erb`

Element	Current	Change To
Empty state containers	`rounded-xl`	`rounded-md`
Empty community CTA card	`bg-gray-50 rounded-xl border border-gray-200 p-4 text-center`	`rounded-md`

`cp/discussions/show.html.erb`

Element	Current	Change To
Main post card	`bg-white border border-gray-200 rounded-xl overflow-hidden`	`rounded-md`
Comment form wrapper	`rounded-xl`	`rounded-md`
Individual comment cards	`bg-white border border-gray-200 rounded-lg p-4`	`rounded-md`
Empty state (no comments)	`bg-gray-50 rounded-xl border border-gray-200 p-6 text-center`	`rounded-md`

`cp/news/index.html.erb`

Element	Current	Change To
Submission CTA bar	`rounded-xl border border-belmontblue/10 p-4`	`rounded-md`
Empty state (small)	`bg-gray-50 rounded-xl border-2 border-dashed border-gray-300 p-8`	`rounded-md`
Empty state (full page)	`bg-gray-50 rounded-xl border-2 border-dashed border-gray-300 p-12`	`rounded-md`

`cp/news/show.html.erb`

Element	Current	Change To
Main article card	`bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden`	`rounded-md`

`cp/events/index.html.erb`

Element	Current	Change To
Filter bar card	`bg-white rounded-xl border border-gray-200 shadow-sm p-4`	`rounded-md`
Submission CTA bar	`rounded-xl border border-belmontblue/10 p-4`	`rounded-md`
Empty state	`bg-gray-50 rounded-xl border-2 border-dashed border-gray-300 p-12 text-center`	`rounded-md`
Pagination nav wrapper	`rounded-xl` (if present)	`rounded-md`

`cp/events/show.html.erb`

Element	Current	Change To
Main article card	`bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden`	`rounded-md`
Key details card	`bg-gray-50 rounded-lg p-4 mb-6`	`rounded-md`
Photo grid thumbnails	`rounded-lg` (image crops within gallery grid)	Keep `rounded-lg` — decorative image crop

`cp/communities/index.html.erb`

Element	Current	Change To
My Communities cards	`rounded-xl`	`rounded-md`
Invitation banner	`rounded-xl border border-yellow-200`	`rounded-md`
Empty state box	`rounded-2xl border border-belmontblue/20`	`rounded-md`
Suggestion cards	`rounded-md`	✅ Already correct

`cp/communities/show.html.erb`

Element	Current	Change To
Community header card	`bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden`	`rounded-md`
All section panels (members, discussions, news, events)	`rounded-xl border border-gray-200 ... shadow-sm overflow-hidden`	`rounded-md`
Community Leader panel	`rounded-xl border border-yellow-200 ... shadow-sm overflow-hidden`	`rounded-md`
Invite referral banner	`bg-green-50 border border-green-200 rounded-xl p-4`	`rounded-md`

`cp/directory/index.html.erb`

Element	Current	Change To
Filter container	`bg-white shadow-sm rounded-lg border border-gray-200 p-4`	`rounded-md`
Privacy notice	`bg-blue-50 border border-blue-100 rounded-lg`	`rounded-md`
Empty state	`text-center py-12 bg-white rounded-lg border border-gray-200`	`rounded-md`

`cp/directory/show.html.erb`

Element	Current	Change To
Hero card	`bg-white shadow-sm rounded-xl border border-gray-100 overflow-hidden`	`rounded-md`
Main content card	`rounded-xl` (if separate from hero)	`rounded-md`

`cp/profile/show.html.erb`

Element	Current	Change To
Hero card	`bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden`	`rounded-md`
Main content card	`rounded-xl`	`rounded-md`
Profile completion block	`bg-skyblue/10 rounded-xl border border-skyblue/30 p-5`	`rounded-md`
Empty info placeholders	`rounded-lg`	`rounded-md`

`cp/profile/edit.html.erb`

Element	Current	Change To
Main content panel	`bg-white shadow-sm rounded-lg border border-gray-200`	`rounded-md`
Profile completion notice	`rounded-lg bg-skyblue/10 border border-skyblue/30 p-4`	`rounded-md`

`cp/photo_albums/index.html.erb`

Element	Current	Change To
Album cards	`bg-white rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition overflow-hidden`	`rounded-md`
Empty state	`text-center py-16 bg-white rounded-xl border border-gray-200`	`rounded-md`

`cp/photo_albums/show.html.erb`

Element	Current	Change To
Empty state	`text-center py-16 bg-white rounded-xl border border-gray-200`	`rounded-md`
Photo grid thumbnails	`rounded-lg aspect-square overflow-hidden`	Keep `rounded-lg` — decorative image crop

`cp/messages/index.html.erb`

Element	Current	Change To
Thread list container	`bg-white shadow rounded-lg divide-y divide-gray-200`	`rounded-md shadow-sm`
Empty state	`text-center py-12 bg-white shadow rounded-lg`	`rounded-md shadow-sm`
Community sharing banner	`rounded-xl`	`rounded-md` (gradient kept per exceptions)
Privacy notice	`bg-blue-50 border border-blue-100 rounded-lg`	`rounded-md`

`cp/support_threads/index.html.erb`

Element	Current	Change To
Thread containers	`bg-white border border-gray-200 rounded-xl divide-y divide-gray-100`	`rounded-md`
Empty state	`bg-white border border-gray-200 rounded-xl p-12 text-center`	`rounded-md`

`cp/support_threads/show.html.erb`

Element	Current	Change To
Messages container	`bg-white rounded-xl border border-gray-200 overflow-hidden`	`rounded-md`
Reply form wrapper	`rounded-xl`	`rounded-md`
Resolved notice	`bg-green-50 border border-green-200 rounded-xl p-4`	`rounded-md`
Message bubbles	`rounded-2xl p-4`	✅ Keep `rounded-2xl` — chat UI convention

`cp/submissions/index.html.erb`

Element	Current	Change To
Submission cards	`bg-white rounded-xl border border-gray-200 p-4 sm:p-5`	`rounded-md`
Empty state	`bg-white rounded-xl border-2 border-dashed border-gray-300 p-8 sm:p-12`	`rounded-md`
Type icon block	`rounded-lg bg-blue-50` / `rounded-lg bg-purple-50`	Keep `rounded-lg` — icon container is a decorative shape, not a card

`cp/roles/index.html.erb`

Element	Current	Change To
Role cards container	`rounded-xl overflow-hidden shadow-sm border border-belmontblue/15`	`rounded-md`
Role card gradient backgrounds	`bg-gradient-to-br from-belmontblue/[0.03] to-white`	✅ Keep — intentional role-flavored accent

`cp/help/index.html.erb`

Element	Current	Change To
FAQ category cards	`bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden`	`rounded-md`
“Still need help” CTA block	`rounded-xl`	`rounded-md` (gradient kept per exceptions)

`cp/settings/show.html.erb`

Element	Current	Change To
Main content panel	`bg-white shadow-sm rounded-lg border border-gray-200 py-6 sm:p-8`	`rounded-md`

Acceptance Criteria — 15.1

All content card/panel containers use rounded-md
No rounded-xl or rounded-2xl on content containers (exceptions documented above)
rounded-lg preserved only on decorative image crops and icon containers
bin/test passes with 0 failures after each committed file
Visual review: all 18 affected pages reviewed at 375px and 1280px

Sub-Phase 15.2: Card Header Treatment

Goal

Apply the card header pattern from /home to the primary content cards on show pages. These pages have titled sections but no visual header bar differentiation today, making the card body feel structureless.

The Pattern

<!-- Header -->
<div class="bg-gray-50 border-b border-gray-100 px-5 py-3 flex items-center justify-between">
  <h2 class="text-base font-semibold text-gray-900">Title</h2>
  <a href="..." class="text-sm text-belmontblue hover:underline">Action →</a> <!-- optional -->
</div>
<!-- Body -->
<div class="px-5 py-4">
  ...
</div>

Per-File Changes

`cp/discussions/show.html.erb`

The main post card currently has content flowing edge-to-edge with no header structure. Add header bar:

Area	Change
Post card top	Add `bg-gray-50 border-b border-gray-100 px-5 py-3` header containing post title and community badge
Comment section card	Add `bg-gray-50 border-b border-gray-100 px-5 py-3` header with “Discussion” label and comment count
Reply form	No header needed — it’s an action form, not a card with a title

`cp/communities/show.html.erb`

Section panels (Members, Discussions, News, Events, Community Leaders) currently have ad-hoc section titles inline with their content. Standardize to card header pattern:

Panel	Change
Members panel	Extract section title into `bg-gray-50 border-b border-gray-100 px-5 py-3` header; move “View All” link to header right
Discussions panel	Same treatment; move “Start a Discussion” or “View All” link to header right
News panel	Same treatment
Events panel	Same treatment
Community Leaders panel	Same treatment

`cp/directory/show.html.erb`

The alumni profile show page (directory show) has inline section labels — “About”, “Champion Role”, “Groups & Organizations” — inside the main content card. These will be changed in 15.3 (typography), but the main card itself should get a header bar:

Area	Change
Main profile card	Add `bg-gray-50 border-b border-gray-100 px-5 py-3` header with the alum’s name as `h2`

`cp/profile/show.html.erb`

The self-profile view. The hero card has a gradient accent bar but no header treatment:

Area	Change
Main content panel	Add `bg-gray-50 border-b border-gray-100 px-5 py-3` header with “My Profile” label and “Edit Profile →” action link

Acceptance Criteria — 15.2

Card header pattern (bg-gray-50 border-b border-gray-100 px-5 py-3) applied to all targeted show-page cards
Section titles promote to header bars; content body starts in px-5 py-4 wrapper
“View All” / action links positioned in header right (justify-between)
Visual review confirms no double-borders or mis-aligned padding
bin/test passes with 0 failures

Sub-Phase 15.3: Typography Cleanup

Goal

Remove all uppercase tracking-wider and uppercase tracking-wide patterns from section labels and form field labels. Replace with title case using text-sm font-semibold text-gray-600.

Background

The design guidelines specify: no ALL CAPS headers. Title case per LANGUAGE_STYLE_GUIDE.md. The following pages currently use ALL CAPS on section labels and form field labels.

Per-File Changes

`cp/profile/show.html.erb`

Location	Current	Change To
Sidebar section labels	`text-xs font-semibold text-gray-400 uppercase tracking-wider`	`text-xs font-semibold text-gray-500` (title case label text)
Main content section headers (“About”, “Champion Role”, “Groups & Organizations”)	`text-sm font-semibold text-gray-900 uppercase tracking-wide`	`text-sm font-semibold text-gray-900` (title case, remove uppercase + tracking)

Note: The label text strings themselves must also be changed from ALL CAPS to Title Case where they were written uppercase in the template (e.g., EDUCATION → Education, WORK → Work).

`cp/directory/show.html.erb`

Location	Current	Change To
Sidebar section labels (“Education”, “Work”)	`text-xs font-semibold text-gray-400 uppercase tracking-wider`	`text-xs font-semibold text-gray-500`
Main content section headers (“About”, “Champion Role”, “Groups & Organizations”)	`text-sm font-semibold text-gray-900 uppercase tracking-wide`	`text-sm font-semibold text-gray-900`

Same note: update any text node that was written as EDUCATION or WORK to Education / Work.

`cp/events/index.html.erb`

Location	Current	Change To
Filter form field labels (“Community”, “Location”)	`text-xs font-medium text-gray-500 uppercase tracking-wider`	`text-xs font-medium text-gray-600` (title case text)

Acceptance Criteria — 15.3

No uppercase tracking-wider or uppercase tracking-wide on any section/form labels in cp/ views
All affected label text strings updated to Title Case (not just removing CSS class)
Month abbreviation in events/show date badge untouched
bin/test passes with 0 failures
Visual review confirms section text reads naturally in title case at both widths

Sub-Phase 15.4: Gradient Audit

Goal

Replace subtle gradient backgrounds on content containers with flat tokens. Distinguishes between contextual gradients (status/promo — kept) and cosmetic gradients (noise — removed).

Decision Framework

Gradient Type	Action
Full-color promo block (blue, etc.)	Keep — communicates energy / CTA intent
Status-colored banner (yellow invite, green referral)	Keep — communicates state
Near-transparent section gradients (`from-white/65` on card panels)	Remove → `bg-white`
Subtle belmontblue/5 on CTA bars	Remove → `bg-gray-50`
`from-gray-50 to-white` on card header section bars	Remove → `bg-gray-50`
Role card micro-gradients	Keep — intentional flavor
Decorative accents (thin bars, hero images, avatar fallbacks)	Keep — not affecting card container perception

Per-File Changes

`cp/news/index.html.erb`

Element	Current	Change To
Submission CTA bar	`bg-gradient-to-r from-belmontblue/5 to-transparent rounded-xl border border-belmontblue/10`	`bg-gray-50 rounded-md border border-gray-200`

`cp/events/index.html.erb`

Element	Current	Change To
Submission CTA bar	`bg-gradient-to-r from-belmontblue/5 to-transparent rounded-xl border border-belmontblue/10`	`bg-gray-50 rounded-md border border-gray-200`

Note: rounded-xl on these elements will already be changed to rounded-md in 15.1. The gradient → flat change is the sole remaining task here.

`cp/communities/show.html.erb`

Element	Current	Change To
All section panel backgrounds	`bg-gradient-to-b from-white/65 to-white/95`	`bg-white`
Community Leader panel background	`bg-gradient-to-b from-yellow-50/60 to-white`	`bg-yellow-50/30` (flat tint, consistent with status-color rationale without the gradient noise)

`cp/help/index.html.erb`

Element	Current	Change To
FAQ category card header bar	`bg-gradient-to-r from-gray-50 to-white border-b border-gray-200 px-6 py-4`	`bg-gray-50 border-b border-gray-100 px-5 py-3` (aligns with card header token)
“Still need help” CTA block	`bg-gradient-to-r from-belmontblue to-admissionsblue rounded-xl p-8 text-center text-white`	✅ Keep gradient — intentional full-color promotional block

Accepted Exceptions (Confirmed)

Element	File	Kept Because
Community sharing banner	`messages/index`	Full blue = promotional CTA
“Still need help” block	`help/index`	Full blue = promotional CTA
Community invite banner	`communities/index`	Yellow = invitation status color
Community referral banner	`communities/show`	Green = referral status color
Role card body gradients	`roles/index`	Intentional role-flavored accent
Thin `h-2` accent bars	`profile/show`, `directory/show`	Decorative, not a card container background
Hero image gradients	`events/show`, `news/show` etc.	Decorative photo overlay
Avatar fallback gradients	Throughout	Decorative icon

Acceptance Criteria — 15.4

No cosmetic from-belmontblue/5 or from-white/65 gradients on content card bodies
CTA bars on news/index and events/index use bg-gray-50 flat background
Community section panels use bg-white
FAQ category card headers use bg-gray-50 (consistent with card header token)
All documented exceptions are preserved
bin/test passes with 0 failures
Visual review confirms no “flat” look feels stripped — warmth comes from spacing and bg-gray-50 headers

Full Acceptance Criteria

Functional

bin/test passes with 0 failures, 0 errors throughout all sub-phases
No controller, model, service, or route changes introduced
No new partials required (existing views updated in place)

Visual — Mobile (375px)

Visual — Desktop (1280px)

All same pages reviewed at desktop width
Grid layouts unaffected
Sidebar layouts unaffected

Design Alignment

No rounded-xl or rounded-2xl on any content card/panel container (chat bubbles excepted)
No uppercase tracking-wider or uppercase tracking-wide on any section/form labels
No cosmetic gradient backgrounds on content card bodies
Card headers with bg-gray-50 border-b border-gray-100 applied to targeted show pages

Technical Notes

Recommended Execution Order

Complete 15.1 (radius) as a single commit per page or in logical groups
Complete 15.3 (typography) before 15.2 (headers), since typography changes are standalone
Complete 15.2 (headers) next — requires reading updated templates from 15.1
Complete 15.4 (gradients) last — some changes overlap with 15.1 tokens (CTA bar radius was already changed)

Testing Note

No new test coverage is required for view-only changes. Run bin/test before each sub-phase commit to confirm no regressions in existing tests. If a test is failing, it is likely a pre-existing failure unrelated to this phase.

Deployment Note

Each sub-phase can be deployed independently. There are no database dependencies. Standard deploy process applies.

Interview Decisions

#	Question	Decision	Rationale
1	Scope	All `cp/` views	Comprehensive site-wide pass for maximum consistency
2	Spec format	Section-by-section with specific class changes per page	Precise enough to implement without ambiguity
3	Phase number	Phase 15 (new top-level phase)	Phase 14 is complete; this is a distinct initiative
4	Role card micro-gradients	Keep	Subtle enough; gives each role a distinct flavor without violating card token intent
5	Show-page card headers	Add `bg-gray-50` header bars to discussions/show, communities/show, profile/show, directory/show	Increases structure and consistency with home page cards
6	Full-color gradient promo banners	Keep	Messages sharing banner and help CTA block are promotional contexts, not content cards