Theme · Product · Intermediate
Online Course Platform
Course platform = a course hero with rating and price, a numbered curriculum, and an instructor row as proof.
Tips
Treat courses like articles: the feed should be scannable and the instructor should feel like a real person.
See also
Build an online course platform called "Cohort" that publishes design and engineering courses.
STYLE
- Warm paper (#fbfaf8) canvas, near-black type (#1a1a1a)
- One muted accent (indigo #4f46e5) for links and active states
- Editorial serif for course titles, system sans for meta and body
LAYOUT
- Course hero card: indigo thumbnail, "DESIGN" category, serif title "Design Systems for Product Teams", a 4.8 star row (1,214 ratings), "8 lessons - 4h 20m - Certificate", price $89 + an indigo "Enroll now" button
- "Curriculum" card with numbered rows: 1 Foundations: tokens and scales (24 min), 2 Component API design (28 min), 3 Docs that developers read (32 min); tall adds 4 Accessibility as a default (22 min)
- Tall only: instructor row - avatar "ML", "Mara Lindqvist", "Design Lead - 12,400 students"
COMPONENTS
- Course hero: category, serif title, star row with ratings, meta line, price + Enroll
- Curriculum card: numbered rows with lesson titles and durations
- Instructor row: avatar, name, student count
INTERACTION
- Lesson rows reveal on view; the enroll button carries the accent; stars use a half-star for 4.8.
TECHNICAL
- React, Tailwind CSS, shadcn/ui for cards and progress