Overview
This project explores the course listing page through a design-system lens, breaking the interface down into atomic components and rebuilding it as a scalable template.
Focus
The reel highlights how individual elements work together:
Typography for hierarchy and clarity
Pills as reusable atoms for metadata (entry requirements, duration, start date)
Molecules combining icons, text, and actions
Templates that scale across multiple courses and filters
Approach
By isolating and animating each layer, from atoms to full cards, the reel demonstrates how a consistent system supports flexibility, reuse, and visual cohesion across the page.
Outcome
A clear, modular course listing that’s easy to scale, easy to maintain, and visually consistent, designed for complex academic content without added complexity.
Like this project
Posted Jan 2, 2026
Built from atoms. Designed to scale.
Each element is intentional, modular, and reusable, forming a system that scales without losing clarity