Every demo on this site ships from one small system: shared feedback semantics, one type scale, one set of interaction states. I keep the system consistent for the same reason I write feedback in one voice: a learner who met these signals in one module should not spend any attention relearning them in the next.
Scope · 6 demos, 1 system
Principle · Coherence (Mayer) · Signaling
Rule · Semantics never restyle per course
01 — FEEDBACK SEMANTICS THE MOST IMPORTANT TOKENS IN THE SYSTEM
Correct / strong move
Names what worked and why it transfers.
#0E8A5F on #EAF6F0 · 4px rule
Partial / new risk
Credits the instinct, names the cost it carried.
#B7791F on #FAF1E0 · 4px rule
Risky / incorrect
States the consequence, never the scolding.
#C43D2B on #FBEAE6 · 4px rule
// These three mean the same thing in every demo — a learner who saw them in The Visitor already knows how to read them in The Return. In a course, color is a signal, not decoration, so I don't let it drift.
02 — TYPE SCALE TWO FAMILIES, FIVE SIZES, NO EXCEPTIONS
COURSE TITLE · 30/900Bacteria don't need much.
PROMPT / NARRATIVE · 17/500A stock hits 80°F at the two-hour mark. What does the rule say?
CHOICE / BODY · 14.5/400It missed stage one. Reheat to 165°F and start the cooling clock over.
LABEL · 12/700 CAPSKnowledge check · Question 1 of 2
SYSTEM / DATA · MONO 1209:41:22 learner answered "Lesson 2" result: correct
03 — INTERACTION STATES EVERY CLICKABLE THING, EVERY STATE
one per screen, max
replay, skip, back
answers & branches; press physics
always optional, always labeled live
// Focus ring: 3px #E0331F offset 2 — keyboard learners get a louder signal than mouse learners, not a quieter one. Motion: 180ms ease, disabled entirely under prefers-reduced-motion.
04 — VOICE RULES THE PART OF THE SYSTEM THAT ISN'T VISUAL
✓ "Cash for a card purchase breaks the audit trail."
Consequences, spoken register, second person.
✗ "Incorrect. Please review the returns procedure."
Rules, passive voice, judgment. Banned.
✓ "You'll probably let him in the first time. Most people do."
Normalizes the error the design expects.
✗ "Great job!!! You're a security superstar! 🎉"
Praise inflation and emoji. Also banned.
05 — ACCESSIBILITY DESIGNED TO WCAG 2.2 AA, SITE-WIDE
Keyboard first
Every demo runs start to finish without a mouse. The focus indicator is a 3px red ring — keyboard learners get a louder signal than mouse learners, not a quieter one. Tab through any module to check.
Color is never the only signal
Every feedback state pairs its color with a written label ("Strong move", "Not quite") and a position. The semantics in section 01 survive grayscale, and so does the printed wall card.
Motion is optional
Every animation and transition on the site honors prefers-reduced-motion, including the timeline piece. Narration is a toggle, never autoplay. Nothing a learner needs is carried by motion alone.
Contrast and targets
Body text holds 4.5:1 or better against its background; small gray labels were bumped until they cleared it. Touch targets on the phone-frame demo stay at or above 44px.
// Accessibility is a design constraint here, not a remediation pass. A learner who can't use the module didn't get trained, whatever the completion report says.