STI-Link

Overview

STI-Link is an institutional career-connection platform designed for a college community seeking real-world professional pathways. The design philosophy centers on 'Professional Clarity'—a systematic, trustworthy aesthetic that prioritizes information hierarchy and user confidence over decorative flourish. The interface uses a navy-and-white foundation (primary #003d82) paired with warm golden accents (#f39c12) to signal opportunity and forward momentum. The emotional response is one of institutional credibility combined with approachability: users should feel they are accessing a legitimate, well-maintained resource that respects their time and career ambitions.

The brand voice is direct, encouraging, and outcome-focused. Vocabulary emphasizes agency ('Start Your Journey', 'Build Your Network') rather than passive consumption. Tone avoids corporate jargon while maintaining professional gravitas. Example sentence: 'Connect with companies actively hiring for your field—your next opportunity is one click away.'

Colors

The color system is built on a high-contrast, institutional foundation. Primary (#003d82) is a deep navy used exclusively for interactive elements—buttons, active navigation states, and focus indicators—ensuring every CTA reads as intentional and clickable. Secondary (#f39c12) is a warm amber-gold that highlights opportunities, badges, and supporting CTAs, creating visual rhythm without competing with primary. Tertiary (#505050) serves as a neutral accent for secondary text and disabled states, maintaining legibility across the interface.

The surface stack progresses from pure white (#ffffff) for primary content areas through carefully calibrated grays (#f5f5f5 for dim, #e9ecef for container-high) to support layering and depth without introducing color. Outline colors (#d0d0d0 for standar

Typography

The type system uses a single sans-serif family (Inter) across all scales to reinforce institutional consistency and digital-first design. Display (56px, 700 weight) anchors hero sections with commanding presence; Headline-lg (40px, 700) introduces major sections; Headline-md (28px, 600) breaks content into digestible chunks. Body-lg (18px, 400) and Body-md (16px, 400) carry narrative content with generous 28px and 24px line-heights respectively, ensuring readability on mobile and desktop. Label-md (14px, 600) and Label-sm (12px, 500) handle UI labels, button text, and metadata with tight letter-spacing (0.01em to 0.02em) for precision. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) on small labels (label-sm) when layered over colored backgrounds to maintain contrast and prevent blur.

Layout

The layout uses a 12-column grid system with a 1280px max-width container, centered on viewport with symmetric gutters. Spacing follows a semantic scale: unit (8px) as the baseline, sm (12px) for tight grouping, md (24px) for section separation, lg (40px) for major rhythm breaks, and xl (64px) for hero-to-content transitions. White-space philosophy prioritizes breathing room—cards and sections are never adjacent without at least md spacing between them. The hero section uses lg spacing above and below to establish visual hierarchy. Search and filter components sit within a contained card with md padding, creating a clear interaction zone. Responsive breakpoints compress gutter to sm (12px) on mobile, maintain md (24px) on tablet, and expand to lg (40px) on desktop.

Elevation & Depth

Elevation is achieved through a restrained shadow system that avoids depth illusion in favor of clear layering. Level 1 (Base): no shadow; content sits flush on white background. Level 2 (Cards, Dropdowns): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a soft shadow that lifts elements 4-8px above the surface and signals interactivity. Level 3 (Modals, Popovers): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), a diffuse shadow indicating maximum elevation. Hover states on cards transition shadow from Level 2 to Level 3 over 200ms, accompanied by a 2px upward transform (translateY(-2px)) to reinforce

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are used strategically to soften institutional rigidity without introducing organic or playful curves. Buttons use lg radius (1rem / 16px) for a modern, approachable feel that invites interaction. Cards and containers use md radius (0.75rem / 12px) to create visual distinction from buttons while maintaining consistency. Input fields and search boxes use DEFAULT radius (0.5rem / 8px) for a compact, utilitarian appearance that signals data entry. Dropdown panels and modals use DEFAULT radius (0.5rem / 8px) to align with input fields and su

Components

Action Elements Buttons are the primary interaction mechanism and must always include explicit state variants. Primary buttons (bg #003d82, text white, 48px height, 12px 24px padding, lg radius) use box-shadow: 0 2px 8px rgba(0, 61, 130, 0.2) to lift slightly from the surface. On hover, background shifts to #0052a3 and shadow expands to 0 4px 12px rgba(0, 61, 130, 0.3), accompanied by a 200ms ease-out transition. Active state darkens to #002d5c. Secondary buttons (transparent bg, #003d82 text, 1px outline) sit flush until hover, when they gain a surface-container-high background and primary-colored border. Tertiary buttons are text-only with no border; they gain a subtle surface-container background on hover. All buttons must include a 2px focus ring (outline: 2px solid #003d82, outlin

Do's and Don'ts

**Do**

• Do use primary (#003d82) exclusively for CTAs, active states, and focus indicators—never for body text or backgrounds.
• Do maintain 24px (md) minimum spacing between major sections and 12px (sm) between related elements within a section.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to elevated surfaces like dropdown panels and modals to ensure they read as floating above the base layer.
• Do use the full rounded scale (lg for buttons, md for cards, DEFAULT for inputs, full for badges) to create visual hierarchy through shape.
• Do include explicit focus rings (outline: 2px solid #003d82, outline-offset: 2px) on all interactive elements for keyboard navigation.
• Do pair secondary color (#f39c12) with primary (#003d82) in badges and status indicators to create visual rhythm without overwhelming the interface.

**Don't**

• Don't use primary color for body text, backgrounds, or non-interactive elements—reserve it for actions and focus states only.
• Don't apply shadows deeper than 0 4px 12px rgba(0, 0, 0, 0.08) or the interface will feel heavy and dated.
• Don't mix border-radius values arbitrarily; stick to the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain visual consistency.
• Don't reduce padding below 12px on interactive elements or they will feel cramped and difficult to target on touch devices.
• Don't use color alone to communicate state—always pair color changes with text labels, icons, or other visual cues for accessibility.
• Don't apply transitions longer than 200ms on hover states or the interface will feel sluggish and unresponsive.