{
 "id": "3.8",
 "title": "States",
 "department": "Design",
 "department_slug": "design",
 "direction": {
  "id": "cooker",
  "name": "Seeti"
 },
 "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/cooker",
  "markdown": "https://handbook.joinsquareup.com/design/states/cooker.md",
  "json": "https://handbook.joinsquareup.com/design/states/cooker.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": "raccoon",
   "name": "Scoop",
   "json": "https://handbook.joinsquareup.com/design/states/raccoon.json"
  },
  {
   "id": "octopus",
   "name": "Ocho",
   "json": "https://handbook.joinsquareup.com/design/states/octopus.json"
  }
 ],
 "tldr": {
  "headline": "Six states, one look each, and a boiled over pot is forgiven",
  "points": [
   {
    "icon": "flag",
    "text": "Every screen is empty, waiting, partial, error, full or done, with one way forward."
   },
   {
    "icon": "warn",
    "text": "Seeti owns the broken moment as Boiled over, in headers, never the error line."
   },
   {
    "icon": "heart",
    "text": "A failed make says: Stuck to the pan. Your other versions are safe."
   },
   {
    "icon": "check",
    "text": "Week done says: Kitchen's clean. Go on, lift the lid."
   },
   {
    "icon": "eye",
    "text": "Under reduced motion, Seeti 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/cooker/kit-skin.js",
  "brand-directions/cooker/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 Seeti'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 Seeti'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 Seeti 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 Seeti's small mark, cooker/svg/icon.svg, instead of the full pose | [src: brand-directions/_kit/render.js:52-54] |\n| Seeti's state words live in its kit-skin.js | [src: brand-directions/cooker/kit-skin.js:44-86] |",
  "Tomorrow": "Each state, as Seeti wears it. All v1 unless tagged.\n\n| State | Screen | What you see | Seeti | Words | One way forward | Tag |\n|---|---|---|---|---|---|---|\n| Empty | w2 Work, empty | the empty state | empty slot, 96 px: cooker/svg/icon.svg, the small mark | \"Empty rail. Heart a special to start one.\" | See this week's picks | Changes |\n| Empty, filtered | t4 See everything with no match | the empty state | empty slot, 96 px: cooker/svg/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: cooker/svg/icon.svg, the small mark | \"Another batch on the stove. You can step away.\" | 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: cooker/svg/pose-02.svg, none | \"Cooking your store. About 3 to 4 minutes. Nobody lifts my lid.\" | 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: cooker/svg/icon.svg, the small mark | \"That one boiled over. My fault. Start 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: cooker/svg/icon.svg, the small mark | \"Stuck to the pan. Your other versions are safe.\" | Try again | Changes |\n| Refusal | f3 This store is for its own team | the error state with your email shown | error slot, 96 px: cooker/svg/icon.svg, the small mark | \"This kitchen is for its own team. Try a demo store.\" | See demo stores, or Switch email | Changes |\n| Not found | x1 Error page | the error state, page size | error slot, 96 px: cooker/svg/icon.svg, the small mark | \"Wrong pot. That page is not on this stove.\" | Go to Today | Changes |\n| Offline | x2 Offline | the error state | wait slot, 96 px: cooker/svg/icon.svg, the small mark | \"Lost the flame. Check your connection, then try again.\" | Try again | Changes |\n| Cap reached | f6 Reads are full this week | the empty state, never a countdown | empty slot, 96 px: cooker/svg/icon.svg, the small mark | \"One pot at a time. 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: cooker/svg/icon.svg | \"Monday. Fresh specials on the pass. Go on, taste.\" | the bottom bar on a pick | Changes |\n| Done, a heart | t6 A heart | a toast with Undo | celebrate, 40 px in the toast: cooker/svg/icon.svg, the small mark | \"Ooh, good taste. More like that, coming up.\" | Undo | Changes |\n| Done, handed off to you | h2 Handed off | the celebration | celebrate slot, 120 px: cooker/svg/face-proud.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: cooker/svg/face-proud.svg | \"Ticket written and copied. Paste it to them.\" For our team: \"Order up. Our team has your ticket.\" | Open the brief | Changes |\n| Done, the week | t5 Caught up | the sign off until Monday | caught slot, 120 px: cooker/svg/pose-08.svg | \"Kitchen’s clean.\" then \"Go on, lift the lid. See you 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/cooker/kit-skin.js:44-86] [src: brand-directions/cooker/kit-skin.js:22-34]\n\nSeeti's own name for a broken moment is \"Boiled over\" and for the week done is \"Kitchen's clean\". 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 boil over, and Seeti says it is its own fault. Faces come only from the eight: unimpressed, impatient, proud, delighted, thinking, shocked, sheepish, sleepy.\n4. Money, privacy, apologies and anything a person must sign are written by people; Seeti 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 Seeti's wait slot and one line.\n7. Under reduced motion Seeti holds still in every state.\n\n[src: brand-directions/_shared/product-model.md:99-113] [src: brand-directions/cooker/system.md:86-100]\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: cooker/snd/logo.mp3, cooker/snd/cue-heart.mp3, cooker/snd/cue-ready.mp3, cooker/snd/cue-handoff.mp3, cooker/snd/cue-error.mp3, cooker/snd/cue-caught.mp3. [src: brand-directions/cooker/kit-skin.js:88-91] [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 Seeti's words from brand-directions/cooker/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 Seeti 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 Seeti'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 Seeti's full celebrate pose rather than 40 px in the toast? Proposal: yes, once, at 120 px, then the toast for every later heart."
 }
}