Design system - Course listing page

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.