College InsidersDesign System V1.0
Brand Style Guide
The technical foundation for College Insiders. A minimalist architecture connecting prospective talent with academic excellence.
Base Framework
Tailwind CSS 3.4
Grid System
12-Column Responsive
Primary Radius
rounded-3xl (24px)
Section 01 / Typography
The Serif
Instrument Serif — For high-impact editorial moments.
Display XL / 120px
Premium
H1 / 64px
Mentorship for Everyone
The Geometric
Space Grotesk — UI / Navigation
System Navigation
Interactive States
ACTIVE LINK
Default Link
The Utility
Inter — Body / Content
Our body text is optimized for readability at all sizes. We use Inter for its neutral yet modern character, ensuring clarity in dense mentorship guides and data-rich student profiles.
Code / Token / Monospace
Small Utility Label
Section 02 / Color Tokens
Electric Violet
#7C3AED
Deep Indigo
#1E1B4B
Soft Slate
#F8FAFC
Slate 200
#E2E8F0
Accent Gradient
Linear 45deg
Section 03 / UI Components
Glassmorphic Layers
Verified Mentor
Harvard University
Button Architecture
Input Fields