---
id: '3.3'
title: Today to tomorrow
dept: design
status: generated
owner: Param
branded: false
last_verified: '2026-10-26'
sources:
  - brand-directions/_shared/surface-map.md
---

# Today to tomorrow

## Answer

Every one of today's 309 surfaces and 78 component families, and where it goes tomorrow.

## Today

| What | Today | Tomorrow | Note |
|---|---|---|---|
| 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. |
| 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. |
| Sheet styles | 23 | 1 | Through one helper but 23 class variants. Now one sheet, used by about eight sheets. |
| Button classes | 163 | 4 | Leading classes on every button, 13 of them for a main action. Now main, quiet, link and icon. |
| Empty state styles | 25 | 1 | Plus 18 more defined only in CSS. Now the character, one line, one button. Errors get their own. |
| Loader kinds | 12 | 2 | Spinners, skeletons, full screen holds, text swaps, a game. Now a spinner in the button and the character wait pose. |
| 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. |
| Popover and menu styles | 16 | 1 | Card menus, panels, pickers. Now one menu. |

## Tomorrow

### First run and access

| Id | Today | Goes to | Tomorrow's name | Tag |
|---|---|---|---|---|
| A1 | Landing: eyebrow Design partner preview | First run | Paste your store | Changes |
| 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 |
| A4 | Wrong account wall the brand is for the brand’s team | First run | This store is for its own team | Changes |
| A5 | Demo mode sheet You’re seeing the brand in demo mode | First run | This store is for its own team | Changes |
| A7 | Reading screen Reading the brand | First run | Reading your store | Changes |
| A8 | Questions offer bar the product keeps reading in the background. Five quick taps meanwhile, so your feed… | First run | Three quick questions | Changes |
| A9 | Questions full screen layer, label A few questions | First run | Three quick questions | Changes |
| A10 | Read done bar the brand is read. N sources, N findings. Your feed starts from these. | First run | Here’s your store | Changes |
| A11 | Read failed bar We couldn’t read the brand. | First run | We couldn’t read your store, Start again | Changes |
| A121 | Join arrival toast You’re on the brand’s team | First run | Welcome to the team | Changes |
| A122 | Sign in failed toast Google sign-in did not finish. Try again. | First run | Sign in did not work | Changes |
| S1 | Landing page shell, title the product, the paste screen is drawn by the client | First run | Paste your store | Changes |
| S3 | 404 page We couldn’t find that page | First run | Page not found | Changes |
| S6 | Google sign in hop, no page of its own | First run | Sign in with your work email | Changes |
| S7 | Sign in failed, redirect | First run | Sign in did not work | Changes |
| S8 | Workspace refusal Sign in with your company Google Workspace account | First run | Sign in with your work email | Changes |
| S9 | Read refusal, signed out | First run | Sign in with your work email | Changes |
| S10 | Read refusal, wrong email | First run | This store is for its own team | Changes |
| 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 |
| S17 | Invite landing, four states | First run | Join the brand | Changes |
| S22 | Closed store gate This store isn’t open yet | First run | This store is not open yet | Changes |
| S42 | Shopify embedded home | First run | Paste your store, Shopify entry | Changes |
| S43 | Shopify outside the admin the product for Shopify | First run | Open it from Shopify | Changes |
| S44 | New tab hop Opens in a new tab | First run | Continue in a new tab | Changes |
| S45 | Hop expired Link expired | First run | This link no longer works | Changes |
| S46 | Shopify install errors This install link expired. Install the product again from Shopify. | First run | Install again from Shopify | Changes |
| S47 | Renew page Opening the product… | First run | Opening your store | Changes |
| S62 | Email me signup on the wait screen | First run | Email me when it is ready | Changes |
| S83 | Brand seed for outsiders: name, mark and look only, no cards | First run |  | Changes |
| P12 | Claim a brand | First run | Claim your store | Changes |
| P92 | Five questions during the read | First run | Three quick questions | Changes |
| 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 |
| P98 | Shopify embed helpers | First run | Shopify entry | Changes |

### Today

