Kade Heyborne
48c6ddc066
- Complete planning documentation for 5-phase development - UI design specifications and integration - Domain architecture and directory templates - Technical specifications and requirements - Knowledge incorporation strategies - Dana language reference and integration notes
4.2 KiB
UI/UX Design Document: Advanced Second Brain PKM System
This document details the aesthetic and interaction design principles for the Advanced Second Brain PKM system, ensuring a critical balance between data density, developer experience (UX), and consumer usability. The design is intended to support deep, focused work.
1. Design Philosophy & Aesthetics
The aesthetic is centered around a high-contrast, dark-mode environment, prioritizing function and clarity. This approach is specifically chosen to reduce eye strain during long work sessions involving code, data, and extensive reading.
| Aspect | Principle | Details |
|---|---|---|
| Theme | Dark Mode by default. | Utilizes deep charcoal backgrounds (#121212, #1E1E1E) to create a tool-like, focused environment. |
| Contrast | High-contrast text. | Ensures optimal readability against the dark background for all content. |
| Typography | Dual Font Strategy. | A clean sans-serif (e.g., Inter or Roboto) is used for general UI elements, while a highly readable monospaced font (e.g., Fira Code or JetBrains Mono) is reserved for all code, REPLs, and data outputs to enhance the developer experience. |
Color Accents for Functional Cues
Neon accents are strategically employed to denote state, function, and active elements, providing immediate visual feedback without cluttering the interface. Cyan is designated for Dana code and IDE elements, clearly marking the agent logic components. Purple is used for orchestration and agent management interfaces, highlighting the system's multi-agent communication layer. Finally, Emerald is reserved for "Fabric" analysis outputs and system success states, drawing the user's attention to extracted insights and positive system feedback.
2. Layout and Structure
The layout is designed to manage high data density through a persistent anchor and a highly flexible, multi-pane main content area.
2.1. Global Navigation Sidebar
The sidebar is a narrow, persistent element on the far left of every screen, serving as the user's primary anchor. Its purpose is to provide immediate access to the highest-level views (Dashboard, Global Chat, Settings) and facilitate rapid context switching between knowledge domains.
2.2. Domain Workspace Layout (Knowledge Browser Mode)
This mode, the core reading and analysis view, employs a classic three-pane structure to maximize simultaneous information display and support the user's need to view documents, graphs, and code concurrently.
| Pane Name | Position | Width | Function |
|---|---|---|---|
| Pane 1: The Drawer | Far Left | 250px (Collapsible) | Context/Source Management. Displays the file tree of the local domain directory (e.g., Papers, Notes, Media), acting as the source selector. |
| Pane 2: Content Viewer | Middle | Flexible (Largest) | Primary Content Display. Renders the selected file (PDF, Markdown, Video) in a clean, distraction-free environment. |
| Pane 3: Insight/Fabric | Right | 400px (Collapsible) | AI-Generated Analysis. Displays structured, on-demand analysis of the content in the Content Viewer, generated by "Fabric" patterns. |
2.3. Domain Workspace Layout (Agent Studio Mode)
This mode is optimized for the Developer UX, mimicking a modern Integrated Development Environment (IDE) structure with distinct panels for context management, code editing, and execution.
3. Key Interaction Patterns
Interaction design focuses on intuitive access to complex features:
- Video Interaction: Video content in the Content Viewer must feature a synchronized, interactive transcript below the player. This allows users to navigate the video by clicking text, directly linking the visual and textual data streams.
- Ubiquitous Chat: A floating chat bubble overlay provides immediate, context-aware access to the domain agent for questions about the currently open document, ensuring that help and analysis are always one click away.
- Orchestrator Scope: The Global Orchestrator Chat utilizes a clear, multi-select checkbox interface to define the scope of the query, making complex, cross-domain searches intuitive and explicit for the user.