TeachKit project

TeachKit / Design system

Documentation v2.0.0 · Redesigned app and marketing site

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