| Id | Today | Goes to | Tomorrow's name | Tag |
|---|---|---|---|---|
| A22 | Desktop rail: home mark Home: your feed | Today | Today, Work, Your store, your picture | Changes |
| A23 | Top bar | Today | Top bar: brand mark, character corner, your picture | Changes |
| A25 | Phone tab bar Feed | Today | Tab bar: Today, Work, Your store | Changes |
| A26 | Feed home: day and date | Today | Today | Changes |
| A27 | Greeting tiles Need your yes · Calls only you can make | Today | Need your yes | Changes |
| A28 | Queue page: tabs, guided Call 1 of N | Today | Need your yes | Changes |
| A29 | Story rings the brand today, recap | Today | Story rings | Changes |
| A30 | Story viewer | Today | Story viewer | Changes |
| A31 | Feed card: head with agent face, agent name, time, campaign, rank reason | Today | Pick card, closed | Changes |
| A38 | Plays writing card New cards land here as each play is written | Today | Character wait slot on Today | Changes |
| A41 | Today stop That’s today’s 10 | Today | This week’s picks, See everything | Changes |
| A42 | Feed end You’re done for today | Today | You’re caught up | Changes |
| 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 |
| A53 | Refresh toasts Pulled in the latest. New cards land at the top as your agents finish. | Today | Today, refresh | Changes |
| A55 | Signals column guide Signals tells you which customers to reach today. | Today | Email and WhatsApp picks | Changes |
| A60 | Notifications panel Notifications | Today | Need your yes, and notifications that open the thing | Changes |
| A115 | Decision card slot the product pick | Today | Need your yes | Changes |
| A125 | Boot screen Opening the product with the loader mark | Today | Opening, character wait pose | Changes |
| S2 | Brand page shell, title the brand · the product | Today | Today, with Work, Your store and Settings tabs | Changes |
| S14 | Server error, JSON server | Today | Something went wrong | Changes |
| S41 | Recap story ring slides, chips Since you were last here | Today | Story rings, Since you were here | Changes |
| P96 | Button loader on every wait | Today | Spinner inside the button | Changes |
| P99 | Offline page | Today | You’re offline | Changes |
| P103 | Broken picture fallback: retry, fallback list, empty media surface | Today | Media slot, empty | Changes |

### Inside a pick and Make it

