Symphoria Board: design spec (v1, 13.10.2026)

Status (13.10): the Board ships now on the interface Symphoria already has. These screens are new-style concept mockups for the landing and the deck. Building this look into the product is a separate job, done later.

For the agent that builds the Board into Symphoria. Your interaction model stays as you built it in the mock (AFFiNE edgeless: toolbar, connectors, frames, notes pinned to entities, territories, map pins, flow blocks, layers, minimap, present mode). This spec changes the look so the Board reads as the same product as the redesigned app, and adds three things the mock did not have: field captures, the record per board action, and agents as visible collaborators.

Screens (all data invented): 1. board-1.webp: overview of a board with three frames. 2. board-2.webp: a note being pinned to an entity, with the context toolbar, the entity's claims card and the inspector. 3. board-3.webp: present mode. 4. board-loop.mp4, 9 s: drop a note, pin it, move the entity (the note follows), lasso a territory.

The source page is board.html. Use it as a reference for sizes and colours; it is not production code.

1. Tokens

All colours, fonts and sizes match the app v2 screens.

Rules: - Mint is the only bright colour. Amber and red are used only on note types and contradicting edges. - No gradients and no glows, with two exceptions: the focused entity and the present-mode laser pointer. - No pastel sticky notes. Every note is a dark card with a coloured type bar. - Edge labels are uppercase mono with 6 % tracking, on a bg plate so they cut the line.

2. Shell

• Rail (60 px, left): the same rail as the app; Investigations is active.
• Top bar (52 px), left to right:
• breadcrumb Investigations / <name>;
• the segmented control Graph | Board. The Board is a second view of the same investigation, not a separate document;
• presence: the agent avatar «AI» with a mint ring, then the people;
• the record pill ● Signed · private, anchors when shared;
• undo and redo;
• Present;
• Share, the primary mint button.
• Canvas: a dot grid. Pan with Space or the hand tool, zoom with Ctrl and scroll. The grid scales with the zoom.

3. Floating panels

All floating panels use panel-1, a 1 px line border, a 6 px radius and the panel shadow, 14 px from the canvas edges.

• Layers (top right, 232 px wide):
• one row per layer: icon, name, count and a toggle. The toggle is mint when on and #333 when off;
• the layers are Graph, Notes and frames, Territories, Places, Field captures and Money flows;
• below the rows comes a «Frames · present in order» list. The current frame is mint.
• Toolbar (bottom centre), in groups split by a 1 px divider:
• Select V · Hand H · Frame F · Connector C;
• Note N with its type colour swatch · Pen P · Text T;
• Image I · Flow B · Place M · Territory lasso L;
• Present.
• The active tool is filled mint with on-mint icons. Shortcut letters sit bottom right of each button in 8.5 px mono.
• Zoom (bottom left): fit, −, the value in %, +.
• Minimap (bottom right, 196×124): frames as dark blocks, entities as dots, notes as type-coloured dashes, territories as a mint wash. The viewport is drawn as a mint outline.
• Inspector: it replaces Layers while something is selected (see 5).

4. Board objects

5. Interaction details

• Pinning: drag a note over an entity and the entity shows the snap halo. A plate says «Pin to · moves with it». Drop the note to pin it. Dropping it elsewhere leaves it free. Pinning is undoable.
• Context toolbar (on a selected note): the type switch (Question, Hypothesis, Gap, Anomaly, Evidence), a connector and delete. It sits below the object, or above it when the object is near the bottom edge.
• Entity card on hover: the type chip and name, the number of claims, then one row per claim: the text, then source · author in mono. Contradicting claims are red and say «sources disagree».
• Inspector (on selection), from the top:
• the type and the text;
• Pinned to · Author · Seen by · Status;
• Linked sources, numbered, with «Ask the agent to look for more»;
• Record: each board action as a ledger line with signed ✓, then the line «private · anchors to Bitcoin when shared».
• Present (frames in order): a black stage with the frame's title in Inter 300 at 54 px and one line under it. The content is enlarged. «Sources on this frame» lists numbered sources, including field captures. The bottom bar holds the frame thumbnails (the current one has a mint outline), ‹ n / N ›, and Exit (Esc). A mint laser pointer follows the cursor. Top right: «Read-only link · signed snapshot».
• Share: a read-only link opens present mode. A board edit made after sharing is a new signed entry, so a shared board can be checked like any export.

6. What the Board must never show publicly

• No real case on demo boards.
• No faces of people in field captures unless they consent. Blur them before capture, as the glasses MVP does.
• No raster map tiles in colour.

7. Build order (our suggestion; you decide)

1. Restyle the existing mock to these tokens: notes, entities, edges, frames, panels, toolbar.
2. Pin and follow, the snap halo, the context toolbar.
3. The inspector with the record lines: wire the board actions to the ledger.
4. Field capture cards: one card type, fed by the glasses and drone captures.
5. Present mode restyle, then the read-only link.