Answer
Every Brew screen is in one of six states, empty, waiting, partial, error, full or done, and each state looks the same everywhere, with Ocho in its slot and its own words around one plain way forward.
Today
Checked 26 October 2026.
| Fact | Source |
|---|---|
| 25 empty state classes in markup and 18 more only in CSS | brand-directions/_shared/surface-map.md:456 |
| 10 errors are shown in the empty style, such as "The products didn't load. Reload the page." | brand-directions/_shared/surface-map.md:457 |
| 12 loader kinds: spinners, 23 skeleton uses, 6 full screen holds, 18 button text swaps, a game | brand-directions/_shared/surface-map.md:454 |
| Since 21 October every wait uses one loader, the b mark that fills and steams, inside the button that started it | memory brew-loader |
| The loader holds still under reduced motion | brew origin/main public/feed-system.css:157 |
| The feed ends with "You're done for today" and Find more | brew origin/main public/app.js:1657 |
| Offline, the app shell shows a plain page instead of a browser error | brew origin/main public/sw.js:1-8 |
| Quiet pages hide a section until it has something; no zero tiles | memory brew-quiet-ui |
| In the kit, a slot under 120 px draws Ocho's small mark, octopus/char-mark.svg, instead of the full pose | brand-directions/_kit/render.js:52-54 |
| Ocho's state words live in its kit-skin.js | brand-directions/octopus/kit-skin.js:42-84 |
Tomorrow
Each state, as Ocho wears it. All v1 unless tagged.
| State | Screen | What you see | Ocho | Words | One way forward | Tag |
|---|---|---|---|---|---|---|
| Empty | w2 Work, empty | the empty state | empty slot, 96 px: octopus/char-mark.svg, the small mark | "Nothing in the works yet. My arms are suspiciously free." | See this week's picks | Changes |
| Empty, filtered | t4 See everything with no match | the empty state | empty slot, 96 px: octopus/char-mark.svg, the small mark | not written yet | Show all areas | New |
| Empty on purpose | Need your yes with nothing waiting | the section hides | none | none | none | Changes |
| Waiting, short | any button that saves | spinner inside the button, label kept | none | none | it finishes | Changes |
| Waiting, long | m2 Making | the thing dimmed, the wait card | wait slot, 64 px: octopus/char-mark.svg, the small mark | "Ink drying. You can leave, I will keep it." | leave; it lands in Work | Changes |
| Partial, reading | f4 Reading your store | seven sources tick, findings arrive with sources, question 1 of 3 | wait slot, 140 px: octopus/img/v/pose-02.svg, rock, 1.2 s loop | "Eight arms reading your store. About 3 to 4 minutes." | answer a question or watch | Changes |
| Partial, connections | s5 Connections | one chip per row: Connected, Needs you, Expiring, Stale, Read only | none | chip words only | open the row that needs you | Changes |
| Error, the read | f5 Read did not finish | the error state, page size | error slot, 96 px: octopus/char-mark.svg, the small mark | "I got tangled and the read did not finish." | Start again | Changes |
| Error, a make | m5 Something broke in Make it | the error panel, says which version is safe | error slot, 56 px: octopus/char-mark.svg, the small mark | "Smudged it. Your earlier versions are safe. Try again." | Try again | Changes |
| Refusal | f3 This store is for its own team | the error state with your email shown | error slot, 96 px: octopus/char-mark.svg, the small mark | "This store is for its own team. Try a demo store." | See demo stores, or Switch email | Changes |
| Not found | x1 Error page | the error state, page size | error slot, 96 px: octopus/char-mark.svg, the small mark | "Wrong drawer. This page is not here." | Go to Today | Changes |
| Offline | x2 Offline | the error state | wait slot, 96 px: octopus/char-mark.svg, the small mark | "No signal down here. I will wait." | Try again | Changes |
| Cap reached | f6 Reads are full this week | the empty state, never a countdown | empty slot, 96 px: octopus/char-mark.svg, the small mark | "Reads are full this week. Ask for a design partner read." | Ask for a design partner read | Changes |
| Full | t1 Today on Monday | Need your yes, rings, five picks | corner, 44 px: octopus/char-mark.svg | "Monday. Arms full. Five picks for your store, drafted." | the bottom bar on a pick | Changes |
| Done, a heart | t6 A heart | a toast with Undo | celebrate, 40 px in the toast: octopus/char-mark.svg, the small mark | "Stuck it. More like it, coming up." | Undo | Changes |
| Done, handed off to you | h2 Handed off | the celebration | celebrate slot, 120 px: octopus/img/v/pose-celebrate.svg | "Copied, and the place to post is open. Your move." | Open the brief | Changes |
| Done, handed off to a team | h2 Handed off | the celebration with the brief number | celebrate slot, 120 px: octopus/img/v/pose-celebrate.svg | "Brief copied. Paste it to them. One arm free." For our team: "Our team has your brief. One arm free." | Open the brief | Changes |
| Done, the week | t5 Caught up | the sign off until Monday | caught slot, 120 px: octopus/img/v/pose-09.svg | "Arms free. That is the week." then "I am getting in the coffee. See you Monday." | none until Monday | New |
| Error inside a sheet | a connect or hand off that did not go | one line above the sheet buttons | none | one plain sentence | Try again inside the sheet | Changes |
| Field warning | f1 Paste your store | warn border and a hint | none | That looks like a name. Paste the website address instead. | fix the address, nothing lost | Changes |
brand-directions/_kit/screens.js:198-541 brand-directions/_shared/ia.md:83-129 brand-directions/octopus/kit-skin.js:42-84 brand-directions/octopus/kit-skin.js:19-30
Ocho's own name for a broken moment is "Knot" and for the week done is "Arms free". These live in marketing and section headers, never as the error sentence itself. brand-directions/docs2/data/dirs.json
Rules
- An error never uses the empty style. Empty means nothing is wrong.
- Every state names one way forward, except done for the week, which says when the next thing arrives.
- Errors say what happened and what is safe, with no codes and no blame. Errors tie Ocho in a knot. The ink puff is small and to one side, for oops only, never a threat.
- Money, privacy, apologies and anything a person must sign are written by people; Ocho stays out of those.
- Say the real time once: about 3 to 4 minutes for the read. Never a countdown.
- No skeletons. Short waits are the spinner in the button; long waits are Ocho's wait slot and one line.
- Under reduced motion Ocho holds still in every state.
brand-directions/_shared/product-model.md:99-113 brand-directions/octopus/system.md:90-111
Sound with each state
Sound is off on a first visit and stays off until the person turns it on in Settings. When on, one tap plays one cue: heart after a heart, ready when the read finishes or a make is ready, handoff after Hand it off, error when something broke on our side, caught when the week is done. Screens that change by themselves stay silent. Files: octopus/snd/logo.mp3, octopus/snd/cue-heart.mp3, octopus/snd/cue-ready.mp3, octopus/snd/cue-handoff.mp3, octopus/snd/cue-error.mp3, octopus/snd/cue-caught.mp3. brand-directions/octopus/kit-skin.js:86-89 memory brew-sounds
Later states
| State | Version | Tag |
|---|---|---|
| Scheduled, and a post that failed to go out, with Try again | v2 | New |
| Live, with where it went | v2 | New |
| How it went with no data yet: says when the first numbers arrive | v3 | New |
| A rule paused by its limit, in Need your yes | v4 | New |
How we do it
- List the states the screen can be in from the table. Draw each one in the kit with its key, such as m5:broke.
- Use the kit part for the state: k-empty, k-error, k-wait, k-celebrate or a busy button.
- Take Ocho's words from brand-directions/octopus/kit-skin.js; if a state has no key, write one there first, 12 words at most.
- Check the slot size: under 120 px Ocho draws as the small mark.
- Force each state on real brands and on the sample store, at 390 and 1280 wide, light and dark.
Numbers
| Number | Definition | Today | Tomorrow | Where measured | Status |
|---|---|---|---|---|---|
| Empty state styles | distinct empty classes | 25, plus 18 in CSS only | 1 | CSS scan | Measured |
| Errors in the empty style | error messages drawn with an empty class | 10 | 0 | code scan | Measured |
| Loader kinds | distinct ways to show a wait | 12 | 2 | code scan | Measured |
| Screens with every state drawn | of 45 kit screens | not measured | 45 | kit state list | Proposed |
| Weeks caught up | share of brand weeks that reach the caught up state | not measured | product event | Proposed |
Open
- Empty and error slots are 96 px, under the 120 px switch, so Ocho's empty and error poses never show in those slots. Raise those slots to 120 px or accept the small mark? Proposal: accept the small mark in the product and keep the full poses for marketing.
- The kit has no words for See everything filtered to nothing. Proposal: "Nothing in this area this week." with Show all areas.
- Should the first heart celebration use Ocho's full celebrate pose rather than 40 px in the toast? Proposal: yes, once, at 120 px, then the toast for every later heart.