| Id | Today | Goes to | Tomorrow's name | Tag |
|---|---|---|---|---|
| A43 | Card ··· menu Save for later or Remove from Saved | Inside a pick | Heart, Not for me, Later, Hand it off | Changes |
| A45 | Proof sheet Why the product suggests this | Inside a pick | Why this | Changes |
| A46 | Rank reason Why you’re seeing this | Inside a pick | Why this | Changes |
| A50 | Margin notes in the right gutter, one per two or three cards, with arrows | Inside a pick | Why this | Changes |
| A81 | Play page | Inside a pick | Why this, with its plan | Changes |
| A96 | Rival ad read What the product read from a rival’s ad | Inside a pick | Why this | Changes |
| A98 | Impact projection Projected impact | Inside a pick | Why this, To confirm | Changes |
| A123 | Tooltips Why the product suggests this hover, info tips | Inside a pick |  | Changes |
| S34 | Play PDF, lockup the product, cover title in capitals | Inside a pick | Why this, the plan as a PDF | Changes |
| 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 |
| S39 | Card page data | Inside a pick | Why this, the plan | Changes |
| P28 | Case opener | Inside a pick | Why this, The plan | Changes |
| P33 | Play sheet from source chips | Inside a pick | Why this, with its plan | Changes |
| 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 |
| 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 |
| A84 | Studio: header Back, action title … on the place | Make it | Make it | Changes |
| A85 | Studio step bar Draft · Make · Send | Make it | Bottom bar | Changes |
| A86 | Studio ship bar, about twelve states | Make it | Bottom bar | Changes |
| A87 | Studio overflow More ways to share | Make it | More menu | Changes |
| A89 | Options strip One more · A different angle | Make it | Versions, New version | Changes |
| 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 |
| A91 | Adjust tab Turn a knob and the package is rewritten to match. | Make it | Set up | Changes |
| 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 |
| 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 |
| A95 | Photo picker sheet Change the photo or Choose a photo | Make it | Pick a photo | Changes |
| A97 | References sheet View references | Make it | References | Changes |
| A104 | Jam share sheet Jam with your team | Make it | Invite to this | Changes |
| A106 | Opening the jam overlay Opening the jam… | Make it | Opening | Changes |
| A108 | Batch page Pick your N ads | Make it | Make it, a set | Changes |
| A109 | Assets viewer full screen, title | Make it | Viewer | Changes |
| A113 | Ask and assign sheet Ask someone… | Make it | Ask for a yes | Changes |
| A118 | Draft mock frames: Instagram, Facebook, X thread Characters in this post, Reddit Vote | Make it | The thing, preview frame | Changes |
| 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 |
| 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 |
| S27 | Guest jam join, API only, refusal This link has expired. | Make it | Make it, as a guest | Changes |
| S56 | Slack proposals Ready to make a 6-second vertical video… It uses today’s video allowance. | Make it | Make it, from Slack | Changes |
| S81 | Voice note errors Too many voice notes this hour. Type it for now. | Make it | Talk instead of type | Changes |
| P21 | Jam pane overflow | Make it | Make it, more menu | Changes |
| P22 | Paste a chat back | Make it | Paste a chat | Changes |
| P23 | Slack thread note | Make it | Slack thread note | Changes |
| P26 | Brief tab | Make it | Make it, brief view | Changes |
| P27 | Drafts list | Make it | The thing, New version, Versions | Changes |
| P29 | Open questions | Make it | Open questions | Changes |
| P30 | Assign popover and crew pill | Make it | Assign | Changes |
| P31 | Proposal in chat | Make it | Confirm a paid make | Changes |
| P34 | Add to brief selection button | Make it | Add to brief | Changes |
| P37 | Mention list and slash commands: @ people list; / | Make it | Mention, commands | Changes |
| P38 | Chat states and toasts | Make it | Chat states | Changes |
| P52 | The product Studio set up in the v1 studio: slots each with a why | Make it | Make it, set up | Changes |
| P53 | Free first look | Make it | First look | Changes |
| P54 | Making wait | Make it | Making, long wait | Changes |
| P55 | Batch strip | Make it | Versions | Changes |
| P56 | Set editing | Make it | New version of a slide | Changes |
| P57 | Adjust tab | Make it | Set up | Changes |
| P58 | Listing images and Amazon A+ mode | Make it | Make it, listing set | Changes |
| P59 | Make the final sheet | Make it | Confirm a paid make | Changes |
| P60 | Film board | Make it | Film board | Changes |
| P61 | Teleprompter | Make it | Teleprompter | Changes |
| P62 | Catch the beans game | Make it | Long wait game | New |
| P84 | Canvas jam left side: Instagram ad mock Sponsored | Make it | The thing | Changes |
| P85 | Canvas turns: versions dots, knobs | Make it | New version, Versions | Changes |
| P88 | Composer add menu | Make it | Add to this | Changes |
| P94 | Copy and open buttons | Make it | Copy and open the place | Changes |
| P95 | Talk instead of typing: mic on every box | Make it | Talk | Changes |
| P104 | Product photo and reference pickers inside finals | Make it | Pick photos | Changes |

### Hand it off and the Brief page

