Design system contents

Foundations

Course identity, lessons, and progress

Keep the relationships behind the UI consistent across fixtures and implementation.

On this page

Model

Model
ModelKey fieldsUI consequences
Courseid/_id, userId, title, status, topic, thumbnail, instructions, descriptionIdentity, ownership, discovery, and public introduction.
Lessonid, revision, title, embedCode, duration, description, actionItems, links, downloadsActive editor, learner media, resources, and queued saves.
ProgressCompleted lesson IDs and action indices per lessonWatching/completing a lesson and doing its actions are separate states.
EnrollmentRegistration dates, timezone, stripeProductId, priceAvailability and free/paid paths.
ReviewRating, comment, display state, course and reviewer identitySubmission and teacher moderation.

Fictional but coherent

The reference follows Jordan Taylor’s three-lesson creative-practice class. Outline specimens use a six-lesson variant to demonstrate disclosure. Its sample dates, $49 price, 128 enrollments, student names, and resource labels are fixture values. Consistent relationships make the examples believable without implying a real account or real business results.

Source references

Source references
FileResponsibility
src/types/course.tsCourse and lesson types
src/components/courses-public/logged-in/PrivateCourseView.tsxProgress composition
src/app/make-class/[classId]/video-lessons/page.tsxRevision-aware edits

Interface examples

Native TeachKit interfaces with fictional course, account, and learner records. Service responses and media are isolated demonstrations; no customer data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.

Course Card · Component detail · Light · Desktop · 2120 × 2325 px
Outline · Component detail · Light · Desktop · 2280 × 1308 px
Checklist · Component detail · Light · Desktop · 2280 × 894 px
Course Card · Component detail · Light · Desktop · Draft · 2120 × 2185 px
Course Card · Component detail · Light · Desktop · Complete · 2120 × 2325 px
Outline · Component detail · Light · Desktop · Expanded · 2280 × 2088 px

Source audit: 2026-10-22 · Revision 903bbf05ca9d · Documentation v2.0.0