{
 "id": "3.7",
 "title": "Patterns",
 "department": "Design",
 "department_slug": "design",
 "direction": null,
 "branded": false,
 "status": "draft",
 "owner": "Param",
 "last_verified": "Mon Oct 26",
 "holds": "Need your yes, story viewer, Make it, hand off, versions, confirming a paid make",
 "urls": {
  "html": "https://handbook.joinsquareup.com/design/patterns",
  "markdown": "https://handbook.joinsquareup.com/design/patterns.md",
  "json": "https://handbook.joinsquareup.com/design/patterns.json"
 },
 "other_directions": [],
 "tldr": {
  "headline": "Each recurring job gets exactly one way, on every screen",
  "points": [
   {
    "icon": "flag",
    "text": "One bottom bar, one main button: Make it on a pick, Hand it off after."
   },
   {
    "icon": "check",
    "text": "Reversible acts get an Undo toast; paid or outward acts get one confirm sheet."
   },
   {
    "icon": "money",
    "text": "A first button never shows a price; the sheet shows it once."
   },
   {
    "icon": "chat",
    "text": "Need your yes tops Today and replaces five lists of waiting things."
   },
   {
    "icon": "gear",
    "text": "Today: 16 ways into a jam, 10 hand off buttons. Tomorrow: one of each."
   }
  ],
  "stat": {
   "value": "16",
   "label": "Ways into a jam today"
  },
  "decide": "Is Me a hand off choice in v1, and does Slack lose its make button?",
  "mood": "waiting"
 },
 "sources": [
  "brand-directions/_shared/product-model.md:5, 37-65, 99-113, 182-198, 221-250",
  "brand-directions/_shared/ia.md:21-50, 54-77, 99-108, 133-145, 155-176",
  "brand-directions/_shared/surface-map.md:443-491",
  "brand-directions/book/content/d2.js:254-410",
  "brand-directions/book/content/d1.js:121-153, 368-408, 547-600",
  "brew origin/main b91e364: public/app.js:1470, 4119-4122",
  "memory: brew-one-stage, brew-one-version, brew-connect-sheet-design, brew-sounds, brew-loader"
 ],
 "open_questions": [
  "Should Undo stay reachable after the toast goes, for example from the item's menu? Proposal: no, three seconds plus Later in See everything is enough for v1.",
  "Do the keys show a small hint the first time on a laptop? Proposal: yes, one line under the first pick, once.",
  "The hand off sheet lists four choices but the kit words describe three. Is Me a choice in v1? Proposal: yes, Me ships Copy and open, which already exists.",
  "Should Slack keep its make button until the Next change? Proposal: remove it in v1 so every paid make starts at the one confirm sheet."
 ],
 "parts": {
  "Answer": "Brew does each recurring job one way, the next step, Need your yes, the story viewer, Make it, versions, a paid make, hand off, undo and waiting, and this page fixes that one way for every screen.",
  "Today": "Checked 26 October 2026.\n\n| Fact | Source |\n|---|---|\n| 16 ways into a jam, 10 hand off buttons across 6 surfaces, 4 brief formats | [src: brand-directions/_shared/product-model.md:5] |\n| 5 places list what waits on you, under 3 names | [src: brand-directions/_shared/product-model.md:5] |\n| 16 action bars and about 13 main button styles | [src: brand-directions/_shared/surface-map.md:444-445] |\n| 3 paid confirm flows and 5 buttons that show a price on the first tap | [src: brand-directions/_shared/surface-map.md:490] |\n| 10 version history styles | [src: brand-directions/_shared/surface-map.md:466] |\n| Four ways to confirm, including browser confirm boxes | [src: brand-directions/book/content/d2.js:316] |\n| The jam stage already runs one contract: one primary button, Draft, Make, Send, every deliverable | [src: memory brew-one-stage] |\n| A set of slides shows one big with arrows, numbered dots and arrow keys, with a One or All toggle | [src: memory brew-one-stage] |\n| One version first, then Redo it | [src: memory brew-one-version] [src: brew origin/main public/app.js:4119-4122] |\n| Connector sheets are solid with a pinned header and footer and a scrolling body | [src: memory brew-connect-sheet-design] |\n| One tap plays one sound; screens that change by themselves stay silent; sound is on by default | [src: memory brew-sounds] [src: brew origin/main public/app.js:1470] |\n| Every wait uses the one b mark loader, inside the button that started it | [src: memory brew-loader] |",
  "Tomorrow": "### The pattern table\n\n| Pattern | The one way | Version | Tag |\n|---|---|---|---|\n| Next step | One bottom bar with one main button. On a pick: Make it. In Make it: Hand it off | v1 | Changes |\n| One way in | A pick opens its studio. Work rows and notifications open the same studio. The round button and New jam go; Start something new lives in Work | v1 | Changes |\n| Sheets | Slides up, title, one main button, Close. Nothing opens on top of a sheet | v1 | Changes |\n| Confirm | Undo toast for anything reversible. One sheet for anything paid or that leaves the product. No browser confirm boxes | v1 | Changes |\n| Toasts | One line, three seconds, one at a time | v1 | Changes |\n| Waiting | Short: a spinner inside the button. Long: the character's wait pose with one line. No skeletons | v1 | Changes |\n| Empty | The character, one line, one button | v1 | Changes |\n| Errors | One plain sentence, one way out, the error pose. Never the empty style | v1 | Changes |\n| Status | Idea, In the works, Handed off. Later: Scheduled, Live in v2, How it went in v3 | v1 | Changes |\n| Icons | One icon set, no emoji, no glyphs | v1 | Changes |\n| Sound | Every cue short, off on a first visit, one switch in Settings | v1 | Changes |\n\n[src: brand-directions/_shared/product-model.md:99-113] [src: brand-directions/_shared/ia.md:63]\n\n### Need your yes\n\n- Where: the top of Today, with a count on the Today tab. The other four lists of waiting things go. [src: brand-directions/_shared/product-model.md:64]\n- A row: where it came from, a yes or no question of 10 words at most, one line on what happens either way, Yes as the main button and Not now as quiet. [src: brand-directions/_shared/product-model.md:193]\n- Yes: the row leaves, the count drops, a toast with Undo. Not now: it goes down until tomorrow.\n- No character in a decision. When nothing waits, the section hides; there is no empty box.\n- Brief status Needs something from you also lands here. [src: brand-directions/_shared/ia.md:61]\n- Borrow: bank payment approvals on phone, Linear triage on laptop. Never hide what happens. [src: brand-directions/_shared/product-model.md:229]\n- v1 Changes. In v4, when it runs within rules, Need your yes becomes the control centre: New.\n\n### The story viewer\n\n- Rings on Today: 24 hour stories, Your week recap on Monday. Rings clear once seen. [src: brand-directions/_shared/ia.md:16]\n- One fact per frame, 8 words at most, over the picture, with its source and one button.\n- Tap the right or left edge for next or back, swipe down to close, every gesture also a button.\n- No autoplay sound, no endless stories. [src: brand-directions/_shared/product-model.md:228]\n- v1 Stays, restyled.\n\n### A pick, open\n\n- Phone: a full screen sheet over Today. Tablet: a sheet from the right, half width. Laptop: a side peek beside the list, Esc closes. [src: brand-directions/_shared/product-model.md:244-248]\n- Four layers in a fixed order: the draft with New version and Versions, Why this, the plan, Where to post. Then the bottom bar, Make it. v1 Changes.\n\n### Make it\n\n- One studio for every entry: the thing on the left, the chat on the right on a laptop; the thing on top, chat below, on a phone. [src: brand-directions/_shared/ia.md:26-29]\n- Tools inside: add a photo or file, talk instead of typing, film board, teleprompter. [src: brand-directions/_shared/ia.md:68]\n- The chat changes the thing. AI, teammate and system messages share one bubble set; an AI reply runs 60 words before More. [src: brand-directions/_shared/surface-map.md:467]\n- The stage shows only the piece; a set shows one slide big with numbered dots. [src: memory brew-one-stage]\n- Bottom bar: Hand it off. v1 Changes: the jam pane, Jam v2 and the card page leave the product; their engines stay. [src: brand-directions/_shared/ia.md:157-163]\n\n### New version and Versions\n\n- One version first. New version makes one more take; the old one goes to Versions. [src: memory brew-one-version]\n- Versions is a strip with the current one marked; one tap uses an earlier one. No branches, no merges. [src: brand-directions/_shared/product-model.md:233]\n- An edit in place saves as a new version and the toast says which.\n- v1 Changes, the word Redo it becomes New version.\n\n### Confirming a paid make\n\n- The first button never shows a price. [src: brand-directions/_shared/product-model.md:97]\n- One sheet: what will be made, the price once, what happens next, Make it and Not now. [src: brand-directions/_shared/ia.md:103]\n- States: quoting, ready, starting, no credit, error. [src: brand-directions/_shared/surface-map.md:490]\n- Starting leads to Making: the wait pose, one line, you can leave. The result lands in New since you looked in Work.\n- v1 Changes. The Slack make button, which starts a paid make with no confirm, goes Next. [src: brand-directions/_shared/ia.md:59]\n\n### Hand it off\n\n- One button, then one sheet: Who is shipping this. [src: brand-directions/_shared/ia.md:30]\n\n| Choice | What happens | Ending |\n|---|---|---|\n| Me | Copies the words and opens the exact place to post | Copied, the place to post is open |\n| My team | Copies the numbered brief and its read only link; Post to Slack when Slack is connected | Brief copied, paste it to them, nothing was sent |\n| My agency or freelancer | Copies the brief and link | Brief copied, nothing was sent |\n| Our team | Our team really gets the brief by email | Our team has it, with the brief number |\n\n- Afterwards the work shows Handed off with one sub line: Received, In progress, Needs something from you, Delivered. [src: brand-directions/_shared/ia.md:61]\n- The person who opens the brief link gets one read only page, phone first, no login: the brief, the files, Copy all, its status, Open it in Make it. [src: brand-directions/_shared/ia.md:31, 64]\n- Old brief links keep working and redirect there. [src: brand-directions/_shared/ia.md:174]\n- v1 Changes over today's routes. v2 adds Schedule it as a second exit: New. v4 adds Let it run: New.\n\n### Heart, Not for me, Later\n\n- Heart means more like this: more like it appear, never a number. [src: brand-directions/_shared/product-model.md:14]\n- Not for me drops it, with Undo in the toast. Later takes it out of the five and keeps it in See everything.\n- On a laptop H hearts and X is Not for me. v1 Changes.\n\n### Keys and gestures\n\n| Key or gesture | Does | Where |\n|---|---|---|\n| J and K | Next and previous pick | Today, laptop |\n| H | Heart | Today, laptop |\n| X | Not for me | Today, laptop |\n| Enter | Open | Today, laptop |\n| Esc | Close the sheet or side peek | Everywhere |\n| M | Make it | A pick, laptop |\n| Tap an edge | Next or previous frame | Story viewer |\n| Swipe down | Close a sheet or story | Phone |\n\n[src: brand-directions/_shared/product-model.md:250] v1 New.\n\n### Deep links\n\nEvery notification and email opens exactly its thing: a pick, its studio or the brief. The bell goes; New since you looked heads Work. [src: brand-directions/_shared/ia.md:75] v1 Changes.",
  "How we do it": "1. Name the job the screen does. If it is in the table above, use that pattern as written.\n2. Count main buttons on the screen. One.\n3. Count layers: no sheet opens on a sheet, no menu opens on a sheet.\n4. For each action, decide reversible or not. Reversible gets Undo; paid or leaving gets the one sheet.\n5. For each wait, decide short or long. Short is the spinner in the button; long is the wait pose with one line saying you can leave.\n6. Check the pattern against every entry point, so a notification, a Work row and a pick all land on the same screen.",
  "Numbers": "| Number | Definition | Today | Where it is measured | Status |\n|---|---|---|---|---|\n| Ways into the making space | Distinct entry routes that open a jam | 16 | Route audit | Measured |\n| Hand off buttons | Buttons that hand work off | 10 across 6 surfaces | String and route audit | Measured |\n| Priced first buttons | Buttons that show a price on the first tap | 5 | String audit | Measured |\n| Browser confirm boxes | confirm calls in the front end | present, not counted | Code scan | Proposed |\n| Undo use | Share of Not for me taps undone within three seconds | not measured | Product event | Proposed |",
  "Open": "1. Should Undo stay reachable after the toast goes, for example from the item's menu? Proposal: no, three seconds plus Later in See everything is enough for v1.\n2. Do the keys show a small hint the first time on a laptop? Proposal: yes, one line under the first pick, once.\n3. The hand off sheet lists four choices but the kit words describe three. Is Me a choice in v1? Proposal: yes, Me ships Copy and open, which already exists.\n4. Should Slack keep its make button until the Next change? Proposal: remove it in v1 so every paid make starts at the one confirm sheet."
 }
}