{
 "id": "3.8",
 "title": "States",
 "department": "Design",
 "department_slug": "design",
 "direction": {
  "id": "raccoon",
  "name": "Scoop"
 },
 "branded": true,
 "status": "draft",
 "owner": "Param",
 "last_verified": "Mon Oct 26",
 "holds": "Empty, loading, error, offline, caught up, cap reached",
 "urls": {
  "html": "https://handbook.joinsquareup.com/design/states/raccoon",
  "markdown": "https://handbook.joinsquareup.com/design/states/raccoon.md",
  "json": "https://handbook.joinsquareup.com/design/states/raccoon.json"
 },
 "other_directions": [
  {
   "id": "dog",
   "name": "Fetch",
   "json": "https://handbook.joinsquareup.com/design/states/dog.json"
  },
  {
   "id": "bee",
   "name": "Buzz",
   "json": "https://handbook.joinsquareup.com/design/states/bee.json"
  },
  {
   "id": "octopus",
   "name": "Ocho",
   "json": "https://handbook.joinsquareup.com/design/states/octopus.json"
  },
  {
   "id": "cooker",
   "name": "Seeti",
   "json": "https://handbook.joinsquareup.com/design/states/cooker.json"
  }
 ],
 "tldr": {
  "headline": "Six states, one look each, and a tripped tail is quickly forgiven",
  "points": [
   {
    "icon": "flag",
    "text": "Every screen is empty, waiting, partial, error, full or done, with one way forward."
   },
   {
    "icon": "warn",
    "text": "Scoop's week done is All dished out, kept for headers, never the error line."
   },
   {
    "icon": "heart",
    "text": "A failed make says: Tripped over my tail. Try that again."
   },
   {
    "icon": "check",
    "text": "Week done ends: That is all the gossip this week. Back Monday."
   },
   {
    "icon": "eye",
    "text": "Under reduced motion, Scoop holds still in every state."
   }
  ],
  "stat": {
   "value": "12",
   "label": "Loader kinds today"
  },
  "decide": "Empty and error slots stay on the small mark, or grow to 120 pixels?",
  "mood": "building"
 },
 "sources": [
  "brand-directions/raccoon/kit-skin.js",
  "brand-directions/raccoon/system.md",
  "brand-directions/docs2/data/dirs.json",
  "brand-directions/_shared/ia.md:79-145",
  "brand-directions/_shared/product-model.md:99-113, 129-142",
  "brand-directions/_kit/screens.js:198-541",
  "brand-directions/_kit/render.js:52-54",
  "brand-directions/_kit/kit.css:312, 480-503",
  "brand-directions/book/content/d2.js:11-160",
  "brand-directions/_shared/surface-map.md:454-457",
  "brew origin/main b91e364: public/app.js:1657, public/sw.js:1-8, public/feed-system.css:157-160",
  "memory: brew-loader, brew-quiet-ui"
 ],
 "open_questions": [
  "Empty and error slots are 96 px, under the 120 px switch, so Scoop'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 Scoop's full celebrate pose rather than 40 px in the toast? Proposal: yes, once, at 120 px, then the toast for every later heart."
 ],
 "parts": {
  "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 Scoop in its slot and its own words around one plain way forward.",
  "Today": "Checked 26 October 2026.\n\n| Fact | Source |\n|---|---|\n| 25 empty state classes in markup and 18 more only in CSS | [src: brand-directions/_shared/surface-map.md:456] |\n| 10 errors are shown in the empty style, such as \"The products didn't load. Reload the page.\" | [src: brand-directions/_shared/surface-map.md:457] |\n| 12 loader kinds: spinners, 23 skeleton uses, 6 full screen holds, 18 button text swaps, a game | [src: brand-directions/_shared/surface-map.md:454] |\n| Since 21 October every wait uses one loader, the b mark that fills and steams, inside the button that started it | [src: memory brew-loader] |\n| The loader holds still under reduced motion | [src: brew origin/main public/feed-system.css:157] |\n| The feed ends with \"You're done for today\" and Find more | [src: brew origin/main public/app.js:1657] |\n| Offline, the app shell shows a plain page instead of a browser error | [src: brew origin/main public/sw.js:1-8] |\n| Quiet pages hide a section until it has something; no zero tiles | [src: memory brew-quiet-ui] |\n| In the kit, a slot under 120 px draws Scoop's small mark, raccoon/char-icon.svg, instead of the full pose | [src: brand-directions/_kit/render.js:52-54] |\n| Scoop's state words live in its kit-skin.js | [src: brand-directions/raccoon/kit-skin.js:42-88] |",
  "Tomorrow": "Each state, as Scoop wears it. All v1 unless tagged.\n\n| State | Screen | What you see | Scoop | Words | One way forward | Tag |\n|---|---|---|---|---|---|---|\n| Empty | w2 Work, empty | the empty state | empty slot, 96 px: raccoon/char-icon.svg, the small mark | \"Empty desk. Suspicious. Open a pick and make something.\" | See this week's picks | Changes |\n| Empty, filtered | t4 See everything with no match | the empty state | empty slot, 96 px: raccoon/char-icon.svg, the small mark | not written yet | Show all areas | New |\n| Empty on purpose | Need your yes with nothing waiting | the section hides | none | none | none | Changes |\n| Waiting, short | any button that saves | spinner inside the button, label kept | none | none | it finishes | Changes |\n| Waiting, long | m2 Making | the thing dimmed, the wait card | wait slot, 64 px: raccoon/char-icon.svg, the small mark | \"Scribbling. You can leave, it will be here.\" | leave; it lands in Work | Changes |\n| Partial, reading | f4 Reading your store | seven sources tick, findings arrive with sources, question 1 of 3 | wait slot, 140 px: raccoon/char-read.svg, sway, 1.1 s loop | \"Reading your public pages. About 3 to 4 minutes.\" | answer a question or watch | Changes |\n| 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 |\n| Error, the read | f5 Read did not finish | the error state, page size | error slot, 96 px: raccoon/char-icon.svg, the small mark | \"Lost my place partway. Start the read again.\" | Start again | Changes |\n| Error, a make | m5 Something broke in Make it | the error panel, says which version is safe | error slot, 56 px: raccoon/char-icon.svg, the small mark | \"Tripped over my tail. Try that again.\" | Try again | Changes |\n| Refusal | f3 This store is for its own team | the error state with your email shown | error slot, 96 px: raccoon/char-icon.svg, the small mark | \"This store's notes are for its own team.\" | See demo stores, or Switch email | Changes |\n| Not found | x1 Error page | the error state, page size | error slot, 96 px: raccoon/char-icon.svg, the small mark | \"Nothing here. Even I could not dig it up.\" | Go to Today | Changes |\n| Offline | x2 Offline | the error state | wait slot, 96 px: raccoon/char-icon.svg, the small mark | \"No connection. I will wait right here.\" | Try again | Changes |\n| Cap reached | f6 Reads are full this week | the empty state, never a countdown | empty slot, 96 px: raccoon/char-icon.svg, the small mark | \"Notepad full this week. Ask for a design partner read.\" | Ask for a design partner read | Changes |\n| Full | t1 Today on Monday | Need your yes, rings, five picks | corner, 44 px: raccoon/char-icon.svg | \"Morning. Fresh week, fresh pages. Here is what people said.\" | the bottom bar on a pick | Changes |\n| Done, a heart | t6 A heart | a toast with Undo | celebrate, 40 px in the toast: raccoon/char-icon.svg, the small mark | \"Keep digging, noted. More like it are coming.\" | Undo | Changes |\n| Done, handed off to you | h2 Handed off | the celebration | celebrate slot, 120 px: raccoon/char-heart.svg | \"Copied. The place to post is open. Over to you.\" | Open the brief | Changes |\n| Done, handed off to a team | h2 Handed off | the celebration with the brief number | celebrate slot, 120 px: raccoon/char-heart.svg | \"Brief copied. Slip it to whoever ships it.\" For our team: \"Our team has your brief. Note passed.\" | Open the brief | Changes |\n| Done, the week | t5 Caught up | the sign off until Monday | caught slot, 120 px: raccoon/char-sleepy.svg | \"All dished out.\" then \"That is all the gossip this week. Back Monday.\" | none until Monday | New |\n| 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 |\n| 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 |\n\n[src: brand-directions/_kit/screens.js:198-541] [src: brand-directions/_shared/ia.md:83-129] [src: brand-directions/raccoon/kit-skin.js:42-88] [src: brand-directions/raccoon/kit-skin.js:21-31]\n\nScoop's own name for a broken moment is \"not set\" and for the week done is \"All dished out\". These live in marketing and section headers, never as the error sentence itself. [src: brand-directions/docs2/data/dirs.json]\n\n### Rules\n\n1. An error never uses the empty style. Empty means nothing is wrong.\n2. Every state names one way forward, except done for the week, which says when the next thing arrives.\n3. Errors say what happened and what is safe, with no codes and no blame. Errors are Scoop tripping over its own tail. It never mocks a customer or a reviewer.\n4. Money, privacy, apologies and anything a person must sign are written by people; Scoop stays out of those.\n5. Say the real time once: about 3 to 4 minutes for the read. Never a countdown.\n6. No skeletons. Short waits are the spinner in the button; long waits are Scoop's wait slot and one line.\n7. Under reduced motion Scoop holds still in every state.\n\n[src: brand-directions/_shared/product-model.md:99-113] [src: brand-directions/raccoon/system.md:86-99]\n\n### Sound with each state\n\nSound 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: raccoon/snd/logo.mp3, raccoon/snd/cue-heart.mp3, raccoon/snd/cue-ready.mp3, raccoon/snd/cue-handoff.mp3, raccoon/snd/cue-error.mp3, raccoon/snd/cue-caught.mp3. [src: brand-directions/raccoon/kit-skin.js:90-97] [src: memory brew-sounds]\n\n### Later states\n\n| State | Version | Tag |\n|---|---|---|\n| Scheduled, and a post that failed to go out, with Try again | v2 | New |\n| Live, with where it went | v2 | New |\n| How it went with no data yet: says when the first numbers arrive | v3 | New |\n| A rule paused by its limit, in Need your yes | v4 | New |",
  "How we do it": "1. List the states the screen can be in from the table. Draw each one in the kit with its key, such as m5:broke.\n2. Use the kit part for the state: k-empty, k-error, k-wait, k-celebrate or a busy button.\n3. Take Scoop's words from brand-directions/raccoon/kit-skin.js; if a state has no key, write one there first, 12 words at most.\n4. Check the slot size: under 120 px Scoop draws as the small mark.\n5. 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 |\n|---|---|---|---|---|---|\n| Empty state styles | distinct empty classes | 25, plus 18 in CSS only | 1 | CSS scan | Measured |\n| Errors in the empty style | error messages drawn with an empty class | 10 | 0 | code scan | Measured |\n| Loader kinds | distinct ways to show a wait | 12 | 2 | code scan | Measured |\n| Screens with every state drawn | of 45 kit screens | not measured | 45 | kit state list | Proposed |\n| Weeks caught up | share of brand weeks that reach the caught up state | not measured | | product event | Proposed |",
  "Open": "1. Empty and error slots are 96 px, under the 120 px switch, so Scoop'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.\n2. The kit has no words for See everything filtered to nothing. Proposal: \"Nothing in this area this week.\" with Show all areas.\n3. Should the first heart celebration use Scoop's full celebrate pose rather than 40 px in the toast? Proposal: yes, once, at 120 px, then the toast for every later heart."
 }
}