These are the shapes a manipulative can take. Each one is a small machine for a single idea — a thing to drag, a step to press, an answer to commit to before the page will tell you anything. Below each is one page from this course that uses it, so you can see the archetype doing real work rather than posing.
These pages have exactly one colour decision in them, and it is a hue. Black text, white paper, and one spot colour — the way a two-colour textbook is printed. Pick a hue below and everything on this page, including the thumbnails, changes with it. Nothing else is adjustable, and that is the design: one knob is a decision, five knobs are a project.
The hue for the whole course is set in the Studio — the small editing app the instructor runs on their own laptop — on its dashboard, and it takes effect for every page at the next publish. This page previews the seven and hands you the CSS; it does not change anything beyond itself.
Choosing a colour needs JavaScript. Without it this page stays on the default, Goldenrod, and everything below still reads.
| pair | light | dark | ||
|---|---|---|---|---|
Ratios appear here when scripting is available; every number is in
design/palettes.json either way. | ||||
All seven palettes pass every required pair. The numbers were computed, not estimated.
Why one row says “see note”. The skin prints black text directly on the accent, so the accent has to be light enough to carry that text at 4.5:1 — and anything that light cannot also separate from white paper at 3:1. The two requirements pull opposite ways, and no hue satisfies both. Every accent mark therefore carries a 1px ink hairline: that outline is the boundary the standard asks for, it runs above 8:1 against the accent, and nothing on these pages is ever distinguished by colour alone. (In dark theme the accent separates from the page on its own at better than 9:1, so there the hairline is a habit rather than the load-bearing edge — which is why its dark row reads “advisory”.)
…
The Studio applies this for you; this block is for anyone editing a file by hand.
Roughly in the order a student meets them, which is also roughly what they cost to build.
Teaches: categories become real when a case moves between them; a one-clause change to the story moves it.
In this course: Learning-Type Sorter week-01-learning-type-sorter.html
The move: drag a card into a bin (or focus it and press 1/2/3).
Teaches: the arithmetic didn't know what the columns meant — so meaning is something we add, and can add wrongly.
In this course: You Are the Machine: Three-Pass Reveal week-01-sandwich-reveal.html
The move: press Reveal, one pass at a time.
Teaches: an equation and a picture are one object; moving either moves both.
In this course: Draw the Decision Line week-02-decision-line.html
The move: drag a point or a handle (arrow keys move it one step, Shift ten).
Teaches: fluency is translation; the same fact in four notations.
In this course: One Line, Four Ways week-02-line-explorer.html
The move: drag the line, and watch three other panels move.
Teaches: the shape of a dependence — what grows, what saturates, what flips.
In this course: Turning Scores into a Decision week-13-softmax.html
The move: pull a slider and read the number that matters.
Teaches: that “the algorithm converged” is a sentence with a reason attached.
In this course: You Are the Algorithm week-06-cluster-by-hand.html
The move: run one half-step yourself and have it marked — the stepper's Step button, handed to the student. (Its ancestor, K-means, Step by Step, pressed Step for you; it was retired on 2026-08-05 and is in the archive.)
Teaches: a graph and its matrix are the same object seen twice; edit either.
In this course: The Graph IS the Matrix week-11-adjacency.html
The move: click a matrix cell, or drag a node.
Teaches: commitment first, feedback second — the difference between recognising an answer and having one.
In this course: The Four Cousins of If-Then week-07-truth-tables.html
The move: type T or F and press Enter.
Teaches: a classifier's decision is arithmetic you can read, not an oracle.
In this course: Trainable Machine week-03-trainable-machine.html
The move: draw on the pad, train, test.
Teaches: that a good move can be derived, and that the derivation is finite.
In this course: Minimax on Tic-Tac-Toe week-08-minimax.html
The move: take your turn; the machine answers and shows why.
Teaches: that the class is a dataset, and that unsupervised means nobody told it the groups.
In this course: The Shared Plane classroom/ — the one piece that needs a server
The move: move your own cursor; watch twenty others.
Most pages combine two or three of these. Softmax is a parameter instrument with a ramp; word2vec is a stepper wearing five instruments; the graph sandbox is a structure editor with a scoring loop; the two Week 9 games are “game against the computer” with a graph where the grid was. The archetypes are a vocabulary for asking, not a menu of separate products.
It is not a homework platform. There are no accounts, no scores kept anywhere, no analytics, and no cookie beyond the two keys that remember your theme and your colour. The multi-student piece holds a room in memory and forgets it when the class ends.