Wireframes
Screens at both widths
Composition, plus one styling claim: shell screens sit on a single themed frame, with content as rounded panels floating on it. The outer ground is the frame, the translucent panel is the channel list and the solid one is the content panel. Dashed boxes appear conditionally and the tinted one is the composer. Every label names a real component.
Workspace shell
/workspace/[workspaceId]/channel/[channelId]One themed frame behind the toolbar, rail and gutters; the list, main and thread are rounded-xl panels floating on it with 6px gaps. From md up every pane header is 54px, and the toolbar's search pill shows ⌘J (Ctrl + J off Mac) for the quick switcher. On mobile the toolbar is dropped, a MobileBackBar (min 56px) sits on the frame, and the messages are one rounded-top panel.
md and up
< md
Workspace home
/workspace/[workspaceId]On desktop the canvas stays empty until a channel is picked. On mobile the bare route promotes the channel list into the canvas — the list is the screen, not a sidebar.
md and up
< md
Sign in
/authA branded aside beside the form. Under md the aside is dropped and the form panel grows its own compact header, carrying the sign-in / sign-up toggle with it.
md and up
< md
Email confirmation
/auth · VerifyEmailStepReplaces the form in place rather than routing away, so the entered email stays in state. The mode toggle is hidden here — switching would strand the code already sent.
md and up
< md
Workspace settings
/customize-workspace/[workspaceId]/*Twelve sub-routes behind one nav: settings, members, channels, permissions, invitations, user-groups, emoji, integrations, app-directory, analytics, audit, account. The nav collapses into a Sheet under md.
md and up
< md
Canvas variants
/threads · /drafts · /searchThese reuse the shell and replace only the canvas column, so the rail and list stay mounted. Each is a list surface with its own empty state. Activity, Saved and DMs are different: they drop the channel list for their own list-and-detail split.
md and up
< md
Join and invite
/join/[workspaceId] · /invite/[token]Full-screen single column at every width — no shell, because the caller may not be a member yet. Both dead-end into either the workspace or an explanation.
md and up
< md
Rules these encode
| One frame, floating panels | The toolbar, rail and gutters share the theme's frame; content is rounded-xl panels 6px apart, never flush columns split by borders. |
| One column at a time under md | Never a squeezed three-column shell on a phone. |
| Secondary panes become Sheets | Thread and profile overlay rather than compress the canvas. |
| The toolbar is desktop-only | Its actions move into the header and the bottom nav, both sitting on the frame. |
| Pane headers are 54px from md up | Channel, DM, group DM, thread, profile, drafts, threads, user group panel and new message share one height. Under md the shell's MobileTopBar / MobileBackBar (min 56px) take over. |
| Tables become cards | Horizontal scroll is a last resort, not a mobile layout. |
| Pre-membership screens have no shell | Join, invite and auth can't assume a workspace. |