--- id: "3.7" title: "Patterns" dept: design status: draft owner: Param branded: false last_verified: 2026-10-26 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" --- # Patterns ## 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. | Fact | Source | |---|---| | 16 ways into a jam, 10 hand off buttons across 6 surfaces, 4 brief formats | [src: brand-directions/_shared/product-model.md:5] | | 5 places list what waits on you, under 3 names | [src: brand-directions/_shared/product-model.md:5] | | 16 action bars and about 13 main button styles | [src: brand-directions/_shared/surface-map.md:444-445] | | 3 paid confirm flows and 5 buttons that show a price on the first tap | [src: brand-directions/_shared/surface-map.md:490] | | 10 version history styles | [src: brand-directions/_shared/surface-map.md:466] | | Four ways to confirm, including browser confirm boxes | [src: brand-directions/book/content/d2.js:316] | | The jam stage already runs one contract: one primary button, Draft, Make, Send, every deliverable | [src: memory brew-one-stage] | | 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] | | One version first, then Redo it | [src: memory brew-one-version] [src: brew origin/main public/app.js:4119-4122] | | Connector sheets are solid with a pinned header and footer and a scrolling body | [src: memory brew-connect-sheet-design] | | 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] | | Every wait uses the one b mark loader, inside the button that started it | [src: memory brew-loader] | ## Tomorrow ### The pattern table | Pattern | The one way | Version | Tag | |---|---|---|---| | Next step | One bottom bar with one main button. On a pick: Make it. In Make it: Hand it off | v1 | Changes | | 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 | | Sheets | Slides up, title, one main button, Close. Nothing opens on top of a sheet | v1 | Changes | | Confirm | Undo toast for anything reversible. One sheet for anything paid or that leaves the product. No browser confirm boxes | v1 | Changes | | Toasts | One line, three seconds, one at a time | v1 | Changes | | Waiting | Short: a spinner inside the button. Long: the character's wait pose with one line. No skeletons | v1 | Changes | | Empty | The character, one line, one button | v1 | Changes | | Errors | One plain sentence, one way out, the error pose. Never the empty style | v1 | Changes | | Status | Idea, In the works, Handed off. Later: Scheduled, Live in v2, How it went in v3 | v1 | Changes | | Icons | One icon set, no emoji, no glyphs | v1 | Changes | | Sound | Every cue short, off on a first visit, one switch in Settings | v1 | Changes | [src: brand-directions/_shared/product-model.md:99-113] [src: brand-directions/_shared/ia.md:63] ### Need your yes - 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] - 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] - Yes: the row leaves, the count drops, a toast with Undo. Not now: it goes down until tomorrow. - No character in a decision. When nothing waits, the section hides; there is no empty box. - Brief status Needs something from you also lands here. [src: brand-directions/_shared/ia.md:61] - Borrow: bank payment approvals on phone, Linear triage on laptop. Never hide what happens. [src: brand-directions/_shared/product-model.md:229] - v1 Changes. In v4, when it runs within rules, Need your yes becomes the control centre: New. ### The story viewer - Rings on Today: 24 hour stories, Your week recap on Monday. Rings clear once seen. [src: brand-directions/_shared/ia.md:16] - One fact per frame, 8 words at most, over the picture, with its source and one button. - Tap the right or left edge for next or back, swipe down to close, every gesture also a button. - No autoplay sound, no endless stories. [src: brand-directions/_shared/product-model.md:228] - v1 Stays, restyled. ### A pick, open - 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] - 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. ### Make it - 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] - Tools inside: add a photo or file, talk instead of typing, film board, teleprompter. [src: brand-directions/_shared/ia.md:68] - 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] - The stage shows only the piece; a set shows one slide big with numbered dots. [src: memory brew-one-stage] - 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] ### New version and Versions - One version first. New version makes one more take; the old one goes to Versions. [src: memory brew-one-version] - 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] - An edit in place saves as a new version and the toast says which. - v1 Changes, the word Redo it becomes New version. ### Confirming a paid make - The first button never shows a price. [src: brand-directions/_shared/product-model.md:97] - One sheet: what will be made, the price once, what happens next, Make it and Not now. [src: brand-directions/_shared/ia.md:103] - States: quoting, ready, starting, no credit, error. [src: brand-directions/_shared/surface-map.md:490] - Starting leads to Making: the wait pose, one line, you can leave. The result lands in New since you looked in Work. - v1 Changes. The Slack make button, which starts a paid make with no confirm, goes Next. [src: brand-directions/_shared/ia.md:59] ### Hand it off - One button, then one sheet: Who is shipping this. [src: brand-directions/_shared/ia.md:30] | Choice | What happens | Ending | |---|---|---| | Me | Copies the words and opens the exact place to post | Copied, the place to post is open | | 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 | | My agency or freelancer | Copies the brief and link | Brief copied, nothing was sent | | Our team | Our team really gets the brief by email | Our team has it, with the brief number | - 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] - 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] - Old brief links keep working and redirect there. [src: brand-directions/_shared/ia.md:174] - v1 Changes over today's routes. v2 adds Schedule it as a second exit: New. v4 adds Let it run: New. ### Heart, Not for me, Later - Heart means more like this: more like it appear, never a number. [src: brand-directions/_shared/product-model.md:14] - Not for me drops it, with Undo in the toast. Later takes it out of the five and keeps it in See everything. - On a laptop H hearts and X is Not for me. v1 Changes. ### Keys and gestures | Key or gesture | Does | Where | |---|---|---| | J and K | Next and previous pick | Today, laptop | | H | Heart | Today, laptop | | X | Not for me | Today, laptop | | Enter | Open | Today, laptop | | Esc | Close the sheet or side peek | Everywhere | | M | Make it | A pick, laptop | | Tap an edge | Next or previous frame | Story viewer | | Swipe down | Close a sheet or story | Phone | [src: brand-directions/_shared/product-model.md:250] v1 New. ### Deep links Every 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. 2. Count main buttons on the screen. One. 3. Count layers: no sheet opens on a sheet, no menu opens on a sheet. 4. For each action, decide reversible or not. Reversible gets Undo; paid or leaving gets the one sheet. 5. 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. 6. 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 | |---|---|---|---|---| | Ways into the making space | Distinct entry routes that open a jam | 16 | Route audit | Measured | | Hand off buttons | Buttons that hand work off | 10 across 6 surfaces | String and route audit | Measured | | Priced first buttons | Buttons that show a price on the first tap | 5 | String audit | Measured | | Browser confirm boxes | confirm calls in the front end | present, not counted | Code scan | Proposed | | 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. 2. Do the keys show a small hint the first time on a laptop? Proposal: yes, one line under the first pick, once. 3. 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. 4. 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.