The source of truth for every component, in both rooms. Each is built from roles resolved per room — never a fixed hex — so the system crosses light↔dark as a palette resolution, not a redesign, and this page measures its own contrast at render time (below). Toggle the room and watch nothing reflow.
Reading this as a seat? Trust these renders over any number in the prose. When you build the
applet, don't copy this file's :root or its @font-face — an applet
consumes the §26 token bridge (--accent, --accent-action,
--accent-ok…), inherits the pinned font from the room (§25.3), and keeps the
board transparent (§25.1). This page self-hosts the font and paints a shell only because it
is a standalone document, not an applet.
Two families, one base shape at 20px radius. A surface is fill only — it holds a term. A button carries a solid base edge it spends when pressed. Colour is generated from a hue angle, not listed, so the set never runs out.
A surface is flat; a button stands on a solid edge. Depth is the only difference — radius is 20px for both and carries no meaning.
A variant is one number — a hue angle. Five stops are generated from it in oklch();
the lightness/chroma constants are per room, so the ladder inverts on its own.
Eight angles pre-solved, taken in order, so the first term on any board is violet and nobody chooses. Each card shows the same three stops in its own hue.
Only fill, stroke and label change. The stroke appears in exactly one state — highlighted — which is what makes it mean something.
Geometry frozen across states; the outcome icon lives in a reserved slot outside the button.
Each button's base edge is its own hue at a darker lightness — never a grey, never a shadow.
Markers divide the bar rather than sit on it, the counter is tethered to the thumb, and the track carries the accent's own tint so the whole control reads as one object. Drag any of them.
Five parts — a type is only which parts are switched on. Track 16px, thumb 40px, notch 2px, the hit target 44px whatever the thumb looks like.
Two switches — scale (none / markers / markers+labels) and counter (off / on) — closed by value shown once: labels or a counter, never both.
The slider itself never changes shape; disabled goes achromatic, highlighted sits on a plate.
The same control, generated in each of the eight angles — the track tint, fill and notches all derive from one number.
The value always leads — it is the number being taught, and the two buttons exist to change it. Press anything.
Bare: the counter stands on the board, buttons take the accent's light tint. Held: a tinted shell groups the three, buttons go to the surface.
A limit disables one button, never the whole counter — one flat button tells the student which way is still open.
The graph sheet's axis on its own, grid removed: the same 2px ink, the same arrowhead construction, the same generated hue for anything marked. A mark never moves or resizes between states.
Whole numbers — a square cap at zero; nothing exists left of it.
Integers — an arrowhead at each end; the line continues forever both ways. Region [−2, 3).
Point · default
Point · disabled
Point · highlighted
Region · default
Region · disabled
Region · highlighted (deepens)
A set diagram adds no new devices — regions are figures, and the two things that can be marked are a region and a member. Nested depth decreases inward, so the smallest region stays most legible; fills always repaint opaquely rather than alpha-stacking.
Nested — ⊆
Overlapping — ∩
Disjoint
Region · default
Region · disabled
Region · highlighted (deepens)
Member · default
Member · disabled
Member · highlighted (ripple)
The grid recedes, the axes hold, the plot leads — a graph that competes with its own data is a decorated page, not a diagram. Three tiers, deliberately far apart.
Labelled — a value must be read off the plane
Unlabelled — the shape is the lesson
Point
Line — continues
Segment — stops
2D shape — 10% fill
3D — isometric, opaque
Default
Disabled
Highlighted — halo, 18% fill
Real, CCR-compliant arrangements — one focal point, fit-to-content shapes, symmetric padding, anchor-coded colour: violet = the concept, orange = the value, blue = the answer, green = correct, red = wrong. Shown small.