| Id | Today | Goes to | Tomorrow's name | Tag |
|---|---|---|---|---|
| A47 | Slack share sheet Share to Slack or Post to Slack | Hand it off | Hand it off, Your team, in Slack | Changes |
| A88 | Hand off states on the ship bar Brief ready to paste with Send again | Hand it off | Handed off | Changes |
| A94 | Downloads and publish panel Download this version’s files as one zip | Hand it off | The files | Changes |
| A99 | File packs Get the Ads Manager files | Hand it off | The files | Changes |
| A100 | Team brief on the stage: switch Creative and Brief | Hand it off | The brief, preview | Changes |
| A101 | Brief comments Select any words in the brief to comment. AI fixes them for you. | Hand it off | Edit the brief | Changes |
| A102 | Send the brief sheet Send the brief | Hand it off | Your agency or freelancer | Changes |
| A103 | Brief in Details The brief | Hand it off | The brief | Changes |
| A105 | WhatsApp isn’t connected sheet | Hand it off | Your team, on WhatsApp | Changes |
| S28 | Pasted brief text | Hand it off | Copied brief | Changes |
| S29 | Jam brief document, markdown sections The plan | Hand it off | The brief | Changes |
| S30 | Team brief, PDF heading A brief for the team that makes it, sections What to make | Hand it off | The brief | Changes |
| 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 |
| S55 | Slack thread mirrors *someone* in the product: the text | Hand it off | Updates in your Slack thread | Changes |
| S57 | Slack approve result Approved by someone · Open in the product, and replies to the presser only | Hand it off | Approve, in Slack | Changes |
| S59 | Card share to Slack, server post route; client sheet Post to a channel | Hand it off | Hand it off to your team | Changes |
| P17 | Share the brief chooser | Hand it off | Hand it off, Who is shipping this | Changes |
| P18 | Missing info sheet | Hand it off | Hand it off, still missing | Changes |
| P19 | Share toasts | Hand it off | Handed off toast | Changes |
| P24 | Ship strip in the pane | Hand it off | Bottom bar: Hand it off | Changes |
| P25 | Send to menu | Hand it off | Hand it off, copy link | Changes |
| P32 | Brief viewer sheet | Hand it off | Brief preview | Changes |
| P35 | WhatsApp route: sheet Send it for approval | Hand it off | Hand it off, your own chat | Changes |
| S24 | Read only brief page, title the title · Brief, header the brand × the product · Brief · · shared a date,… | Brief page | The brief | Changes |
| S25 | Old brief link without full, 302 into the jam | Brief page | The brief | Changes |
| 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 |

### Work

| Id | Today | Goes to | Tomorrow's name | Tag |
|---|---|---|---|---|
| A24 | Round button Jam with the team | Work | Start something new | Changes |
| A35 | Team card Live from your workspace | Work | In the works | Changes |
| A54 | Deck: columns Signals | Work | Today filtered by area | Changes |
| A57 | Dashboard sheet What your team is working on | Work | Work | Changes |
| A59 | Work board, also | Work | Work: Ideas, In the works, Handed off | Changes |
| 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 |
| A70 | Library, Saved Library, tabs Saved | Work | Work, Ideas | Changes |
| A71 | Library, Jams, alias | Work | Work | Changes |
| A72 | Library menu Restore | Work | Work row menu | Changes |
| A116 | New jam What do you want made? New jam | Work | Start something new | Changes |
| A117 | Bundle jam N plans · one brief | Work | Start something new, from hearted picks | Changes |
| P36 | Shortcut jams | Work | Start something new | Changes |
| P86 | Canvas still in tiles | Work | Work row preview | Changes |

### Your store

| Id | Today | Goes to | Tomorrow's name | Tag |
|---|---|---|---|---|
| A33 | Store health card Store health, rings Creative | Your store | What changed, store health | Changes |
| A34 | AI answers card and sheet Who AI names when shoppers ask | Your store | What AI search says | Changes |
| A76 | Heard What we heard | Your store | What customers say | Changes |
| A77 | Rivals All, one tab per rival | Your store | What rivals run | Changes |
| A78 | Products Products N | Your store | Your products | Changes |
| S40 | Watch view data: four blocks What people say | Your store | Your store | Changes |
| P73 | Products deep page | Your store | Your products | Changes |
| P78 | Watch page top | Your store | Your store | Changes |
| P79 | What people say | Your store | What customers say | Changes |
| P80 | Where you sell | Your store | Where you sell | Changes |
| P81 | What rivals do | Your store | What rivals run | Changes |
| P82 | How you show up | Your store | What AI search says | Changes |
| P83 | Watch errors and foot | Your store | Your store, could not read | Changes |

### Settings

