Welcome — a “Focus” slot for the Study tools cell · ideas, nothing built

Four candidate looping illustrations for a ninth slot in the φ-major Study tools cell, teaching Focus Mode — shipped 0.24.0 on Quotes, extended to Signals on 21 Sep 2026 and currently taught nowhere on the Welcome screen. Focus is the easiest tool in the pool to draw, because the feature is a visual state transition on quote cards: the illustration can be the thing itself rather than a metaphor for it. So the design question isn't “what picture stands for this?” — it's which of the two axes one loop can teach, and whether the pool can take a ninth card at all (§✱). The cell teaches ⌥⌘F, the Mac route, not the SPA's bare z — §⌘ covers why, and why the pool's other key-bearing slots are already correct.

≡ · The copy — what the slot says, before what it draws

Copy is the cheap half and it constrains the picture, so it goes first. Drafted to the house pattern: title is the feature's own name, the line carries a real drawn keycap from a markdown backtick (welcomeKeyText, lowercase per the unmodified-key rule), the CTA is a 1–3 word label naming the destination.

FieldDraftNote
keytools.focusNew leaf under welcome.home.tools in all 21 full locales; zh-Hant-HK inherits.
TitleFocusNot “Focus Mode” — every other title in the pool is a bare noun (Tag, Ingest, Codebooks). The toolbar keeps toolbar.focusMode; a cell tag is not a control label.
LinePress `⌥` `⌘` `F` to read the quotes alone — tags, timecodes and the cards themselves recede until you reach for them.The subordinate clause is doing the load-bearing work: it teaches Axis 2 (receded ≠ disabled) in five words, which no picture teaches for free.
The key⌥⌘F, not bare zThe surface is Mac-only, so it teaches the Mac route — View ▸ Focus Mode, MenuCommands.swift:1040. See §⌘ below; this is the one slot in the pool where the choice arises at all.
CTAReading the report →⚠️ Open. No docs page owns this yet — see §✱.2. keyboard-shortcuts.html is already Star & hide's CTA, and a second slot pointing there wastes the ambient-map property the Tip cell is built on.
Case.focusAdded to WelcomeIllustration; height cap and turn per the candidate chosen below.
Positionafter Star & hide (slot 5)Its conceptual neighbour — both are bare-key reading states, and the pair reads as a little curriculum: curate, then read.

⌘ · Which key the cell teaches — and why the other slots are already right

The Welcome screen ships only in the Mac app, so it should teach the Mac route. Focus is reachable two ways and the pool's other key-bearing slots are not, which makes this a one-slot decision rather than a sweep:

ActionBare key (SPA)Native menuWhat a slot should teach
Focus Modez⌥⌘F — View ▸ Focus Mode
MenuCommands.swift:1040
⌥⌘F. On a Mac the menu is where you look, and the menu is where the discoverability already is.
Starsnone — Quotes ▸ Star carries no keyboardShortcut (:1430)s — the only route there is.
Hidehnone (:1435)h — ditto.
Add Tagtnone (:1442)t — ditto.

A · The dissolve — ⌥⌘F pressed · chrome recedes · pointer returns one card · released  ← recommended

The literal one, and the only candidate that teaches both axes in a single loop. Three real cards at rest with their full chrome; the ⌥⌘F chord presses and everything but the quote text, the speaker code and the star drops to 0.14 over 320ms; a beat; then the pointer crosses the middle card and it returns whole — the Axis-2 beat, which is the half of Focus nobody discovers by accident. Pointer leaves, it recedes again, cap releases, loop. Every value here is the shipped token, so this mock is also a contrast check.

Study tools
Focus
Press ⌥⌘F to read the quotes alone — tags, timecodes and the cards themselves recede until you reach for them.
Reading the report →
Drop a folder
Drag a folder of recordings or transcripts here to add it as a project.
at cell scale
  • The star never moves, and that is the point. There is no Focus rule for .star-btn at all — corrected 3 Aug 2026, because you enter Focus in order to star, and darkening the one always-present control darkens the thing the mode exists to serve. The illustration inherits this for free by having no rule; watch the star glyphs stay lit through the dissolve while the starred left bracket dissolves with everything else (the second correction, same day — --bn-colour-starred on a dissolved field was the loudest thing on screen, on every starred card at once).
  • Axis 2 is the whole reason for the third beat. Without it the loop says “Focus hides things”, which is the reading that makes people distrust the mode. With it the loop says “Focus rests things” — and it costs one pointer move. If a beat has to be cut for time, cut the release, not this.
  • Risk: the “before” frame has to survive cell scale. Three cards with badges, timecodes and a star is the most chrome any illustration in the pool carries, and at a 400pt cell it is the frame the reader sees first. Mitigation drawn here: two cards at cell scale, three at detail — the dissolve reads identically and the starting frame stays legible. Cap ≈ 176, between Codebooks (176) and Star & hide (190).
  • Build target: webview. It is the shipped report CSS doing the shipped transition — rebuilding it in SwiftUI forks a second source of truth for the exact rules focus-mode.css owns, which is the argument that put the Signals card in a webview too.

B · The gutter — chrome slides out to the left, the measure stays put

