Ui Visual Consistency

Never use font-mono or leave the font unspecified for UI text. Do not reference Geist — the font was migrated to Proxima Nova.

The 5-Point Consistency Checklist

Run every check before marking a component done.

1. Colors — Token-First, Never Hardcoded

Primary vs Blue rule:

• text-primary / bg-primary → member context (theme-driven, changes with program theme)
• text-blue / bg-blue → organizer context OR when you explicitly need the non-themed DEVCON blue (#1152D4)

Organizer routes do not apply program themes — use text-blue there.

Active program themes and their primary hex values:

Never hardcode these hex values — always use bg-primary / text-primary.

2. Cards — Shape + Shadow + Padding

All content cards:

className="bg-white rounded-2xl shadow-card p-4 text-left relative"

Inner info blocks / grouped rows:

className="bg-slate-50 rounded-xl px-3 py-2"

Shadow selection:

Glassmorphism patterns (for overlays and floating elements only — never for main content cards):

// Frosted nav pill
className="bg-white/95 backdrop-blur border border-slate-100 shadow-primary"

// Frosted CTA button (e.g. on cover images)
className="bg-white/20 backdrop-blur-md shadow-lg border border-white/30"

// Header glassmorphism
className="backdrop-blur-md bg-slate-50/80"

overflow-hidden + badge: When a card has overflow-hidden, the PromotedBadge wrapper must have z-10. Without it the badge clips. JobCard-style cards (no overflow-hidden) don't need it — but add it anyway for safety.

3. Animation — Standard Spring Values

Always type: 'spring'. Never duration-based transitions on interactive elements.

All named variants must be imported from lib/animation — never redefined inline:

import {
  fadeUp,        // page entrances, card list entry
  fade,          // page-level opacity transitions
  slideUp,       // bottom sheets and modals
  backdrop,      // backdrop fade-in
  staggerContainer, // parent for staggered child lists
  cardItem,      // individual staggered card/list item
  NAV_SPRING,    // spring config for nav tab indicator
} from '../lib/animation'

List sections — staggered entry:

// Parent
<motion.div variants={staggerContainer} initial="hidden" animate="visible">
// Each child
<motion.div variants={cardItem}>

Note: the animate key is "visible" (not "show") — match the variant keys exactly.

4. Icon Containers

All icons use solar-icon-set outline variant. Never use emoji in JSX.

Themed icon badge (most components):

<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center shrink-0">
  <Icon className="w-5 h-5 text-primary" />
</div>

Avatar / initials circle:

<div className="w-10 h-10 rounded-full bg-blue/10 flex items-center justify-center text-blue text-sm font-bold shrink-0">
  {initials}
</div>

Placeholder icon on bg-primary cover:

<div className="w-full h-36 bg-primary flex items-center justify-center">
  <Icon className="w-12 h-12 text-white/20" />
</div>

5. Typography Scale

The app uses two tiers — MD3 (preferred for new components) and Legacy (existing components).

MD3 type scale (tailwind.config.js — additive tokens):

When using MD3 scale, pair with font-proxima and the appropriate font-weight.

Legacy scale (backward-compatible — do not change unless reworking the component):

Prefer MD3 scale for any new component going forward.

Common Mistakes

Page-Level Constants

Page background:   bg-slate-50
Page gutters:      px-4
Safe bottom:       pb-24  (clears floating nav)
No slate-600 or slate-800 — Tailwind slate has no 600/800 steps