| Id | Today | Goes to | Tomorrow's name | Tag |
|---|---|---|---|---|
| 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 |
| A17 | Setup step Connect your tools | Settings | Connections | Changes |
| A18 | Setup step Invite your team | Settings | Team | Changes |
| A37 | Connect card Needs access | Settings | Connections | Changes |
| A39 | Check wait card Waiting for you · a time ago | Settings | What we know about you, Check what we read | Changes |
| A48 | Add to home screen sheet Add the brand to your home screen, steps per phone | Settings | Add to home screen | Changes |
| A52 | Learned toasts Learned: the text with See it, stacked 2.6 seconds apart | Settings | What we know about you | Changes |
| A62 | Viewing as popover Viewing as | Settings | Which of these do you handle | Changes |
| A63 | Account menu rows Library | Settings | Settings, behind your picture | Changes |
| 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 |
| A68 | Connect sheet Connect the tool | Settings | Connect a tool | Changes |
| A69 | Connectors page Connect your accounts | Settings | Connections | Changes |
| A73 | References | Settings | What we know about you, your pictures | Changes |
| A74 | What the product learned | Settings | What we know about you | Changes |
| A75 | Drop anything flow: drop zone, sheet Where should this go? | Settings | What we know about you, Tell us something | Changes |
| 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 |
| A83 | Your feed | Settings | Which of these do you handle | Changes |
| S4 | Privacy page Privacy, tag Preview policy · 19 October 2026, sections What the product reads | Settings | Privacy | Changes |
| S5 | Terms page Terms, tag Preview terms, sections Use it on your own store | Settings | Terms | Changes |
| S15 | Sign out | Settings | Sign out | Changes |
| S20 | Team API messages Only the team sees the team. | Settings | Team | Changes |
| S23 | Email settings page, six states | Settings | Email settings | Changes |
| 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 |
| S37 | Brand book for AI tools | Settings | What we know about you, for AI tools | Changes |
| 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 |
| S48 | Shopify uninstall and redact webhooks, disconnect Shopify | Settings | Connections | Changes |
| S49 | Connect start and callback, errors passed back in the hash as | Settings | Connections, connect a tool | Changes |
| S50 | Connector API messages Sign in with Google first. | Settings | Connections | Changes |
| S51 | Disconnect, and protected refusal This brand’s connections are protected while it is live with a client. Ask… | Settings | Connections, disconnect | Changes |
| S82 | Delete account, no server route; Privacy says email hello@ from your work email | Settings | Delete my data | Changes |
| P1 | Connect sheet | Settings | Connect the tool | Changes |
| P2 | Connect gates | Settings | Connect the tool, signed out state | Changes |
| P3 | Guided key steps | Settings | Connect the tool, key steps | Changes |
| P5 | Connecting state | Settings | Connecting | Changes |
| P6 | Connected result | Settings | Connected | Changes |
| P7 | Account picker | Settings | Pick the account | Changes |
| P8 | Return from a platform sign in: long toast with the platform error, reopen the sheet | Settings | Connect flow, return step | Changes |
| P9 | Disconnect sheet | Settings | Disconnect the tool | Changes |
| P10 | Connector rows overlay | Settings | Connections | Changes |
| P11 | Sign in prompt on connectors | Settings | Connections, signed out | Changes |
| P13 | Account menu popover | Settings | Settings, behind your picture | Changes |
| P14 | Team and access sheet | Settings | Team | Changes |
| P15 | Person menu in team | Settings | Team, person menu | Changes |
| P16 | Delete my data sheet | Settings | Delete my data | Changes |
| P63 | Brand Book in the app, chapters Story | Settings | What we know about you | Changes |
| P65 | Edit in place | Settings | Edit a fact | Changes |
| P66 | Selection bar | Settings | Change with AI | Changes |
| P67 | Book composer dock | Settings | Tell us something | Changes |
| P68 | Change cards | Settings | Suggested change | Changes |
| P69 | Drop zone | Settings | Drop a file | Changes |
| P70 | Font kit | Settings | Fonts | Changes |
| P71 | Rules | Settings | Rules, in What we know about you | Changes |
| P72 | Where it applies menu | Settings | Where it applies | Changes |
| P74 | Product photos add | Settings | Product photos | Changes |
| P75 | Share the brand book sheet | Settings | Share what we know | Changes |
| P76 | Chapter pager | Settings | Chapters | Changes |
| P77 | Book waits and errors | Settings | What we know about you, loading | Changes |
| P90 | Memory popover | Settings | What we know about you | Changes |
| P91 | Connectors popover | Settings | Connections | Changes |
| P100 | Install manifest: name the product Feed, short the product | Settings | Add to home screen | Changes |

### Emails and notifications

