TeachKit design system

Product and audience

TeachKit serves two connected audiences: creators preparing courses and learners applying what they see. Its common visual language must work in discovery, a lesson player, a rich editor, and settings without hiding the purpose of each screen.

This reference documents the current local application. It adds usage guidance and identifies implementation gaps; it does not claim that an independently packaged component library or a formal design-system organization previously existed.

Evidence and boundaries

Design principles inferred from source

• Move from watching to doing: place concrete actions beside the lesson context.
• Keep creators focused: separate course identity, lessons, instructions, registration and integrations into recognizable sections.
• Reuse course identity: carry title, cover and instructor across discovery, enrollment and learning.
• Explain progress: distinguish an action check from completing an entire lesson.
• Keep availability explicit: published, draft and closed courses have different implications.

How to use this reference

Start with foundations before creating a new view. Choose an existing component family, match its props, and compose it within the appropriate creator or learner shell. Patterns explain the full task and its persistence boundary. Applied screens show what the implementation actually renders.

Read known gaps before shipping. A visually complete control, a Headless UI dependency, or a successful screenshot does not establish complete accessibility, authorization, payment reliability or saving behavior.