A movement reading rather than a fade. The chrome — chips, timecode, star — lives in a left gutter and, on ⌥⌘F, slides out of the frame while the words hold their position exactly. Nothing dims; things leave. Argues that Focus gives you back the page rather than turning the lights down, which is the misreading the moon glyph invites (§✗).

Study tools
Focus
Press ⌥⌘F to read the quotes alone — tags, timecodes and the cards themselves recede until you reach for them.
Reading the report →
Drop a folder
Drag a folder of recordings or transcripts here to add it as a project.
at cell scale
  • It is prettier and it is a lie. Focus dims in place — that is the iA Writer lineage the doc names explicitly, and the reason it isn't VS Code Zen (hide + re-centre). Chrome that leaves promises a reflow the product doesn't do, and the first time a researcher presses ⌥⌘F and sees everything stay put, the illustration has mis-taught them. Listed because the motion is genuinely good — if a future Focus ever did reclaim the gutter, this is the drawing waiting for it.
  • Cheapest honest variant: keep the slide for the timecode column only, which genuinely is in a gutter, and dim the rest in place. Hybrid of B into A, one extra transform.

C · The field — twenty cards at once: marks go out, the column of words stays

Zoom out past legibility. Each row is one card reduced to its marks — a coloured chip, a timecode, a left rule — and its words as grey bars. On ⌥⌘F every coloured mark in the column goes out together. This is the one-ring rule made visible: a mark that reads well on one object reads as noise on twenty. It is also the only candidate that answers the full-bleed brief — it grows by quantity, so it reads correctly as a 2.4:1 letterbox at a 400pt cell and as a near-square column at 850pt. Drag the window and watch the row count change.

Study tools
Focus
Press ⌥⌘F to read the quotes alone — tags, timecodes and the cards themselves recede until you reach for them.
Reading the report →
Drop a folder
Drag a folder of recordings or transcripts here to add it as a project.
at cell scale — fewer rows
  • It measures its box, like the full-bleed fixture. Rows render one at a time and stop when the next would overflow, re-running on resize — the mechanism the ⌗ Full-bleed slot section of welcome-studytools-animations.html proved. Every other illustration in the pool is fit-and-centre (align-items:center, clamped at Math.min(0.9,…)), so a taller box buys them air and never content. This one is the first that would use the depth.
  • What it gains, and what it gives up. It is the only candidate that shows the scale of the relief, and it's beautiful at any aspect. It also teaches neither axis: nothing here says the chrome is one hover away, and at this zoom a reader can't tell a sentiment badge from a tag chip. Best as a second Focus-adjacent slot or as the full-bleed pathfinder — not as the slot that has to teach the feature.
  • Watch the left rules. They fade to 40% rather than out, matching --bn-focus-outline-mix — cards become outlines, not nothing. Getting that one value wrong is what makes a Focus mock look like a delete animation.

D · The cap alone — one chord, one card, nine words of motion

The minimum that could work. A single card and the bare chord, pressed and released. No pointer, no hover, no second card. Drawn here because the pool has a quantity problem (§✱.1) and the cheapest way to earn a ninth slot is to make it the smallest.

Study tools
Focus
Press ⌥⌘F to read the quotes alone — tags, timecodes and the cards themselves recede until you reach for them.
Reading the report →
Drop a folder
Drag a folder of recordings or transcripts here to add it as a project.
at cell scale
  • A single card can't show the relief. Focus is a field effect — the gain is that twenty cards stop competing, and one card dimming its own badge reads as a card losing its badge. That is the same reasoning the one-ring rule uses in the opposite direction, and it is why A draws two or three and C draws twenty.
  • Keep it as the reduce-motion still, though. Every illustration ships a finished frame for reduceMotion; this composition — one card receded, cap down — is a better still than A's third beat, because a frozen hover state reads as a bug. Switch Motion above to see each candidate's still.

✗ · Rejected — the moon, and dusk — drawn so it stops being re-proposed

The toolbar button is a moon (moon.circle, the glyph Apple uses for the identically-named feature in Mail's View menu), so “moon rises, page dims” is the obvious illustration and will be proposed again by whoever looks at the toolbar next. It is wrong, and it's worth having the picture on file with the reason attached.

✗ reads as dark mode
  • Focus never touches the ground colour — it is orthogonal to the theme, and you can be in Focus in light, dark, default or Edo. An illustration that darkens the page teaches the single most damaging wrong thing about the feature, to the exact audience who hasn't used it yet. The Toolbar.tsx comment already says the glyph is to be read as “quiet”, not “dark mode”, and the button deliberately sits with the view controls rather than the appearance ones — a dusk animation overturns that in one frame.
  • The palette switcher is the proof. Flip Appearance ▸ Dark above: candidates A–D are unchanged in meaning, because they dim relative to their ground. This panel has nowhere to go — it is already night.
  • Also rejected, no drawing needed: a pair of spectacles, a “noise → silence” waveform, and anything with a person in it. The pool has no mascot and no metaphor in it anywhere; eight slots all draw the product. Not the place to start.

✱ · Three things to settle before any of this is built

Ideas only — nothing in this page is built, and WelcomeIllustration has no .focus case. Siblings: welcome-studytools-animations.html (the pool's reference spec), focus-mode-lab.html and signals-focus-mode.html (the feature's own sandpits). Docs: docs/design-welcome-screen.md §Cell 1 · docs/design-focus-mode.md.