Visual design board

TURN 14 Section 1 — the four principles Built from the storyboard, in the settled system. One layout, four fills: the narration copy is now the body text, and each principle earns one interactive.

What the layout commits to. One template, four fills — a parent who learns to read principle 1 reads the other three for free. Left column is the argument in one order every time: what it is, why it matters, the old frame, the shift, the key concept. The interactive sits right, where the screen's one action also lives, and the progress bars sit under it rather than in the header, so the sense of "four of these" belongs to the reading rather than the chrome. Three script elements are gone: Miss Rivera's at-school/at-home bridge (held for a better home than a box on every screen), the narration toggle (Section 1 is read, not narrated — the voiceover copy is now the body text), and the reference drawer on the overview, which the ? already owns. Open: principle 3 carries a longer key concept than the others, because the script's "two states" idea has nowhere else to go — it may want to be the interactive's second half instead.

TURN 13 The same system on a harder screen — 2g, the live role-play The debrief is mostly prose. This one has a stage, two speakers, a coach panel and a live input — the real test of a no-border system.

Three things the system had to answer here. Panel separation: the coach sits on a slightly warmer paper (#F5F1E9) instead of behind a divider — the split reads at a glance and no line is added. Whose voice is whose: the child speaks from white on the tinted stage, you speak in blue tint tucked to the right, and the coach's own words have no container at all, so it reads as narration rather than another speaker. The assessment tags are gone — the "assertiveness ✓ / composure" chips from the wireframe duplicated what the sentences already say, and the sentences now carry the color instead. The input keeps the 2px blue ring as the only focus signal.

TURN 12 The compromise, next to crisp Soft geometry and the blue score field; crisp's restraint everywhere else. Color now marks feedback rather than boxing it.

What changed in 10d: the header rule is gone, radii go back to 14px on the field, the pill and the button, and the score keeps its blue field — it is the one number on the screen and the tint is what makes it findable. Everything else drops its container. "What you said" is now an uppercase label over plain text instead of a tinted block or a left rule, and the two feedback notes are separated by color alone — blue for what worked, clay for what to work on. The quote's left border and the two divider rules are also gone, which leaves exactly one line in the whole screen: none.

TURN 10 Visual direction — screen 2h Same palette, same type, same content. The only variable is what separates one thing from the next.

TYPE Three warm geometric sans, same words All three have a wide weight range and none of them read as eLearning software.

On the surface question. You leaned soft but wanted crisp — 10a and 10b are the same screen in each, so the choice is visible rather than theoretical. My read: soft groups the debrief's three ideas without adding a single line, which is exactly what the border rule asked for. Crisp is more contemporary but pushes the warmth entirely onto the paper color, and this screen is where a parent is being told what they got wrong. A third option exists if you want it — soft blocks for content, crisp 4px corners on controls.