STI Alumni Association

Overview

STI Alumni Association is a professional institutional platform that serves as a lifelong bridge for graduates of STI (Southville Trinity Institute), fostering meaningful connections, celebrating achievement, and enabling career advancement through curated events, news, and community engagement. The design aesthetic embraces Institutional Clarity—a modern, accessible approach that prioritizes information hierarchy, trust, and professional credibility through clean typography, structured layouts, and a restrained color palette anchored by a confident institutional blue (#1565c0). The brand personality is welcoming yet authoritative: it speaks to accomplished professionals who value substance over flash, community over isolation, and meaningful engagement over superficial interaction. The UI evokes a sense of belonging to an established, forward-thinking institution—one that honors its heritage while embracing digital-first connectivity.

The voice is direct, inclusive, and achievement-focused. Sentences are clear and purposeful, avoiding jargon while maintaining professional tone. Example: "Connect with 50,000+ STI alumni, discover career opportunities, and celebrate your network's success." The brand celebrates milestones (Distinguished Alumni Awards, reconnection campaigns), emphasizes community (local chapters, seminars), and treats every alumnus as a valued stakeholder in an ongoing institutional story.

Colors

The color system is built on institutional trust and professional accessibility. Primary (#1565c0) is a confident, saturated institutional blue used exclusively on call-to-action buttons, active navigation states, and key interactive elements—it signals authority and invites engagement without aggression. Secondary (#26a69a), a balanced teal, provides a supporting accent for highlights, status indicators, and secondary actions, creating visual rhythm without competing with primary. Tertiary (#ffc107), a warm golden yellow, is reserved for the STI brand mark and accent highlights, connecting the digital experience back to the institution's visual identity.

The surface stack is built for clarity: white (#ffffff) serves as the primary canvas, with carefully calibrated grays (#f5f5f5 for surf

Typography

The typography system uses Roboto exclusively, a humanist sans-serif that balances institutional formality with modern accessibility. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements; Headline-lg (40px, 600 weight) introduces page sections; Headline-md (28px, 600 weight) breaks content into digestible chunks. Body-lg (18px, 400 weight, 28px line-height) is used for feature content and introductory paragraphs, while Body-md (15px, 400 weight, 24px line-height) serves as the default body text—matching the rendered DOM baseline of 15px. Label-md (14px, 600 weight) is applied to buttons, form labels, and navigation items, with 0.01em tracking for subtle emphasis. Small labels (12px, 500 weight) are used sparingly for metadata, timestamps, and secondary

Layout

The layout system uses a 12-column fluid grid with a fixed container max-width of 1280px, enabling responsive scaling from mobile (single column) through tablet (6 columns) to desktop (12 columns). The gutter is consistently 24px, creating breathing room between grid items and sections. Page rhythm is established through semantic spacing: lg spacing (40px) separates major sections (hero, news grid, footer), md spacing (24px) divides subsections and card groups, and sm spacing (12px) provides internal padding within components. The container max-width of 1280px ensures content remains scannable and prevents line-length from exceeding 75 characters at body size, supporting cognitive load management. White-space is treated as a design element—empty space around cards, between navigation items

Elevation & Depth

Depth is conveyed through a restrained shadow system that maintains visual lightness while creating clear layer hierarchy. Level 1 (Base/Surface): no shadow; elements sit flush on the white background. Level 2 (Cards, Inputs, Dropdowns): box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12)—a dual-layer shadow that creates subtle lift and definition without heaviness. Level 3 (Modals, Elevated Cards, Hover States): box-shadow: 0 3px 8px rgba(0,0,0,0.15)—a slightly larger blur radius and offset that signals prominence. Buttons in their default state use Level 2 shadow; on hove

Shapes

The shape philosophy is Institutional Minimalism—sharp, precise corners that convey professionalism and clarity while maintaining subtle softness for approachability. Buttons use 2px border-radius (rounded.sm), creating a crisp, business-like appearance that feels contemporary without being trendy. Cards and containers use 2px radius as well, maintaining visual consistency and a structured grid aesthetic. Input fields use 4px border-radius (rounded.DEFAULT), providing slightly more softness for form interactions while staying within the institutional vocabulary. Modals and dropdown panels use

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (button-primary) use #1565c0 background with white text, 12px vertical padding, 30px horizontal padding, and 2px border-radius. The label-md typography (14px, 600 weight) ensures text is prominent and scannable. On hover (button-primary-hover), the background darkens to #0d47a1 and shadow elevates to Level 3 (0 3px 8px rgba(0,0,0,0.15)), with a 200ms ease-out transition. Active state maintains the darkened color. Secondary buttons (button-secondary) use transparent background with a 2px solid #1565c0 border and primary-colored text, allowing for visual hierarchy without overwhelming the interface. On hover, the background fills with #bbdefb (primary-container) and text shifts to #0d47a1, creating a clear sta