MIT x Clubs

byOm Kalyankar

Design a modern, premium mobile application for a College Club Management System called "MIT ClubHub". Target Users: - Students of a university. Design Style: - Modern UI - Minimal - Clean - Professional - Apple-inspired - Rounded corners - Soft shadows - Light mode - Primary Colors: - Midnight Blue (#1E3A8A) - Sky Blue (#38BDF8) - White - Use Inter or SF Pro font. - Use consistent spacing based on an 8pt grid. The app should be fully responsive for Android and iPhone. Create the following screens: 1. Splash Screen - MIT ClubHub logo - Animated illustration - Get Started button 2. Login - College Email - Password - Sign In - Forgot Password - Continue with Google 3. Student Registration - Name - PRN - Department - Year - Mobile Number - College Email - Password 4. Home Dashboard - Greeting with student name - Search bar - Upcoming Events banner - Featured Clubs - Categories - Quick Actions - Today's Events - Notifications icon - Bottom Navigation 5. Club Listing - Search clubs - Filter by category - Club cards - Join button 6. Club Details - Club logo - Description - Faculty Coordinator - Core Team - Upcoming Events - Gallery - Join Club button 7. Event Listing - Search - Filters - Event Cards - Register button 8. Event Details - Poster - Date - Time - Venue - Description - Coordinator - Register button - Add to Calendar 9. Registration Success - Success illustration - QR Code - Event Pass 10. Attendance - QR Scanner - Attendance History 11. Certificates - Certificate cards - Download PDF - Share button 12. Notifications - Club updates - Event reminders - Approval messages 13. Chat - Club group chats - Faculty chat - Individual chats 14. Profile - Student photo - Department - PRN - Skills - Clubs Joined - Events Attended - Certificates Earned 15. Settings - Dark Mode - Notifications - Privacy - About - Logout Navigation: Bottom Navigation with: - Home - Clubs - Events - Chat - Profile Components: - Modern cards - Rounded buttons - Floating Action Button - Search bars - Progress indicators - Empty states - Loading screens - Error states Icons: Use Material Design icons. Illustrations: Use flat illustrations with blue gradients. Prototype: Connect all screens with realistic interactions. Include smooth transitions and smart animations. Output: Create reusable design components, color styles, typography styles, Auto Layout, reusable buttons, reusable cards, reusable navigation bars, reusable input fields, reusable modals, and a complete design system. The final result should look comparable in quality to apps like Google Classroom, Notion, LinkedIn, and Apple Fitness while maintaining a unique university identity.