Project Tessera · working prototype · September 2026

An AI-native LMS that keeps the instructor in charge.

Eight prototype screens and a clickable learner flow for a learning management system that hosts and authors courses for higher-education and industry audiences. The design borrows Canvas's predictable module-first backbone and adds an AI layer that drafts for authors, tutors learners with hints, and never publishes anything a person has not reviewed.

Try the clickable prototype Browse the screens Research report

Seven decisions the screens make

  1. Modules are the spine. AI edits the same structure learners navigate; it never invents a parallel one.
  2. Plan before draft. Brief → Outline → Draft → Review → Publish, with human checkpoints where intervention is cheapest.
  3. Provenance on every block. "AI draft · from Week3_slides.pdf p. 4–7" beats a sparkle icon. Diff, revert, and a review-coverage meter.
  4. Hint-first tutor, bound by policy. The instructor sets hint-only / explain / open per activity; the tutor cites course sources; transcripts are visible under a stated policy.
  5. Personalize on evidence. Goals, time budget, language, accessibility, device, and role. Not "learning styles."
  6. Agents propose, people apply. A natural-language request becomes a previewable change set with conflicts surfaced.
  7. Quality and accessibility lint before publish. QM-style alignment checks and WCAG 2.2 AA on generated content.
Clickable prototype · learner flow

Today → lesson → tutor → module check → result

Answer a knowledge check (try a wrong answer first), ask the hint-mode tutor for help or for the answer, reflect, take a three-question module check, and return to a Today screen that has updated mastery, review cards and time budget. Works on desktop and phone.

Open the prototype

Screens

Each card is a live, scaled preview. Open a screen to view it at full size; links inside the screens move between them.

AI style
What are these?

Design system used across all screens

Color

  • Paper ground #F4F1EB
  • Ink #1C1B19
  • Accent (one) #0E6B63
  • AI content #5B4BAF, always with a text label
  • Success #2E7D4F
  • Warning #9A6A12
  • Error #B3382C

Semantic states differ in lightness, not hue alone. Text contrast ≥ 4.5:1.

Type & density

Fraunces for lesson reading (19px, ~68 characters per line) and page titles; IBM Plex Sans for UI; IBM Plex Mono for shortcuts and commands.

Comfortable density for learners, compact for instructors and admins. Motion limited to progress fills. AI content is set as marginalia: the reading serif, a gutter glyph, a small-caps attribution, and numbered source footnotes. No stripes, no sparkles. Three alternative styles are kept and switchable.