Register B · Collage
§05 · Children 5–9, the actual games. Cut paper with printed patterns, watercolor washes and crayon details. Source: 10a (scene), 9f (materials), 6a (cast), 11a · 12a · 14a (games).
Used for: gameplay in the Coipe web app. For older children and STEM topics, see B2 · Blueprint Lab.
Materials
One paper pattern per hue, and four effects on every stage. Full specs in Patterns and textures.
Palette
Crayon pairs: a line color and its fill. See Color for semantics and text-on-color rules.
Coral #E2553A
Marigold #C98A00
Leaf #2E9E5B
Berry #D63C84
Grape #6A4FD8
Ink blue #1F3FD6
Characters and composition
Characters
| Bodies | Soft geometry: pill (r = h/2), 8-bump scallop cloud, rounded triangle (corner r16), rounded rect (r24), circle |
| Faces | Closed-happy eyes: two arcs 10px wide, 3px. Or dot eyes r3.4 placed ±9px. Smile: quadratic curve 14px wide. Cheeks r5 in the pastel, ±21px out |
| Limbs | Text #0E1A3A (or Ink in riso) 4.5px round. Shoes are 9px caps in a contrasting line color |
| Names | Give every character a name (Boomer the bomb, Team Comet) |
| Failure | Never scary. The bomb turns into confetti: “Pop! Just confetti.” |
Composition
| Rotation | Panels −0.5..−0.6°, tiles ±1.2° pseudo-random, cards ±1.2–1.5°, tape ±6–12° |
| Layering | Washes → board (inkgrid, r26–28) → white inset (r18) → tiles (r14) → objects → tape → crayon doodles → grain |
| Tape | 52–56 × 16–18, #FFF7D6 @80%, with shadow, on panel corners |
| Doodles | Crayon stars r10–14, 3px, scattered in negative space, max 4 per stage |
| Wires / paths | 16px solid line color under a 12px pattern stroke, round caps |
UI components and interaction
Components
| Pill button | h 52–60 · r = h/2 · 3px border in line color · pastel fill or solid · mono 15–16 · hard shadow 2px 3px 0 rgba(14,26,58,.22) · hover: translateY(−2px) or scale 1.08 + rotate −3° |
| Tag (SNIP) | 80×48 · r24 · pastel + 3px line border · mono 14 “SNIP A” |
| Clue card | White · 2px dashed Grape · r18 · padding 20 · shadow 3px 4px 0 .18 · rotate 1.2° · serif 26 with a highlighted keyword on its pastel |
| Puzzle block | Scratch-style. Outer clip-path: notch 14→18→30→34px at the top (6px deep), matching tab at the bottom · body 38px + 6px tab · stacked with −6px overlap · 3px border by inset clip · mono 15 |
| Hat block | “WHEN RUN IS PRESSED”, Text fill, Butter mono 14, chamfered top |
| Overlay | Scrim rgba(242,244,247,.72) · card white, 3px semantic border, r24, padding 36/48, shadow 4px 6px 0 .2, rotate ±1.5° · mono kicker → serif 40–44 → action pill |
| Hearts / stars | 56px paper hearts (Berry polka) · stars 48px clip-path, Marigold on / Rule off |
Interaction
| Targets | ≥ 48px tap areas (≥ 44px hard minimum) |
| Drag | Pointer events (mouse and touch). Ghost follows the pointer at −3° to −4° with a hard shadow. Find drop targets with elementFromPoint → closest([data-slot]). Show a placeholder slot while hovering |
| Feedback | Level 1: instant (snap + green, or bounce back + friendly line). Level 3: delayed until CHECK |
| Motion | Moves .35–.4s ease-out · rotation .25s · plane step 480ms · clock tick 1s |
| Audio | speechSynthesis rate .8 for “HEAR IT” and celebrations |
| Copy | Second person, short, exclamations allowed, never blaming: “Hmm, not there. Try another car!” |
Reference games
Do
- One pattern per hue, consistent across games
- Pastel fill + dark text for every interactive piece
- Visible rotation, but strict alignment underneath
Don't
- Outlines on paper shapes (shadows only)
- More than ~25 objects per stage
- Hard red failure states or scary imagery