UBEMSA

Overview

UBEMSA is the University of Benin Medical Students' Association—a vibrant, community-driven platform that nurtures future medical leaders through education, service, and engagement. The design system embraces a "Gradient-Glassmorphism" aesthetic: a light, airy blue-to-cyan gradient foundation (linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #dbeafe 100%)) layered with frosted-glass surfaces (backdrop-filter: blur(10px), background: rgba(255, 255, 255, 0.25)) and bold purple-to-violet accent gradients. The emotional response is one of clarity, professionalism, and approachability—the interface feels both trustworthy and energetic, inviting students to explore and participate.

The brand voice is warm, inclusive, and purposeful. UBEMSA speaks to medical students as peers and future colleagues, using language that balances clinical precision with human empathy. Vocabulary favors action-oriented terms ("nurture," "engage," "lead") and community-focused language ("our," "together," "support"). Example sentence in brand voice: "Join our community of future doctors—where education meets service, and every voice shapes tomorrow's healthcare leaders."

Colors

The color system is built on a dual-layer philosophy: a serene, light blue gradient surface (primary surface: #f0f9ff, surface-dim: #dbeafe) that evokes medical clarity and calm, paired with a bold purple primary accent (#8a0593) that commands attention on CTAs and key interactions. Primary (#8a0593) is used exclusively for call-to-action buttons (padding: 14px 30px, border-radius: 30px), active navigation underlines (height: 2px, background: #8a0593), and gradient overlays on hero text (background: linear-gradient(135deg, #8a0593, #8b5cf6)). Secondary (#0d8b7c, a teal) supports status indicators and secondary accents, while tertiary (#8b5cf6, a violet) is reserved for icon backgrounds and decorative gradients. The glass layer uses rgba(255, 255, 255, 0.25) for standard cards (backdrop-fil

Typography

The type system uses Inter as the primary typeface, chosen for its geometric clarity and excellent legibility at all sizes—critical for medical and educational contexts. Display (56px, 700 weight, -0.04em letter-spacing) anchors hero sections with maximum impact; headline-lg (40px, 600 weight) structures major sections; headline-md (28px, 600 weight) breaks content into digestible chunks; body-lg (18px, 400 weight) and body-md (16px, 400 weight) carry narrative content with 1.5–1.6 line-height for comfortable reading. Label-md (14px, 600 weight, 0.01em letter-spacing) is applied to buttons and interactive labels, while label-sm (12px, 500 weight, 0.05em letter-spacing) marks badges and tertiary information. On small labels over busy backgrounds (e.g., badges on gradient cards), apply text-

Layout

The layout follows a fluid, 12-column grid system with a maximum container width of 1400px, allowing content to breathe on ultra-wide displays while maintaining focus on medium screens. The hero section uses a 5% horizontal padding (padding: 180px 5% 120px) to create breathing room, with the content flex-basis of 600px on the left and floating cards (width: 500px, height: 500px) on the right. Section spacing uses the lg token (40px) for vertical rhythm between major sections (pictorial-grid: padding: 80px 5%), while the gutter token (24px) separates card columns in grids (gap: 30px). The background gradient (linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #dbeafe 100%)) is fixed to the viewport, creating a consistent visual anchor. Responsive breakpoints collapse the hero to a single colu

Elevation & Depth

Depth is conveyed through a three-tier glass-layer system combined with subtle shadows and transform effects. Level 1 (Base): The fixed background gradient (linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #dbeafe 100%)) with radial gradient overlays (radial-gradient(circle at 20% 30%, rgba(138, 5, 147, 0.1) 0%, transparent 50%)) establishes the visual foundation. Level 2 (Standard Glass Cards): backdrop-filter: blur(10px), background: rgba(255, 255, 255, 0.25), border: 1px solid rgba(255, 255, 255, 0.2), box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1). Level 3 (Elevated/Modals & Expanded Cards): bac

Shapes

The shape philosophy is "Soft-Technical Approachability"—rounded corners are generous but not organic, signaling both friendliness and professionalism. Buttons and CTAs use full radius (border-radius: 30px, equivalent to {rounded.full}), creating pill-shaped forms that feel inviting and modern. Glass cards and standard containers use lg radius (border-radius: 1rem / 16px), balancing softness with structure. Icon backgrounds within cards use md radius (border-radius: 0.75rem / 12px), creating a subtle visual hierarchy. Input fields and smaller interactive elements use DEFAULT radius (border-rad

Components

Action Elements Buttons are the primary interaction mechanism and use the full radius (30px) to signal approachability. button-primary (background: #8a0593, color: #ffffff, padding: 14px 30px, height: 48px, box-shadow: 0 4px 14px rgba(138, 5, 147, 0.3)) is the dominant CTA, appearing on hero sections and key conversion points. On hover, button-primary-hover transitions to a transparent background with a 2px border-color: #8a0593, translateY(-3px), and elevated shadow (0 6px 20px rgba(138, 5, 147, 0.2)) over 0.3s ease. button-secondary uses a transparent background with a 2px border-color: #8a0593, maintaining the same padding and height; on hover, it mirrors the primary hover state. Navigation links (nav a) use a 2px bottom border that animates from 0 to 100% width on hover (transition

Do's and Don'ts

**Do**

• Do use the primary purple (#8a0593) exclusively for CTAs, active states, and brand-defining moments—never for backgrounds or body text.
• Do apply glass-card styling (backdrop-filter: blur(10px), rgba(255, 255, 255, 0.25)) to all floating or layered surfaces to maintain visual cohesion.
• Do pair headline text with gradient overlays (linear-gradient(135deg, #8a0593, #8b5cf6)) only on hero sections; use solid on-surface (#1e293b) for body content.
• Do maintain the 0.3s ease transition timing across all interactive elements (buttons, cards, nav links) for a unified, responsive feel.
• Do use the lg spacing token (40px) for section separation and md token (24px) for internal card/component padding to create consistent visual rhythm.

**Don't**

• Don't use the secondary teal (#0d8b7c) or tertiary violet (#8b5cf6) as primary CTAs—reserve them for supporting accents and icon backgrounds.
• Don't apply text-shadow or blur effects to body text; keep label-sm and smaller text crisp with optional 0 2px 4px rgba(0, 0, 0, 0.15) shadow only over busy backgrounds.
• Don't exceed a 1.05 scale on hover transforms; larger scales break the subtle, professional aesthetic and feel jarring.
• Don't mix backdrop-filter blur values; use 10px for standard cards, 35px for elevated surfaces (mobile nav), and never below 10px.
• Don't override the fixed background gradient; it anchors the entire visual system and should remain consistent across all pages.