| Id | Today | Goes to | Tomorrow's name | Tag |
|---|---|---|---|---|
| S18 | Company domain auto join, then email someone joined the brand on the product | Email or notification | Someone joined your team | Changes |
| S19 | Invite email someone invited you to the brand on the product | Email or notification | You're invited to the brand | Changes |
| S21 | Admin change emails You're now the admin of the brand on the product | Email or notification | You are now an admin | Changes |
| 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 |
| S58 | Slack weekly post *This week in the product for the brand*, lines • N plays rewritten | Email or notification | This week, in Slack | Changes |
| 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 |
| S61 | Plays ready emails | Email or notification | Your picks are ready | Changes |
| 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 |
| 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 |
| S65 | Jam emails now | Email or notification | Need your yes, and mentions | Changes |
| S66 | Jam replies batch email someone and someone in the title, button Open the jam | Email or notification | New replies on the title | Changes |
| S67 | Jam email footer You’re getting this because you’re in this jam. | Email or notification | Email footer | Changes |
| S71 | Brief status email to the sender Your brief the title is received | Email or notification | Handed off: where it is | Changes |
| S72 | In app notifications from the server | Email or notification | Notifications | Changes |

### Staff, demo, unlinked and later

| Id | Today | Goes to | Tomorrow's name | Tag |
|---|---|---|---|---|
| A66 | Demo controls sheet two For whoever is presenting. Changes apply instantly and skip the connect sheets. | Staff only |  | Changes |
| A80 | Plays Build tab All N plays are written | Staff only |  | Changes |
| A120 | Storefront switch shows the hidden Storefront agent, area and seat | Staff only |  | Changes |
| S68 | Our team tagged email the brand: someone tagged our team on the title, buttons Join the jam and Read the… | Staff only |  | Changes |
| S69 | Brief sent email · New brief from the brand | Staff only |  | Changes |
| S70 | Brief status mover, staff only, errors This brief was not sent to our team. | Staff only |  | Changes |
| S74 | Ops alert email the product alert: the title, titles Vertex is refusing calls on billing | Staff only |  | Changes |
| S75 | Sloosh connect for staff, callback lands | Staff only |  | Changes |
| S76 | Admin data routes visitors, sources, treg, sessions, ops busy, listen | Staff only |  | Changes |
| P89 | Model popover | Staff only |  | Changes |
| P102 | Demo admin | Staff only |  | Changes |
| A2 | Landing demo tiles See it run on a real brand | Demo only | Demo stores | Changes |
| A65 | Demo controls sheet one Demo controls | Demo only | Demo controls | Changes |
| A67 | Demo pill Demo | Demo only |  | Changes |
| S73 | Simulated teammate reply, chat line marked dummy, notification Simulated reply from someone | Demo only |  | Changes |
| S77 | Demo site picker Know what to do next. | Demo only | Demo stores | Changes |
| S78 | Tour starter Opening the brand… | Demo only |  | Changes |
| 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 |
| S80 | Demo replayed build states Read | Demo only | Reading your store | Changes |
| P4 | Simulated connect sheet | Demo only | Connect the tool, sample | Changes |
| A13 | Wait screen Figuring out the best plays for the brand, steps Read your site | Unlinked but kept in code |  | Goes |
| A14 | Onboarding side preview Your feed, as a a seat | Unlinked but kept in code |  | Goes |
| A15 | Setup step Who’s this feed for? | Unlinked but kept in code | Which of these do you handle | Goes |
| 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 |
| A19 | Setup frame: step list Your role | Unlinked but kept in code |  | Goes |
| 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 |
| A21 | Swipe tuner Tune your feed · 1 of 10 | Unlinked but kept in code |  | Goes |
| A32 | Welcome card Welcome | Unlinked but kept in code |  | Goes |
| A36 | Deck promo card See everything side by side. | Unlinked but kept in code |  | Goes |
| A49 | Logo stickers in the left gutter, the brand mark and the product mark, peel on hover | Unlinked but kept in code |  | Goes |
| A56 | Tune the deck sheet Tune the deck | Unlinked but kept in code |  | Goes |
| A79 | Plays list: tabs Plays | Unlinked but kept in code |  | Goes |
| A107 | Options page What should this card become? | Unlinked but kept in code |  | Goes |
| A110 | Card page, desktop side drawer or full page: steps Draft · Review · Ready · Brief shared | Unlinked but kept in code | Inside a pick | Goes |
| A112 | Version picker Tap a version to pick it | Unlinked but kept in code |  | Goes |
| A114 | Card page conversation Conversation · studio and jam | Unlinked but kept in code | Make it, chat | Goes |
| A119 | Jam v2 switch inside | Unlinked but kept in code |  | Goes |
| S13 | Cross site refusal This change has to come from the product itself. | Unlinked but kept in code | Something went wrong | Goes |
| S16 | Old approve page Access is by invite now | Unlinked but kept in code |  | Goes |
| S31 | Ready to post page, title Ready to post: the title | Unlinked but kept in code |  | Goes |
| S32 | Jam v2 brief page | Unlinked but kept in code |  | Goes |
| S33 | Dead v2 link This link is not valid any more. | Unlinked but kept in code | This link no longer works | Goes |
| P20 | Jam pane on the card page: tabs Chat | Unlinked but kept in code | Folds into Make it | Goes |
| P39 | Jam v2 page | Unlinked but kept in code |  | Goes |
| P40 | Jam v2 spark | Unlinked but kept in code | Why this | Goes |
| P41 | Jam v2 part toolbar | Unlinked but kept in code |  | Goes |
| P42 | Add a piece popover | Unlinked but kept in code |  | Goes |
| P43 | Piece mode | Unlinked but kept in code | Hand it off | Goes |
| P44 | V2 Studio composer overlay: style gallery More styles | Unlinked but kept in code | Make it, set up | Goes |
| P45 | V2 Brand Book sheet | Unlinked but kept in code | What we know about you | Goes |
| P46 | Finish sheet: checks per piece | Unlinked but kept in code | Hand it off | Goes |
| P47 | Whose OK popover | Unlinked but kept in code |  | Goes |
| P48 | V2 history pill | Unlinked but kept in code | Versions, New version | Goes |
| P49 | Drop anything row | Unlinked but kept in code | What we know about you, add | Goes |
| P50 | V2 boards: video timeline Voice | Unlinked but kept in code |  | Goes |
| P51 | V2 toasts: own toast with Close, draw error Something on this page didn’t draw… | Unlinked but kept in code |  | Goes |
| A40 | Pro carousel at the end of a free day | Later |  | New |
| A58 | Pro plan sheet Free | Later |  | New |
| A111 | Card page measure block Check on day N | Later | How it went | New |
| S52 | Marketplaces Marketplaces are coming soon. | Later |  | New |
| P87 | Live pill | Later | Live | New |

