Visual Mockups & Style Guide — The Mixed Classroom

Kit 12 · The Mixed Classroom · deliverable · designed and built by I Wayan Usada — instructional design portfolio

Mood & palette

Chalk-sage #2e7d5b on board-dark — a staffroom blackboard, not an app store; sage marks diagnostic moves.

Type system

Spectral for headlines and debrief lines · Work Sans for body copy and choice cards · JetBrains Mono for labels, timers, counters and data readouts. Numbers and feedback always set in the largest voice on screen — the consequence is the loudest element, by design.

Key screens

Lesson moment

scene line with three student cues, three move cards below

Cost panel

per-student cost of the chosen move, one line each, no grades

Staffroom debrief

moments mapped to the barrier taxonomy, diagnose-vs-task marks

Component decisions

Move cards are written as a teacher would think them; the cost panel never moralizes — it prices, precisely.

Accessibility

Move cards keyboard-selectable; cost panel at 17px; taxonomy map is text-linked, not only visual.