{
 "id": "3.3",
 "title": "Today to tomorrow",
 "department": "Design",
 "department_slug": "design",
 "direction": null,
 "branded": false,
 "status": "generated",
 "owner": "Param",
 "last_verified": "2026-10-26",
 "holds": "309 surfaces to 22, every component family",
 "urls": {
  "html": "https://handbook.joinsquareup.com/design/today-to-tomorrow",
  "markdown": "https://handbook.joinsquareup.com/design/today-to-tomorrow.md",
  "json": "https://handbook.joinsquareup.com/design/today-to-tomorrow.json"
 },
 "other_directions": [],
 "tldr": {
  "headline": "Every one of today's 309 surfaces gets a home among 22 screens",
  "points": [
   {
    "icon": "map",
    "text": "309 reachable surfaces collapse to 22 screens and sheets, plus emails."
   },
   {
    "icon": "gear",
    "text": "42 routes and address switches become six: Today, Work, Your store, Settings, a pick, Make it."
   },
   {
    "icon": "box",
    "text": "163 button classes become four, and 23 sheet styles become one."
   },
   {
    "icon": "flag",
    "text": "The tables map each old surface to its new place, grouped by where it goes."
   },
   {
    "icon": "check",
    "text": "Almost every row is tagged Changes; only the long wait game is New."
   }
  ],
  "stat": {
   "value": "309",
   "label": "Surfaces today"
  },
  "decide": null,
  "mood": "building"
 },
 "sources": [
  "brand-directions/_shared/surface-map.md"
 ],
 "open_questions": [],
 "parts": {
  "Answer": "Every one of today's 309 surfaces and 78 component families, and where it goes tomorrow.",
  "Today": "| What | Today | Tomorrow | Note |\n|---|---|---|---|\n| Surfaces a person can reach | 309 | 22 | Every page, view, sheet, overlay, menu and page outside the app. Now 22 screens and sheets, plus emails. |\n| Routes and address switches | 42 | 6 | Twenty view routes, nine hash routes, a share token and twelve query switches. Now Today, Work, Your store, Settings, a pick, Make it. |\n| Sheet styles | 23 | 1 | Through one helper but 23 class variants. Now one sheet, used by about eight sheets. |\n| Button classes | 163 | 4 | Leading classes on every button, 13 of them for a main action. Now main, quiet, link and icon. |\n| Empty state styles | 25 | 1 | Plus 18 more defined only in CSS. Now the character, one line, one button. Errors get their own. |\n| Loader kinds | 12 | 2 | Spinners, skeletons, full screen holds, text swaps, a game. Now a spinner in the button and the character wait pose. |\n| Status lists | 44 | 2 | Twenty nine of them say where one piece of work is. Now Idea, In the works, Handed off, and one list for connections. |\n| Popover and menu styles | 16 | 1 | Card menus, panels, pickers. Now one menu. |",
  "Tomorrow": "### First run and access\n\n| Id | Today | Goes to | Tomorrow's name | Tag |\n|---|---|---|---|---|\n| A1 | Landing: eyebrow Design partner preview | First run | Paste your store | Changes |\n| A3 | Sign in wall, two titles Sign in to see your feed and Sign in to open the brand, chip the brand is read | First run | Sign in with your work email | Changes |\n| A4 | Wrong account wall the brand is for the brand’s team | First run | This store is for its own team | Changes |\n| A5 | Demo mode sheet You’re seeing the brand in demo mode | First run | This store is for its own team | Changes |\n| A7 | Reading screen Reading the brand | First run | Reading your store | Changes |\n| A8 | Questions offer bar the product keeps reading in the background. Five quick taps meanwhile, so your feed… | First run | Three quick questions | Changes |\n| A9 | Questions full screen layer, label A few questions | First run | Three quick questions | Changes |\n| A10 | Read done bar the brand is read. N sources, N findings. Your feed starts from these. | First run | Here’s your store | Changes |\n| A11 | Read failed bar We couldn’t read the brand. | First run | We couldn’t read your store, Start again | Changes |\n| A121 | Join arrival toast You’re on the brand’s team | First run | Welcome to the team | Changes |\n| A122 | Sign in failed toast Google sign-in did not finish. Try again. | First run | Sign in did not work | Changes |\n| S1 | Landing page shell, title the product, the paste screen is drawn by the client | First run | Paste your store | Changes |\n| S3 | 404 page We couldn’t find that page | First run | Page not found | Changes |\n| S6 | Google sign in hop, no page of its own | First run | Sign in with your work email | Changes |\n| S7 | Sign in failed, redirect | First run | Sign in did not work | Changes |\n| S8 | Workspace refusal Sign in with your company Google Workspace account | First run | Sign in with your work email | Changes |\n| S9 | Read refusal, signed out | First run | Sign in with your work email | Changes |\n| S10 | Read refusal, wrong email | First run | This store is for its own team | Changes |\n| S11 | Team only data refusal This brand’s plays and read are for its team. Ask them to invite you. Or Sign in to… | First run | This store is for its own team | Changes |\n| S17 | Invite landing, four states | First run | Join the brand | Changes |\n| S22 | Closed store gate This store isn’t open yet | First run | This store is not open yet | Changes |\n| S42 | Shopify embedded home | First run | Paste your store, Shopify entry | Changes |\n| S43 | Shopify outside the admin the product for Shopify | First run | Open it from Shopify | Changes |\n| S44 | New tab hop Opens in a new tab | First run | Continue in a new tab | Changes |\n| S45 | Hop expired Link expired | First run | This link no longer works | Changes |\n| S46 | Shopify install errors This install link expired. Install the product again from Shopify. | First run | Install again from Shopify | Changes |\n| S47 | Renew page Opening the product… | First run | Opening your store | Changes |\n| S62 | Email me signup on the wait screen | First run | Email me when it is ready | Changes |\n| S83 | Brand seed for outsiders: name, mark and look only, no cards | First run |  | Changes |\n| P12 | Claim a brand | First run | Claim your store | Changes |\n| P92 | Five questions during the read | First run | Three quick questions | Changes |\n| P93 | Brand taps confirm: picks post to the check, toast with notes or Could not save what you picked. | First run | First run, save picks | Changes |\n| P98 | Shopify embed helpers | First run | Shopify entry | Changes |\n\n### Today\n\n| Id | Today | Goes to | Tomorrow's name | Tag |\n|---|---|---|---|---|\n| A22 | Desktop rail: home mark Home: your feed | Today | Today, Work, Your store, your picture | Changes |\n| A23 | Top bar | Today | Top bar: brand mark, character corner, your picture | Changes |\n| A25 | Phone tab bar Feed | Today | Tab bar: Today, Work, Your store | Changes |\n| A26 | Feed home: day and date | Today | Today | Changes |\n| A27 | Greeting tiles Need your yes · Calls only you can make | Today | Need your yes | Changes |\n| A28 | Queue page: tabs, guided Call 1 of N | Today | Need your yes | Changes |\n| A29 | Story rings the brand today, recap | Today | Story rings | Changes |\n| A30 | Story viewer | Today | Story viewer | Changes |\n| A31 | Feed card: head with agent face, agent name, time, campaign, rank reason | Today | Pick card, closed | Changes |\n| A38 | Plays writing card New cards land here as each play is written | Today | Character wait slot on Today | Changes |\n| A41 | Today stop That’s today’s 10 | Today | This week’s picks, See everything | Changes |\n| A42 | Feed end You’re done for today | Today | You’re caught up | Changes |\n| A44 | Card icons: heart More like this, hand Jam with the team, shield N proofs, refresh Another take · Free… | Today | Heart and Not for me icons | Changes |\n| A53 | Refresh toasts Pulled in the latest. New cards land at the top as your agents finish. | Today | Today, refresh | Changes |\n| A55 | Signals column guide Signals tells you which customers to reach today. | Today | Email and WhatsApp picks | Changes |\n| A60 | Notifications panel Notifications | Today | Need your yes, and notifications that open the thing | Changes |\n| A115 | Decision card slot the product pick | Today | Need your yes | Changes |\n| A125 | Boot screen Opening the product with the loader mark | Today | Opening, character wait pose | Changes |\n| S2 | Brand page shell, title the brand · the product | Today | Today, with Work, Your store and Settings tabs | Changes |\n| S14 | Server error, JSON server | Today | Something went wrong | Changes |\n| S41 | Recap story ring slides, chips Since you were last here | Today | Story rings, Since you were here | Changes |\n| P96 | Button loader on every wait | Today | Spinner inside the button | Changes |\n| P99 | Offline page | Today | You’re offline | Changes |\n| P103 | Broken picture fallback: retry, fallback list, empty media surface | Today | Media slot, empty | Changes |\n\n### Inside a pick and Make it\n\n| Id | Today | Goes to | Tomorrow's name | Tag |\n|---|---|---|---|---|\n| A43 | Card ··· menu Save for later or Remove from Saved | Inside a pick | Heart, Not for me, Later, Hand it off | Changes |\n| A45 | Proof sheet Why the product suggests this | Inside a pick | Why this | Changes |\n| A46 | Rank reason Why you’re seeing this | Inside a pick | Why this | Changes |\n| A50 | Margin notes in the right gutter, one per two or three cards, with arrows | Inside a pick | Why this | Changes |\n| A81 | Play page | Inside a pick | Why this, with its plan | Changes |\n| A96 | Rival ad read What the product read from a rival’s ad | Inside a pick | Why this | Changes |\n| A98 | Impact projection Projected impact | Inside a pick | Why this, To confirm | Changes |\n| A123 | Tooltips Why the product suggests this hover, info tips | Inside a pick |  | Changes |\n| S34 | Play PDF, lockup the product, cover title in capitals | Inside a pick | Why this, the plan as a PDF | Changes |\n| S35 | PDF refusals These plays are for the brand’s team. Sign in or ask them to invite you. And The PDF could not… | Inside a pick | This plan is for the team | Changes |\n| S39 | Card page data | Inside a pick | Why this, the plan | Changes |\n| P28 | Case opener | Inside a pick | Why this, The plan | Changes |\n| P33 | Play sheet from source chips | Inside a pick | Why this, with its plan | Changes |\n| A6 | Guest arrival toasts You’re in this jam as a guest. You can chat, edit the brief and make drafts. | Make it | Make it, as a guest | Changes |\n| A51 | Pause and cap notices the product’s writing is paused for a while. Everything here still opens; new replies,… | Make it | Cap reached | Changes |\n| A84 | Studio: header Back, action title … on the place | Make it | Make it | Changes |\n| A85 | Studio step bar Draft · Make · Send | Make it | Bottom bar | Changes |\n| A86 | Studio ship bar, about twelve states | Make it | Bottom bar | Changes |\n| A87 | Studio overflow More ways to share | Make it | More menu | Changes |\n| A89 | Options strip One more · A different angle | Make it | Versions, New version | Changes |\n| A90 | Chat tab What should change? Each change makes a new version, and you can always go back., chips Redo it | Make it | Chat | Changes |\n| A91 | Adjust tab Turn a knob and the package is rewritten to match. | Make it | Set up | Changes |\n| A92 | Details tab Hand it to the team · The brief opens on the stage: check it, then download or send the PDF. | Make it | Details | Changes |\n| A93 | Versions menu and timeline Tap a version to switch to it. Your next change builds from there; nothing is lost. | Make it | Versions | Changes |\n| A95 | Photo picker sheet Change the photo or Choose a photo | Make it | Pick a photo | Changes |\n| A97 | References sheet View references | Make it | References | Changes |\n| A104 | Jam share sheet Jam with your team | Make it | Invite to this | Changes |\n| A106 | Opening the jam overlay Opening the jam… | Make it | Opening | Changes |\n| A108 | Batch page Pick your N ads | Make it | Make it, a set | Changes |\n| A109 | Assets viewer full screen, title | Make it | Viewer | Changes |\n| A113 | Ask and assign sheet Ask someone… | Make it | Ask for a yes | Changes |\n| A118 | Draft mock frames: Instagram, Facebook, X thread Characters in this post, Reddit Vote | Make it | The thing, preview frame | Changes |\n| A124 | Pick thinking line Checking it against the facts, the product and what this change is meant to be | Make it | Long wait line | Changes |\n| S12 | Make refusal Sign in with your work email at the company domain, or ask the owner for an invite. And Only… | Make it | Ask the owner for an invite | Changes |\n| S27 | Guest jam join, API only, refusal This link has expired. | Make it | Make it, as a guest | Changes |\n| S56 | Slack proposals Ready to make a 6-second vertical video… It uses today’s video allowance. | Make it | Make it, from Slack | Changes |\n| S81 | Voice note errors Too many voice notes this hour. Type it for now. | Make it | Talk instead of type | Changes |\n| P21 | Jam pane overflow | Make it | Make it, more menu | Changes |\n| P22 | Paste a chat back | Make it | Paste a chat | Changes |\n| P23 | Slack thread note | Make it | Slack thread note | Changes |\n| P26 | Brief tab | Make it | Make it, brief view | Changes |\n| P27 | Drafts list | Make it | The thing, New version, Versions | Changes |\n| P29 | Open questions | Make it | Open questions | Changes |\n| P30 | Assign popover and crew pill | Make it | Assign | Changes |\n| P31 | Proposal in chat | Make it | Confirm a paid make | Changes |\n| P34 | Add to brief selection button | Make it | Add to brief | Changes |\n| P37 | Mention list and slash commands: @ people list; / | Make it | Mention, commands | Changes |\n| P38 | Chat states and toasts | Make it | Chat states | Changes |\n| P52 | The product Studio set up in the v1 studio: slots each with a why | Make it | Make it, set up | Changes |\n| P53 | Free first look | Make it | First look | Changes |\n| P54 | Making wait | Make it | Making, long wait | Changes |\n| P55 | Batch strip | Make it | Versions | Changes |\n| P56 | Set editing | Make it | New version of a slide | Changes |\n| P57 | Adjust tab | Make it | Set up | Changes |\n| P58 | Listing images and Amazon A+ mode | Make it | Make it, listing set | Changes |\n| P59 | Make the final sheet | Make it | Confirm a paid make | Changes |\n| P60 | Film board | Make it | Film board | Changes |\n| P61 | Teleprompter | Make it | Teleprompter | Changes |\n| P62 | Catch the beans game | Make it | Long wait game | New |\n| P84 | Canvas jam left side: Instagram ad mock Sponsored | Make it | The thing | Changes |\n| P85 | Canvas turns: versions dots, knobs | Make it | New version, Versions | Changes |\n| P88 | Composer add menu | Make it | Add to this | Changes |\n| P94 | Copy and open buttons | Make it | Copy and open the place | Changes |\n| P95 | Talk instead of typing: mic on every box | Make it | Talk | Changes |\n| P104 | Product photo and reference pickers inside finals | Make it | Pick photos | Changes |\n\n### Hand it off and the Brief page\n\n| Id | Today | Goes to | Tomorrow's name | Tag |\n|---|---|---|---|---|\n| A47 | Slack share sheet Share to Slack or Post to Slack | Hand it off | Hand it off, Your team, in Slack | Changes |\n| A88 | Hand off states on the ship bar Brief ready to paste with Send again | Hand it off | Handed off | Changes |\n| A94 | Downloads and publish panel Download this version’s files as one zip | Hand it off | The files | Changes |\n| A99 | File packs Get the Ads Manager files | Hand it off | The files | Changes |\n| A100 | Team brief on the stage: switch Creative and Brief | Hand it off | The brief, preview | Changes |\n| A101 | Brief comments Select any words in the brief to comment. AI fixes them for you. | Hand it off | Edit the brief | Changes |\n| A102 | Send the brief sheet Send the brief | Hand it off | Your agency or freelancer | Changes |\n| A103 | Brief in Details The brief | Hand it off | The brief | Changes |\n| A105 | WhatsApp isn’t connected sheet | Hand it off | Your team, on WhatsApp | Changes |\n| S28 | Pasted brief text | Hand it off | Copied brief | Changes |\n| S29 | Jam brief document, markdown sections The plan | Hand it off | The brief | Changes |\n| S30 | Team brief, PDF heading A brief for the team that makes it, sections What to make | Hand it off | The brief | Changes |\n| S54 | Slack jam post: card text, buttons Approve and Open in the product, context Reply in this thread: replies… | Hand it off | Hand it off to your team, in Slack | Changes |\n| S55 | Slack thread mirrors *someone* in the product: the text | Hand it off | Updates in your Slack thread | Changes |\n| S57 | Slack approve result Approved by someone · Open in the product, and replies to the presser only | Hand it off | Approve, in Slack | Changes |\n| S59 | Card share to Slack, server post route; client sheet Post to a channel | Hand it off | Hand it off to your team | Changes |\n| P17 | Share the brief chooser | Hand it off | Hand it off, Who is shipping this | Changes |\n| P18 | Missing info sheet | Hand it off | Hand it off, still missing | Changes |\n| P19 | Share toasts | Hand it off | Handed off toast | Changes |\n| P24 | Ship strip in the pane | Hand it off | Bottom bar: Hand it off | Changes |\n| P25 | Send to menu | Hand it off | Hand it off, copy link | Changes |\n| P32 | Brief viewer sheet | Hand it off | Brief preview | Changes |\n| P35 | WhatsApp route: sheet Send it for approval | Hand it off | Hand it off, your own chat | Changes |\n| S24 | Read only brief page, title the title · Brief, header the brand × the product · Brief · · shared a date,… | Brief page | The brief | Changes |\n| S25 | Old brief link without full, 302 into the jam | Brief page | The brief | Changes |\n| S26 | Brief link errors This handoff link is not valid. And This jam uses the team’s own account numbers, so only… | Brief page | This link no longer works | Changes |\n\n### Work\n\n| Id | Today | Goes to | Tomorrow's name | Tag |\n|---|---|---|---|---|\n| A24 | Round button Jam with the team | Work | Start something new | Changes |\n| A35 | Team card Live from your workspace | Work | In the works | Changes |\n| A54 | Deck: columns Signals | Work | Today filtered by area | Changes |\n| A57 | Dashboard sheet What your team is working on | Work | Work | Changes |\n| A59 | Work board, also | Work | Work: Ideas, In the works, Handed off | Changes |\n| A61 | With our team popover the product’s build crew: briefs you sent and where each one is, rows with status | Work | Handed off | Changes |\n| A70 | Library, Saved Library, tabs Saved | Work | Work, Ideas | Changes |\n| A71 | Library, Jams, alias | Work | Work | Changes |\n| A72 | Library menu Restore | Work | Work row menu | Changes |\n| A116 | New jam What do you want made? New jam | Work | Start something new | Changes |\n| A117 | Bundle jam N plans · one brief | Work | Start something new, from hearted picks | Changes |\n| P36 | Shortcut jams | Work | Start something new | Changes |\n| P86 | Canvas still in tiles | Work | Work row preview | Changes |\n\n### Your store\n\n| Id | Today | Goes to | Tomorrow's name | Tag |\n|---|---|---|---|---|\n| A33 | Store health card Store health, rings Creative | Your store | What changed, store health | Changes |\n| A34 | AI answers card and sheet Who AI names when shoppers ask | Your store | What AI search says | Changes |\n| A76 | Heard What we heard | Your store | What customers say | Changes |\n| A77 | Rivals All, one tab per rival | Your store | What rivals run | Changes |\n| A78 | Products Products N | Your store | Your products | Changes |\n| S40 | Watch view data: four blocks What people say | Your store | Your store | Changes |\n| P73 | Products deep page | Your store | Your products | Changes |\n| P78 | Watch page top | Your store | Your store | Changes |\n| P79 | What people say | Your store | What customers say | Changes |\n| P80 | Where you sell | Your store | Where you sell | Changes |\n| P81 | What rivals do | Your store | What rivals run | Changes |\n| P82 | How you show up | Your store | What AI search says | Changes |\n| P83 | Watch errors and foot | Your store | Your store, could not read | Changes |\n\n### Settings\n\n| Id | Today | Goes to | Tomorrow's name | Tag |\n|---|---|---|---|---|\n| A12 | Check page Is this right?: timer line the product starts your brief at a time with what it read, unless you… | Settings | What we know about you, Check what we read | Changes |\n| A17 | Setup step Connect your tools | Settings | Connections | Changes |\n| A18 | Setup step Invite your team | Settings | Team | Changes |\n| A37 | Connect card Needs access | Settings | Connections | Changes |\n| A39 | Check wait card Waiting for you · a time ago | Settings | What we know about you, Check what we read | Changes |\n| A48 | Add to home screen sheet Add the brand to your home screen, steps per phone | Settings | Add to home screen | Changes |\n| A52 | Learned toasts Learned: the text with See it, stacked 2.6 seconds apart | Settings | What we know about you | Changes |\n| A62 | Viewing as popover Viewing as | Settings | Which of these do you handle | Changes |\n| A63 | Account menu rows Library | Settings | Settings, behind your picture | Changes |\n| A64 | Start again Clears what this browser kept for this feed and goes back to the first page., demo Reset the… | Settings | Start again | Changes |\n| A68 | Connect sheet Connect the tool | Settings | Connect a tool | Changes |\n| A69 | Connectors page Connect your accounts | Settings | Connections | Changes |\n| A73 | References | Settings | What we know about you, your pictures | Changes |\n| A74 | What the product learned | Settings | What we know about you | Changes |\n| A75 | Drop anything flow: drop zone, sheet Where should this go? | Settings | What we know about you, Tell us something | Changes |\n| A82 | Fact sheet Every number and name the product may quote for the brand, and where it came from. | Settings | What we know about you, facts | Changes |\n| A83 | Your feed | Settings | Which of these do you handle | Changes |\n| S4 | Privacy page Privacy, tag Preview policy · 19 October 2026, sections What the product reads | Settings | Privacy | Changes |\n| S5 | Terms page Terms, tag Preview terms, sections Use it on your own store | Settings | Terms | Changes |\n| S15 | Sign out | Settings | Sign out | Changes |\n| S20 | Team API messages Only the team sees the team. | Settings | Team | Changes |\n| S23 | Email settings page, six states | Settings | Email settings | Changes |\n| S36 | Public brand book page, title the brand brand book, meta voice, words, look, colours, type and its own best… | Settings | What we know about you, shared page | Changes |\n| S37 | Brand book for AI tools | Settings | What we know about you, for AI tools | Changes |\n| S38 | Brand kit zip and brand book PDF, error The PDF couldn’t be made just now. Try again in a minute. | Settings | What we know about you, download | Changes |\n| S48 | Shopify uninstall and redact webhooks, disconnect Shopify | Settings | Connections | Changes |\n| S49 | Connect start and callback, errors passed back in the hash as | Settings | Connections, connect a tool | Changes |\n| S50 | Connector API messages Sign in with Google first. | Settings | Connections | Changes |\n| S51 | Disconnect, and protected refusal This brand’s connections are protected while it is live with a client. Ask… | Settings | Connections, disconnect | Changes |\n| S82 | Delete account, no server route; Privacy says email hello@ from your work email | Settings | Delete my data | Changes |\n| P1 | Connect sheet | Settings | Connect the tool | Changes |\n| P2 | Connect gates | Settings | Connect the tool, signed out state | Changes |\n| P3 | Guided key steps | Settings | Connect the tool, key steps | Changes |\n| P5 | Connecting state | Settings | Connecting | Changes |\n| P6 | Connected result | Settings | Connected | Changes |\n| P7 | Account picker | Settings | Pick the account | Changes |\n| P8 | Return from a platform sign in: long toast with the platform error, reopen the sheet | Settings | Connect flow, return step | Changes |\n| P9 | Disconnect sheet | Settings | Disconnect the tool | Changes |\n| P10 | Connector rows overlay | Settings | Connections | Changes |\n| P11 | Sign in prompt on connectors | Settings | Connections, signed out | Changes |\n| P13 | Account menu popover | Settings | Settings, behind your picture | Changes |\n| P14 | Team and access sheet | Settings | Team | Changes |\n| P15 | Person menu in team | Settings | Team, person menu | Changes |\n| P16 | Delete my data sheet | Settings | Delete my data | Changes |\n| P63 | Brand Book in the app, chapters Story | Settings | What we know about you | Changes |\n| P65 | Edit in place | Settings | Edit a fact | Changes |\n| P66 | Selection bar | Settings | Change with AI | Changes |\n| P67 | Book composer dock | Settings | Tell us something | Changes |\n| P68 | Change cards | Settings | Suggested change | Changes |\n| P69 | Drop zone | Settings | Drop a file | Changes |\n| P70 | Font kit | Settings | Fonts | Changes |\n| P71 | Rules | Settings | Rules, in What we know about you | Changes |\n| P72 | Where it applies menu | Settings | Where it applies | Changes |\n| P74 | Product photos add | Settings | Product photos | Changes |\n| P75 | Share the brand book sheet | Settings | Share what we know | Changes |\n| P76 | Chapter pager | Settings | Chapters | Changes |\n| P77 | Book waits and errors | Settings | What we know about you, loading | Changes |\n| P90 | Memory popover | Settings | What we know about you | Changes |\n| P91 | Connectors popover | Settings | Connections | Changes |\n| P100 | Install manifest: name the product Feed, short the product | Settings | Add to home screen | Changes |\n\n### Emails and notifications\n\n| Id | Today | Goes to | Tomorrow's name | Tag |\n|---|---|---|---|---|\n| S18 | Company domain auto join, then email someone joined the brand on the product | Email or notification | Someone joined your team | Changes |\n| S19 | Invite email someone invited you to the brand on the product | Email or notification | You're invited to the brand | Changes |\n| S21 | Admin change emails You're now the admin of the brand on the product | Email or notification | You are now an admin | Changes |\n| S53 | Connector sign in expiry email the brand: the the tool sign-in runs out on a day and the brand: the the tool… | Email or notification | Reconnect the tool | Changes |\n| S58 | Slack weekly post *This week in the product for the brand*, lines • N plays rewritten | Email or notification | This week, in Slack | Changes |\n| S60 | Weekly digest email, subject the parts for the brand this week or What people said about the brand this… | Email or notification | Monday, your five picks | Changes |\n| S61 | Plays ready emails | Email or notification | Your picks are ready | Changes |\n| S63 | Check reminder emails the brand is waiting for you to check what the product read then Still waiting: check… | Email or notification | What we know about you, optional | Changes |\n| S64 | Feed reminder emails Open your feed to start the brand’s plays then Still waiting: …, button Open my feed | Email or notification | Your picks are waiting | Changes |\n| S65 | Jam emails now | Email or notification | Need your yes, and mentions | Changes |\n| S66 | Jam replies batch email someone and someone in the title, button Open the jam | Email or notification | New replies on the title | Changes |\n| S67 | Jam email footer You’re getting this because you’re in this jam. | Email or notification | Email footer | Changes |\n| S71 | Brief status email to the sender Your brief the title is received | Email or notification | Handed off: where it is | Changes |\n| S72 | In app notifications from the server | Email or notification | Notifications | Changes |\n\n### Staff, demo, unlinked and later\n\n| Id | Today | Goes to | Tomorrow's name | Tag |\n|---|---|---|---|---|\n| A66 | Demo controls sheet two For whoever is presenting. Changes apply instantly and skip the connect sheets. | Staff only |  | Changes |\n| A80 | Plays Build tab All N plays are written | Staff only |  | Changes |\n| A120 | Storefront switch shows the hidden Storefront agent, area and seat | Staff only |  | Changes |\n| S68 | Our team tagged email the brand: someone tagged our team on the title, buttons Join the jam and Read the… | Staff only |  | Changes |\n| S69 | Brief sent email · New brief from the brand | Staff only |  | Changes |\n| S70 | Brief status mover, staff only, errors This brief was not sent to our team. | Staff only |  | Changes |\n| S74 | Ops alert email the product alert: the title, titles Vertex is refusing calls on billing | Staff only |  | Changes |\n| S75 | Sloosh connect for staff, callback lands | Staff only |  | Changes |\n| S76 | Admin data routes visitors, sources, treg, sessions, ops busy, listen | Staff only |  | Changes |\n| P89 | Model popover | Staff only |  | Changes |\n| P102 | Demo admin | Staff only |  | Changes |\n| A2 | Landing demo tiles See it run on a real brand | Demo only | Demo stores | Changes |\n| A65 | Demo controls sheet one Demo controls | Demo only | Demo controls | Changes |\n| A67 | Demo pill Demo | Demo only |  | Changes |\n| S73 | Simulated teammate reply, chat line marked dummy, notification Simulated reply from someone | Demo only |  | Changes |\n| S77 | Demo site picker Know what to do next. | Demo only | Demo stores | Changes |\n| S78 | Tour starter Opening the brand… | Demo only |  | Changes |\n| S79 | Demo refusals and notes Pick a brand from the list. New brands are prepared by the the product team before a… | Demo only |  | Changes |\n| S80 | Demo replayed build states Read | Demo only | Reading your store | Changes |\n| P4 | Simulated connect sheet | Demo only | Connect the tool, sample | Changes |\n| A13 | Wait screen Figuring out the best plays for the brand, steps Read your site | Unlinked but kept in code |  | Goes |\n| A14 | Onboarding side preview Your feed, as a a seat | Unlinked but kept in code |  | Goes |\n| A15 | Setup step Who’s this feed for? | Unlinked but kept in code | Which of these do you handle | Goes |\n| A16 | Setup step What should come first? or Anything the product should know? | Unlinked but kept in code | What we know about you, Tell us something | Goes |\n| A19 | Setup frame: step list Your role | Unlinked but kept in code |  | Goes |\n| A20 | Ready overlay Your feed is ready, someone. Or Your cards are on their way, someone., counts of cards,… | Unlinked but kept in code |  | Goes |\n| A21 | Swipe tuner Tune your feed · 1 of 10 | Unlinked but kept in code |  | Goes |\n| A32 | Welcome card Welcome | Unlinked but kept in code |  | Goes |\n| A36 | Deck promo card See everything side by side. | Unlinked but kept in code |  | Goes |\n| A49 | Logo stickers in the left gutter, the brand mark and the product mark, peel on hover | Unlinked but kept in code |  | Goes |\n| A56 | Tune the deck sheet Tune the deck | Unlinked but kept in code |  | Goes |\n| A79 | Plays list: tabs Plays | Unlinked but kept in code |  | Goes |\n| A107 | Options page What should this card become? | Unlinked but kept in code |  | Goes |\n| A110 | Card page, desktop side drawer or full page: steps Draft · Review · Ready · Brief shared | Unlinked but kept in code | Inside a pick | Goes |\n| A112 | Version picker Tap a version to pick it | Unlinked but kept in code |  | Goes |\n| A114 | Card page conversation Conversation · studio and jam | Unlinked but kept in code | Make it, chat | Goes |\n| A119 | Jam v2 switch inside | Unlinked but kept in code |  | Goes |\n| S13 | Cross site refusal This change has to come from the product itself. | Unlinked but kept in code | Something went wrong | Goes |\n| S16 | Old approve page Access is by invite now | Unlinked but kept in code |  | Goes |\n| S31 | Ready to post page, title Ready to post: the title | Unlinked but kept in code |  | Goes |\n| S32 | Jam v2 brief page | Unlinked but kept in code |  | Goes |\n| S33 | Dead v2 link This link is not valid any more. | Unlinked but kept in code | This link no longer works | Goes |\n| P20 | Jam pane on the card page: tabs Chat | Unlinked but kept in code | Folds into Make it | Goes |\n| P39 | Jam v2 page | Unlinked but kept in code |  | Goes |\n| P40 | Jam v2 spark | Unlinked but kept in code | Why this | Goes |\n| P41 | Jam v2 part toolbar | Unlinked but kept in code |  | Goes |\n| P42 | Add a piece popover | Unlinked but kept in code |  | Goes |\n| P43 | Piece mode | Unlinked but kept in code | Hand it off | Goes |\n| P44 | V2 Studio composer overlay: style gallery More styles | Unlinked but kept in code | Make it, set up | Goes |\n| P45 | V2 Brand Book sheet | Unlinked but kept in code | What we know about you | Goes |\n| P46 | Finish sheet: checks per piece | Unlinked but kept in code | Hand it off | Goes |\n| P47 | Whose OK popover | Unlinked but kept in code |  | Goes |\n| P48 | V2 history pill | Unlinked but kept in code | Versions, New version | Goes |\n| P49 | Drop anything row | Unlinked but kept in code | What we know about you, add | Goes |\n| P50 | V2 boards: video timeline Voice | Unlinked but kept in code |  | Goes |\n| P51 | V2 toasts: own toast with Close, draw error Something on this page didn’t draw… | Unlinked but kept in code |  | Goes |\n| A40 | Pro carousel at the end of a free day | Later |  | New |\n| A58 | Pro plan sheet Free | Later |  | New |\n| A111 | Card page measure block Check on day N | Later | How it went | New |\n| S52 | Marketplaces Marketplaces are coming soon. | Later |  | New |\n| P87 | Live pill | Later | Live | New |\n\n### Components\n\n| Id | Today | Becomes | Tag |\n|---|---|---|---|\n| C1 | Feed card shell | Pick card, closed | Changes |\n| C2 | Card slot kinds, decision, AI answer, variants, facts | Asset slot of the pick card: the draft, one product picture, or one big number with its source chip | Changes |\n| C3 | Card kinds by data | One pick card with an area tag: Social posts, Ads, Website, AI search, Email and WhatsApp | Changes |\n| C4 | System cards in the feed: welcome, store health, team card, deck promo, connect card, plays writing card,… | Character slots on Today: wait, empty, caught up; Your store blocks; Work | Goes |\n| C5 | Card head: agent face, agent name, time, campaign line, rank reason | Area and source line | Changes |\n| C6 | Media slot with carousel; draft slot; dead media, asset fallback | Asset slot | Changes |\n| C7 | Draft and platform preview frames: 21 classes post mocks, 14 ad sheet mocks, thread and Reddit mocks,… | Preview frame with a channel skin | Changes |\n| C8 | Chips used 50 times in selectors | Chip, for choices and filters | Changes |\n| C9 | Tags and badges: 15 selectors | Tag: area, status, To confirm, Sample, Dummy | Changes |\n| C10 | Make chip with format and pieces | Where to post, inside the open pick | Changes |\n| C11 | Source line, source chips | Source chip | Changes |\n| C12 | Need and connect lines Connect the tool to see this, AI answers line, told tag From what your team told the… | One connect line inside the pick that needs it | Changes |\n| C13 | Status chips: card status row, Work tile badges, faces, connector, v2, brief viewer, finals, rule, shelf,… | Status chip | Changes |\n| C14 | Story rings | Story ring | Changes |\n| C15 | Story viewer and 31 more classes, progress bars, slide kinds: rival ad, trend chart, news, how to, recap,… | Story viewer | Changes |\n| C16 | Health rings | Store health meter in Your store | Changes |\n| C17 | Tiles: greeting tiles, Learned tiles 8 classes, work tiles, batch, reference, demo, play tiles, Library tiles | Tile, one grid tile | Changes |\n| C18 | List rows: queue 19, notification 14, Heard 37, fact 30, lesson and rule 64, connector 22, team 28 7,… | Row | Changes |\n| C19 | Need your yes rows: greeting tiles, queue guided call, decision slot, Work lane Needs you, notification… | Need your yes row: a yes or no question with Yes and Not now | Changes |\n| C20 | Action bars: card main bar, studio ship bar 11 classes, step bar, card page band, jam pane ship strip,… | Bottom bar with one main button: Make it on a pick, Hand it off in Make it | Changes |\n| C21 | Buttons: 163 leading button classes counted on every link. Main action alone, lit rim. Sizes | Button set: main, quiet, link, icon | Changes |\n| C22 | Back buttons, labels Back | Back | Changes |\n| C23 | Icon buttons used 31 times in selectors, card icons heart, hand, shield, refresh, bookmark | Icon button | Changes |\n| C24 | Icon set: lucide line icons, agent SVGs, and glyphs used as icons a star glyph a sparkle glyph an asterisk… | One icon set | Goes |\n| C25 | Sheets | One sheet: slides up, title, one main button, Close | Changes |\n| C26 | Popovers and menus: card menu, panel | One menu | Changes |\n| C27 | Side drawer for the card page, 55 and 42 selector uses, also opens as a full page |  | Goes |\n| C28 | Full screen overlays: ready overlay, questions, story viewer, assets viewer, teleprompter, game, boot screen | Story viewer, teleprompter and viewer stay; the rest go | Goes |\n| C29 | Toasts, stacked Learned toasts, with Close, book undo card; 317 toast calls and 8 long toasts | Toast: one line, three seconds, one at a time, Undo when reversible | Changes |\n| C30 | Loaders: element used 92 times, span 93 times, 7 placements, skeleton 23 times, 6, 10, text swaps 18,… | Two: spinner inside the button for short waits, the character wait pose with one line for long waits | Changes |\n| C31 | Loader mark: the custom element, the b mark that spins, and the boot line Opening the product | Spinner inside the button; the boot screen uses the character wait pose | Changes |\n| C32 | Empty states; 18 more defined in CSS only | Empty state: the character, one line, one button | Changes |\n| C33 | Error states shown in the empty style | Error state: plain sentence of what happened, one way out, the character error pose | Changes |\n| C34 | Fields: paste field, check fields, fact fields, invite chips, topic add, teach a rule, search, connect key… | Field, and the paste field | Changes |\n| C35 | Toggles: sounds switch, updates, lesson and rule, segmented | Toggle, and a segmented choice | Changes |\n| C36 | In page tabs: Library tabs, queue tabs, rival tabs, plays tabs, stage switch Creative and Brief, studio… | Tabs | Changes |\n| C37 | Navigation: desktop rail 20 selectors, phone tab bar 16, top bar 30, phone titles, the floating round button | Three tabs, Today, Work, Your store, the same on phone and desktop; top bar with brand mark, character corner and your… | Goes |\n| C38 | Avatars, agent faces, coloured initials, presence cursor | Avatar: photo or initials, a here now dot | Changes |\n| C39 | Agent shapes: with the five agent shapes and colours, area classes, agent names Creative director | Area tag dot only, never a character | Goes |\n| C40 | Progress bars: queue, plays writing bar, AI answers bars, story viewer bars | Progress bar | Changes |\n| C41 | Steppers: card page, setup step list, reading rail steps | Stepper, used only on Reading your store and the connect key steps | Changes |\n| C42 | Version history: studio History menu, compare list, options strip, card page version picker, canvas dots | Versions strip with New version | Changes |\n| C43 | Chat: studio chat, card page thread, jam pane bubbles, AI answers chat | Chat bubble: you, AI, teammate, system | Changes |\n| C44 | Composers: studio box, composer bar, jam pane, book dock, Learned drop zone, check page voice box, mic button | Composer: box, add, talk, send | Changes |\n| C45 | Composer menus: add menu, model popover with vendor names, memory popover, connectors popover, mentions,… | Add menu and mention list; model choice is Staff only | Changes |\n| C46 | Brief document blocks: team brief 23, jam brief board 42, inline brief 13, details 10, card page plan,… | Brief page blocks: numbered sections, plan steps under 10 words | Changes |\n| C47 | Tables: play tables, rows, canvas play table, book facts, Ads Manager change table | Table | Changes |\n| C48 | Charts: AI answers bars 16, AI questions 10, sparkline, story trend chart, health ring SVG, measure chart… | Bar list and sparkline in Your store; the measure chart is Later | Goes |\n| C49 | Sounds: on unless switched off, 8 synthesized cues, 29 recorded cues, about 14 cue names called by the app,… | One sound toggle in Settings, off on a first visit, every cue short | Changes |\n| C50 | Margin notes in the right gutter | A line inside Why this in the open pick | Changes |\n| C51 | Logo stickers |  | Goes |\n| C52 | Theme toggle | A Settings row | Changes |\n| C53 | Tooltips, title attributes as content | None: what a tooltip says moves into Why this | Goes |\n| C54 | Proof blocks 21: proof rows, basis, connector chips | Why this rows in the open pick | Changes |\n| C55 | Greeting 14 selectors | Today header with the character corner | Changes |\n| C56 | Deck columns 32, column menu, Signals guide | Work board columns | Changes |\n| C57 | Work board lanes and AI lane | Work board | Changes |\n| C58 | Reading screen parts: reading rail steps, finding cards, agent roster, questions bar, read done bar | Reading your store: stepper, one finding at a time, character wait pose | Goes |\n| C59 | Question tiles 42 8, seat tiles, want pills | Question tiles for the three questions | Changes |\n| C60 | Check and fact rows 28, 30 | What we know about you rows | Changes |\n| C61 | Learned and memory rows 64, drop zone 27, 7 | What we know about you rows and Tell us something | Changes |\n| C62 | Play reader 35 23, play list 29, updates 19, build 13 7, play sheet 25 | The plan layer inside a pick, and a full plan page one tap away | Changes |\n| C63 | Your store blocks: watch page 57, Heard 37, rival trading cards, shelves, products, AI race | Your store rows: theme, count, mood chip; rival card with 3 stats | Changes |\n| C64 | Studio layout, 37, old remix families 33, 18, 12, 13, set up 32, v2 studio 99, canvas 62, jam pane 90 | Make it: the thing on the left, chat on the right, set up panel | Changes |\n| C65 | Card page 90, 37, 8, picker | Inside a pick: the draft, Why this, the plan, Where to post | Changes |\n| C66 | Paid confirm: finals sheet 15 12, creative stage price buttons, v2, price on first buttons Make it · $x | One paid confirm sheet with the price, never on the first button | Changes |\n| C67 | Connect sheets: 20 classes, 27 classes, connector rows 22 | One connect sheet and one Connections row | Changes |\n| C68 | Account and team: account menu 25, team 28, 7, invite 11, delete sheet | Settings rows: Team, Account | Changes |\n| C69 | Book blocks 176 classes: covers, chapters, lines with pen and undo, kit fans, voice, shelves, people, proof… | What we know about you document blocks | Changes |\n| C70 | Film board 18 and teleprompter 11 | Film board and teleprompter inside Make it | Changes |\n| C71 | Game Catch the beans | Long wait add on behind a switch | New |\n| C72 | Install nudge banner | A Settings row; the banner goes | Changes |\n| C73 | Demo pieces, two demo control sheets, demo picker page styles, tiles | Demo only | Changes |\n| C74 | Pro plan |  | New |\n| C75 | Measuring leftovers in view: 14, rows, notification kinds Live, Reading, Result, Learned What moved the number | None until How it went | Goes |\n| C76 | CSS never named in any script: 526 of 2,886 classes, about 18 percent, and 37 whole families |  | Goes |\n| C77 | Template and style galleries: v2 and the creative stage gallery, with searches Search styles | One gallery sheet inside Make it, set up | Changes |\n| C78 | Inline styled pages outside the kit: Shopify home, offline page, demo picker | The same tokens, buttons and error state as the app | Changes |\n\n[src: brand-directions/_shared/surface-map.md]",
  "How we do it": "Generated by `handbook/tools/gen.mjs` on every build. Change the source, never this file.",
  "Numbers": "Not applicable to a generated document: it is rewritten from its sources on every build.",
  "Open": "Not applicable to a generated document: it is rewritten from its sources on every build."
 }
}