### Components

| Id | Today | Becomes | Tag |
|---|---|---|---|
| C1 | Feed card shell | Pick card, closed | Changes |
| 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 |
| C3 | Card kinds by data | One pick card with an area tag: Social posts, Ads, Website, AI search, Email and WhatsApp | Changes |
| 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 |
| C5 | Card head: agent face, agent name, time, campaign line, rank reason | Area and source line | Changes |
| C6 | Media slot with carousel; draft slot; dead media, asset fallback | Asset slot | Changes |
| 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 |
| C8 | Chips used 50 times in selectors | Chip, for choices and filters | Changes |
| C9 | Tags and badges: 15 selectors | Tag: area, status, To confirm, Sample, Dummy | Changes |
| C10 | Make chip with format and pieces | Where to post, inside the open pick | Changes |
| C11 | Source line, source chips | Source chip | Changes |
| 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 |
| C13 | Status chips: card status row, Work tile badges, faces, connector, v2, brief viewer, finals, rule, shelf,… | Status chip | Changes |
| C14 | Story rings | Story ring | Changes |
| C15 | Story viewer and 31 more classes, progress bars, slide kinds: rival ad, trend chart, news, how to, recap,… | Story viewer | Changes |
| C16 | Health rings | Store health meter in Your store | Changes |
| C17 | Tiles: greeting tiles, Learned tiles 8 classes, work tiles, batch, reference, demo, play tiles, Library tiles | Tile, one grid tile | Changes |
| C18 | List rows: queue 19, notification 14, Heard 37, fact 30, lesson and rule 64, connector 22, team 28 7,… | Row | Changes |
| 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 |
| 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 |
| C21 | Buttons: 163 leading button classes counted on every link. Main action alone, lit rim. Sizes | Button set: main, quiet, link, icon | Changes |
| C22 | Back buttons, labels Back | Back | Changes |
| C23 | Icon buttons used 31 times in selectors, card icons heart, hand, shield, refresh, bookmark | Icon button | Changes |
| 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 |
| C25 | Sheets | One sheet: slides up, title, one main button, Close | Changes |
| C26 | Popovers and menus: card menu, panel | One menu | Changes |
| C27 | Side drawer for the card page, 55 and 42 selector uses, also opens as a full page |  | Goes |
| 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 |
| 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 |
| 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 |
| 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 |
| C32 | Empty states; 18 more defined in CSS only | Empty state: the character, one line, one button | Changes |
| C33 | Error states shown in the empty style | Error state: plain sentence of what happened, one way out, the character error pose | Changes |
| C34 | Fields: paste field, check fields, fact fields, invite chips, topic add, teach a rule, search, connect key… | Field, and the paste field | Changes |
| C35 | Toggles: sounds switch, updates, lesson and rule, segmented | Toggle, and a segmented choice | Changes |
| C36 | In page tabs: Library tabs, queue tabs, rival tabs, plays tabs, stage switch Creative and Brief, studio… | Tabs | Changes |
| 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 |
| C38 | Avatars, agent faces, coloured initials, presence cursor | Avatar: photo or initials, a here now dot | Changes |
| C39 | Agent shapes: with the five agent shapes and colours, area classes, agent names Creative director | Area tag dot only, never a character | Goes |
| C40 | Progress bars: queue, plays writing bar, AI answers bars, story viewer bars | Progress bar | Changes |
| C41 | Steppers: card page, setup step list, reading rail steps | Stepper, used only on Reading your store and the connect key steps | Changes |
| C42 | Version history: studio History menu, compare list, options strip, card page version picker, canvas dots | Versions strip with New version | Changes |
| C43 | Chat: studio chat, card page thread, jam pane bubbles, AI answers chat | Chat bubble: you, AI, teammate, system | Changes |
| 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 |
| 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 |
| 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 |
| C47 | Tables: play tables, rows, canvas play table, book facts, Ads Manager change table | Table | Changes |
| 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 |
| 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 |
| C50 | Margin notes in the right gutter | A line inside Why this in the open pick | Changes |
| C51 | Logo stickers |  | Goes |
| C52 | Theme toggle | A Settings row | Changes |
| C53 | Tooltips, title attributes as content | None: what a tooltip says moves into Why this | Goes |
| C54 | Proof blocks 21: proof rows, basis, connector chips | Why this rows in the open pick | Changes |
| C55 | Greeting 14 selectors | Today header with the character corner | Changes |
| C56 | Deck columns 32, column menu, Signals guide | Work board columns | Changes |
| C57 | Work board lanes and AI lane | Work board | Changes |
| 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 |
| C59 | Question tiles 42 8, seat tiles, want pills | Question tiles for the three questions | Changes |
| C60 | Check and fact rows 28, 30 | What we know about you rows | Changes |
| C61 | Learned and memory rows 64, drop zone 27, 7 | What we know about you rows and Tell us something | Changes |
| 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 |
| 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 |
| 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 |
| C65 | Card page 90, 37, 8, picker | Inside a pick: the draft, Why this, the plan, Where to post | Changes |
| 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 |
| C67 | Connect sheets: 20 classes, 27 classes, connector rows 22 | One connect sheet and one Connections row | Changes |
| C68 | Account and team: account menu 25, team 28, 7, invite 11, delete sheet | Settings rows: Team, Account | Changes |
| 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 |
| C70 | Film board 18 and teleprompter 11 | Film board and teleprompter inside Make it | Changes |
| C71 | Game Catch the beans | Long wait add on behind a switch | New |
| C72 | Install nudge banner | A Settings row; the banner goes | Changes |
| C73 | Demo pieces, two demo control sheets, demo picker page styles, tiles | Demo only | Changes |
| C74 | Pro plan |  | New |
| C75 | Measuring leftovers in view: 14, rows, notification kinds Live, Reading, Result, Learned What moved the number | None until How it went | Goes |
| C76 | CSS never named in any script: 526 of 2,886 classes, about 18 percent, and 37 whole families |  | Goes |
| C77 | Template and style galleries: v2 and the creative stage gallery, with searches Search styles | One gallery sheet inside Make it, set up | Changes |
| C78 | Inline styled pages outside the kit: Shopify home, offline page, demo picker | The same tokens, buttons and error state as the app | Changes |

[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.