Modernized LMS Course Discovery
A Gen-Z and Millennial-focused LMS (Learning Management System) discovery platform featuring a 'Learning Playground' aesthetic. It utilizes a crisp blue-centric color palette (Blue/Cyan/Slate), clean 'Inter' typography, and a conversational, high-energy tone. The layout is a hybrid of a modern SaaS dashboard and an editorial course marketplace, featuring horizontal carousels, bento-style management cards, and a sleek dark mode. Key features include glassmorphism-inspired background textures, animated navigation underlines, and progress-tracking widgets. Ideal for EdTech, fintech onboarding, or developer documentation portals.
Summary
A modern, trendy LMS discovery interface with a 'Learning Playground' vibe. The design uses high-contrast typography, soft rounded corners (12px-24px), and a vibrant blue accent system. It features a conversational UI with sections for course discovery, project shipping (gallery), and crew management, all wrapped in a sleek, responsive shell that transitions seamlessly between light and dark modes.
Style
The style is characterized by a 'Clean Tech' aesthetic using the Inter font family (weights 400 to 700). The color system is built on a Slate/Zinc base with vibrant blue (#2563EB) and cyan (#0284C7) accents. Components use high border-radii (xl/2xl), subtle 1px borders (#E2E8F0), and soft shadows. Motion is a key element, utilizing CSS View Transitions and hover-triggered scale/brightness adjustments. Backgrounds are enhanced with subtle radial gradients (opacity 6-20%) and a fine noise texture for depth.
Layout & Structure
The layout is structured with a fixed dual-tier header, a wide hero section with a sidebar-style progress card, and a multi-section content area including horizontal carousels, bento-grid management blocks, and a large call-to-action footer.
Header and Sticky Navigation
Hero Welcome Section
Featured Course Carousel
Bento Management and Resources
Global Footer
Components
Progress Widget Card
A high-fidelity progress tracker card with integrated action buttons.
Animated Nav Link
Navigation link with a progressive underline effect.
Interactive Category Pill
Rounded filter buttons for topic selection.
Special Notes
MUST use trendy, high-energy copywriting (e.g., 'Ship projects', 'No BS', 'Crush it'). MUST NOT use formal academic language like 'Enrollment' or 'Syllabus' without a casual modifier. DO ensure all interactive elements have a focus-visible ring of 2px for accessibility. MAINTAIN high contrast for typography in dark mode by using Slate-100/200 against a Navy-900 background.