Design System
Representative pieces from the shared system, shown at their intended sizes. Unlinked preview route; nothing else is changed yet.
World accents
One persistent accent per world, from the live world registry.
Classroom Control
New Teacher Survival
Teacher Communication
Teacher Resilience
AI-Ready Classroom
Instruction Studio
Type
Pixel face for HUD labels only; readable sans-serif for everything learners read.
HUD label
Sans-serif mission title
Body copy in a readable sans-serif at 15–16px, line height 1.6.
World scene
Classroom Control, full-bleed plate at map-hero size.

Mission scene
Live data from “The Noisy Entrance” — the real HUD, dialogue and choices. Nothing reveals an answer.
Classroom Control
Mission 1 of 6

Coach Rivera
“The first minute sets the tone. A calm, visible first move beats a louder one.”
Decision
Quality tiers exist server-side only (A strong first move · Worth considering · Consider the tradeoffs); the list stays neutral.
Character portrait
Coach Rivera at dialogue size (48px) and portrait-card size (112px), with the letter-tile fallback beside them.
Level nodes
One node design, four states, on the map surface. Selected node responds; states come from real progress data in the app.
Badge
Real badges from the live catalog, drawn on the shared 24×24 pixel grid.
Classroom Control Cleared
First Simulation
Three-Day Streak
States
Loading, locked, and retryable error, exactly as learners see them.
Continue Classroom Control, then unlock the next path.
Prototype retry demo — the button refetches the real mission data.
Teacherfy uses necessary cookies to keep the app working and optional cookies to understand how teachers use the product. Teacherfy does not require student data. Cookie Policy · Privacy Policy