TeachKit project

TeachKit / Design system

Documentation v0.1 · Released product

Design system contents

Applied screens

Component states in context

Inspect real fields, saving, navigation and progress components at high resolution.

On this page

Capture context

Capture context
AreaEvidence
StatesFocus, menu open, saving, complete/incomplete and collapsed/expanded where captured
FramingNative component containers; popup bounds measured before crop
ContentReal course text; isolated generic state labels are specimen-only
LimitNot every source state has a populated capture

How to inspect

  • Use the Desktop/Phone controls where both exist. TeachKit’s source appearance is light only.
  • Open an image for fit-to-view inspection, then Actual pixels or Open original for detail.
  • Component details and complete screens have separate filenames and recorded intrinsic dimensions.
  • Compare text, focus, menus and media against the source; do not treat a pictured state as proof of live persistence.

Examples from the app

Actual TeachKit UI with Thomas McGee’s course content. Session, progress and connection specimens are simulated; no student data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.

Fields · Component detail · Light · Desktop · 1920 × 866 px
Fields · Component detail · Light · Desktop · Focus · 1920 × 922 px
Save · Component detail · Light · Desktop · 1920 × 326 px
Toggles · Component detail · Light · Desktop · 1920 × 310 px
Sidebar Menu · Component detail · Light · Desktop · 832 × 218 px
Sidebar Menu · Component detail · Light · Desktop · Open · 832 × 468 px
Lesson List · Component detail · Light · Desktop · 1920 × 866 px
Lesson List · Component detail · Light · Desktop · Expanded · 1920 × 2926 px
Course Tabs · Component detail · Light · Desktop · 1920 × 3024 px
Course Tabs · Component detail · Light · Desktop · About · 1920 × 2302 px

Source audit: 2026-10-07 · Revision d8cf23d0a329 · Documentation v0.1