EduSphere Design System
A comprehensive design system for the EduSphere education platform featuring premium startup aesthetics, soft shadows, and modern UI components.
Color Palette
Primary
#2563EB
Main brand color
Secondary
#6366F1
Secondary accent
Accent
#14B8A6
Teal accent
Background
#FFFFFF
Light background
Foreground
#0F172A
Text color
Typography
Display / Hero
The quick brown fox
56px / 600 weight / Inter
Heading 2
The quick brown fox
36px / 600 weight / Inter
Heading 3
The quick brown fox
24px / 600 weight / Inter
Body
The quick brown fox jumps over the lazy dog
16px / 400 weight / Inter
Small / Caption
The quick brown fox jumps over the lazy dog
14px / 400 weight / Inter
Shadows
Border Radius
Rounded SM
Rounded MD
Rounded LG
Rounded Card (24px)
Components
Buttons
Badges
Category Pills
Stat Cards
Active Opportunities
89
+12 this month
Student Community
15.2K
Growing daily
Success Rate
78%
Students accepted
Achievements
240+
Portfolio updates
Discovery Cards
International Mathematics Olympiad
Compete with the brightest minds from around the world in this prestigious mathematics competition.
Science Excellence Scholarship 2024
Full tuition scholarship for undergraduate students in STEM fields with demonstrated excellence.
Hackathon: Build the Future
A 48-hour hackathon where teams create innovative solutions to real-world problems.
Spacing Scale
4px (p-1), 8px (p-2), 12px (p-3), 16px (p-4), 24px (p-6), 32px (p-8), 48px (p-12), 64px (p-16)
Responsive Design
• Mobile First: Base styles for mobile, then enhanced with responsive prefixes
• Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px)
• Grid System: Flexbox-based layout with gap utilities for consistent spacing
• Typography Scaling: Text scales appropriately across breakpoints