Manna — Functional Design Handoff

26 September 2026 · Design specification · 85 product screens · 7 reference boards

The Manna canvas now contains 42 desktop screens and 43 mobile screens. All 61 existing product screens were revised, and 24 missing workflow screens were added. The warm paper, green palette and editorial typography remain; the change is functional depth.

The maintained Pencil source is bestbuds/modules/manna.pen. Read this alongside the Manna implementation HLD, which defines the Reaktor Graph, Surface, actors, services, data ownership and migration architecture.

1 What changed

The earlier designs communicated the direction but often stopped at a summary card. This revision follows an object into the operations a person needs: create, locate, select, inspect, edit, compare, link, plan, use, share, review and recover.

2 Review the connected journeys

The workflow board connects each journey to numbered desktop and mobile screens. Use the complete registers below to locate exact canvas nodes.

Home and memory

Home presents accepted work, available capacity, the day's agenda, inbox decisions and a saved work context. Recommendations remain visibly distinct from commitments.

Memory is an object workspace. Collection filters and bulk selection lead to a selected record with its belief state, treatment, exact sources, typed relationships and history. Unsorted captures are valid records.

Learning and evidence

A course includes its ordered outline, exact resume location, provider limitations and route inspector. Resource progress, selected-path coverage and contextual capability have separate denominators. The practice studio exposes support use, artifacts, criteria and prior attempts.

Routes show required branches, alternatives and a distinct integration check. A supported delivery route can involve a tool or mentor without converting their contribution into the learner's independent capability.

The full knowledge map

Atlas remains a first-class surface. It now includes object creation, typed connection editing, path finding, object/relation filters, source inspectors, saved views and navigation history. The overview is one level of a continuous map, not a replacement for the full catalogue.

On mobile, a bounded map viewport and task sheets preserve orientation. The selected-source sheet offers the exact original, full details and typed-link actions. Complex editing moves into a focused page.

Work, context and recovery

The project board separates shared commitments from the user's private planning overlay. Work sessions preserve artifacts, source revisions, decisions, actual activity and a concrete next action.

AI responses have source citations and reviewable proposals. Automation combines a trigger, condition and bounded effect with cooldown, expiry, budget and authority. An uncertain external result has receipt inspection; it is not a reason to repeat the action automatically.

Recovery shows what is local, queued, conflicted or unknown. Legacy import has identity and relation mapping, validation and cutover stages. The migration is a planned replacement: the old app may be offline while the graph, MCP, auth clients and useful infrastructure are retained and reconnected. The recovery screen represents import and reconciliation, not a requirement to operate old and new apps together. No actual migration count or success is invented.

Mobile capability without a compressed desktop

Mobile retains the same domain operations through focused pages, grouped rows, selection modes, larger fields and task sheets. Long frames represent complete scroll content. Atlas uses a bounded 402 × 874 map viewport.

Capture demonstrates the pattern: preserve the original, edit the meaning, attach a source, select treatment and save. Saving need not start processing or learning work.

3 Interaction and implementation contracts

The HLD owns the source-grounded architecture. These obligations map the visual decisions onto Surface and graph contracts; they do not invent new framework APIs.

A canvas control specifies intent. Bind it to command, validation, permission, loading, receipt and failure behavior before describing it as functional.

The server plane is shared Reaktor Server plus Cloudflare Workers and the Reaktor stack. Generic auth and graph/database services support multiple apps. Small Manna and BestBuds APIs compose app-owned domain handlers; the shared host keeps hardcoded product policy minimal. These are logical service boundaries, not a requirement for a separate Manna server deployment. See the HLD system structure.

4 Navigating the entire legacy graph

The design accommodates the whole-graph model through everything → area → object → exact source. A selected route survives scale changes. Layers choose what is shown; permission scope determines what may be read.

This requires the HLD's bounded queries, stable semantic clustering, viewport loading and explicit states for folded, filtered, pending, unavailable and unknown content. “Everything” cannot mean rendering every node and edge at once. Permission checks apply before retrieval, aggregation and ranking, including counts and derived features.

The layout is compatible with a very large imported graph. Actual capacity must be established with the legacy inventory, identity/relationship parity, anchor and access checks, worst-case traversals, pan/zoom latency, memory budgets and snapshot/restore qualification for the planned cutover. The design alone cannot certify those results.

5 State and accessibility coverage

The interaction-state board defines empty data, failed processing, limited permission, stale anchors, offline drafts, unknown outcomes, infeasible schedules, insufficient evidence and keyboard selection.

Desktop uses 1440 × 1000 frames and a 216 px navigation rail. Mobile uses a 402 px width, 44 px primary actions and natural wrapping. Most mobile boards show full scroll content; runtime navigation must respect platform safe areas and remain available through the intended scroll behavior.

Color reinforces written labels. Unknown is not failure, maintenance is not missed adherence, and a proposed relation is not an accepted fact. Keyboard, screen-reader list alternatives and reduced motion require implementation qualification.

6 Complete canvas register

Numbers are screen labels. Node IDs locate the exact top-level frame in the maintained Pencil file.

7 Verification and delivery

The final canvas checks found no child clipping beyond a 0.5 px numerical tolerance, no overlapping top-level frames, and no unfinished placeholders. Major workspace types and mobile task sheets were visually inspected. All 92 frames were exported for the review gallery.

Five reusable components carry desktop navigation, the global toolbar, mobile navigation and primary/secondary actions. Shared variables preserve Manna's visual language.

These checks cover the design artifact. Runtime interaction tests, assistive-technology checks, graph performance, provider failure simulations and migration parity remain implementation gates in the Manna HLD.