Roomy

• Nothing changes without consent. AI previews, never acts. Tidy, transcript import and photo to board show their result first, and one undo reverses any of them.
• AI is always recognisable. One colour (orchid) and one mark (a four-pointed sparkle) belong to AI and nothing else.
• The room comes first. Presence, the shared timer and “bring everyone to me” are designed for the facilitator and the whole room.
• Every state is a screen. Loading, empty, offline, reconnecting, error and no-access are designed as carefully as the happy path, in light and dark.

Nobody wants to come back to a board that rearranged itself while they were away. So every decision about Tidy protects the person's sense of control.

Preview before change

Pressing Tidy shows a proposal first. Notes move into dashed frames with suggested labels, and a bar says “Preview only — nothing is saved until you accept”, with Revert and Accept. Focus lands on Accept, so keyboard users can decide straight away. After accepting, the bar offers Undo, and one undo reverses the whole thing.

A shared board fails socially before it fails technically, so the multiplayer design is about knowing who is doing what, and never losing someone's work.

Most sticky notes start as talk, so the second half of the product covers the meeting itself: getting ideas onto the board, running the session, and getting decisions out.

Getting ideas in

• Listen turns talking points into sticky notes as people speak. Before it starts, a sheet explains that it uses the microphone and that everyone on the board will see you're listening.
• Import a transcript by pasting text or uploading a .vtt, .srt or .txt file. The dialog names the tools it works with (Zoom, Google Meet, Teams, Otter or plain text), so nobody has to guess.
• Photo to board reads a photo of a real sticky-note wall. You review every note before it's added: hard-to-read notes are outlined, and you choose whether to keep the photo's colours.

Running the session

The facilitation panel holds four tools, each one row with a short promise.

During voting, a banner counts down your votes and teaches the interaction in one line: “click a note to vote, again to take it back”. When voting ends, it reports the total and offers Sort by votes.

Getting decisions out

The summary panel splits into a summary, decisions and action items, all editable before you copy. Copy for Slack and Copy for Notion format the text for where it's going next.

Sticky notes carry the colour, and the interface around them stays neutral.

Tokens first

The system lives in Figma variables, with CSS code syntax so names match the code exactly.

• Three collections: Primitives, Color (Light and Dark modes) and Space.
• 15 text styles and 3 elevation shadows.
• Semantic names everywhere. Components use bg-surface-raised or text-secondary, never a raw colour. The code has the same rule: no hex values and no one-off Tailwind values in the interface.

A rebrand that took minutes

The first direction used warm sand neutrals, a clay brand colour and violet for AI. Partway through, I picked a new brand colour: indigo #2930FF (indigo/500), with indigo/400 #4F55FF in dark mode. Neutrals moved to cool slate and the AI colour to orchid.

Because components only referenced semantic tokens, every screen updated at once, in Figma and in code. That was the strongest argument for tokens on this project.

A canvas is invisible to screen readers and keyboards by default, so every canvas interaction was designed with a keyboard path from the start, not retrofitted.

• Objects are reachable. Arrow keys move between and nudge objects, and key hints appear above the toolbar while you do it.
• Everything has a key. Alt+arrows resize by 8, Alt+[ and Alt+] rotate by 15°, Shift+F10 opens the object menu, and Enter on a toolbar tool places an object in the middle of the view.
• Screen readers hear changes. What's selected, a new size or angle, and the sync status are announced.
• Real text fields. Typing in a note uses a real text field laid exactly over the canvas, so spellcheck, IME input and screen readers work as they do anywhere.
• The toolbar is one tab stop (roving tabindex), and menus return focus when they close. The shortcuts list (press ?) shows only shortcuts that really work.
• Hidden notes stay hidden. During “hide until reveal”, screen readers don't hear other people's notes either.

An automated check (axe) passes on the board, Share and shortcuts, in light and dark. It caught two real issues: missing landmarks, and the faint grey “Skip tips” text (3.8:1), which now uses the tip's full text colour.

Semantic tokens made a full rebrand a same-day change, and designing states as screens meant the build had answers ready instead of guesses.

What worked

• Preview before change gave AI features a single, repeatable pattern: Tidy, transcripts, summaries and photo to board all let you check before anything is kept.
• Spec notes carried behaviour, timing and focus order that frames alone can't show, which kept the build close to the design.
• One colour for AI made machine-made changes recognisable everywhere without extra labels.

What I'd do differently

• Check presence colours for contrast with initials on top before locking the palette; it's the one open accessibility issue.
• Test with real facilitators earlier. Every flow here came from the brief. I haven't run a research session yet.

What's next

• Re-take the screenshots with the AI key on, so they show Claude's own theme labels.
• Resolve the presence-colour contrast.
• Usability sessions with facilitators running a real workshop.
• A meeting bot that joins calls, planned for after v1.

Home, sharing, facilitation, settings and the error screens. Open any of them full size.

• A collaborative canvas: sticky notes, shapes, text, pen and eraser, connectors, grouping, alignment, layers, rotation and resizing.
• Live collaboration: several people on one board, live cursors and selections, follow mode, and offline editing that merges when you reconnect.
• Per-user undo, which only takes back your own changes, never a teammate's.
• Tidy: themes found by AI (or by a built-in method with no AI key), animated into labelled frames, and nothing saved until you accept.
• Share and export (PNG, SVG), keyboard access throughout, light and dark themes, and reduced-motion support.

Stack: Next.js and React with TypeScript, Tailwind with design tokens, Yjs for sync, Cloudflare Durable Objects and D1, and Claude (claude-haiku-5-5) for Tidy.

Canvas, live sync, offline, per-user undo, Tidy, accounts and sharing, Listen and transcript import, summaries, the facilitation kit, photo to board, version history, the landing page and phone layouts. Roomy is free for now, so billing waits.

Still to switch on: the AI key (Tidy, transcripts and summaries use built-in methods until then; photo to board needs it), plus Google and email sign-in. Planned after v1: a meeting bot that joins calls.