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.
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.
| Field | Draft | Note |
|---|---|---|
key | tools.focus | New leaf under welcome.home.tools in all 21 full locales; zh-Hant-HK inherits. |
| Title | Focus | Not “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. |
| Line | Press `⌥` `⌘` `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 z | The 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. |
| CTA | Reading 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 | .focus | Added to WelcomeIllustration; height cap and turn per the candidate chosen below. |
| Position | after Star & hide (slot 5) | Its conceptual neighbour — both are bare-key reading states, and the pair reads as a little curriculum: curate, then read. |
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:
| Action | Bare key (SPA) | Native menu | What a slot should teach |
|---|---|---|---|
| Focus Mode | z | ⌥⌘F — View ▸ Focus ModeMenuCommands.swift:1040 | ⌥⌘F. On a Mac the menu is where you look, and the menu is where the discoverability already is. |
| Star | s | none — Quotes ▸ Star carries no keyboardShortcut (:1430) | s — the only route there is. |
| Hide | h | none (:1435) | h — ditto. |
| Add Tag | t | none (:1442) | t — ditto. |
grep -n keyboardShortcut MenuCommands.swift lists 30 items and none of them is Star, Hide or Add Tag.F, not f — which is the same rule that keeps t/s/h lowercase, not a departure from it. And the skin is split (three discrete caps, 0.28rem apart), because §2 assigns split to "first-time onboarding" and joined (⌥⌘F, gap 0) to menu-bar truth. A welcome screen is the definition of the former.welcomeKeyText passes each markdown code run whole to KeycapInline.run, so a single backtick `⌥⌘F` would draw one cap with three glyphs on it — the joined skin, wrong here. Authoring the line as three adjacent runs, `⌥` `⌘` `F`, yields three caps with the space between them as the gap. The existing helper already does this; what it has never been asked for is a combo, and it turns out it doesn't need to be.:929, :962), not by Star and Tag. So a reader who has learned "press s to star" and reaches for the modified form on a Mac gets the sidebar. That is a real hazard in the product, not in this mockup, and it is an argument for the ⌥⌘F cap here: the one action that does have a chord should show it, so the pool stops implying that bare keys are the whole story..cap.mod); Swift gets this free from SF Pro, and the web side must not.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.
.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).focus-mode.css owns, which is the argument that put the Signals card in a webview too.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 (§✗).
⌥⌘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.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.
⌗ 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.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.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.
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.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.
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.SlotRotator was engineered for. The page indicator is windowed (WelcomeHomeView.swift:769), on the iOS scrolling-dots / UIPageControl prior art: it shows what fits, keeps the active dot central, slides the window, and shrinks the outermost dot on any side with hidden tips as the “more that way” cue. maxDotsCap = 9, capped there deliberately because Apple’s HIG notes more than ~10 dots are hard to count at a glance. So nine slots is precisely the cap — all nine dots render, no windowing, nothing degrades — and the tenth (Redact PII, already written and translated in all 21 locales, waiting on a Privacy control) windows gracefully with no new work. The dot row was never the constraint it looked like; this entry previously said it was.focus-mode.html, and the live pages closest to it are both spoken for: keyboard-shortcuts.html is Star & hide's CTA, and appearance.html is about palette and light/dark — which is the exact confusion §✗ exists to avoid. Options, cheapest first: (a) point at keyboard-shortcuts.html and accept the duplication; (b) add a short focus-mode.html to the website's Understand section, which also earns the Tip cell a 25th tip for free (one tip per docs page is that cell's whole construction); (c) no CTA at all — nothing in the pool has ever shipped without one, and the rotator would need to tolerate an empty href, so this is a change to the mechanism, not a shortcut past it.
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.