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
48 lines
4.2 KiB
Markdown
48 lines
4.2 KiB
Markdown
# 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.
|