think-bigger/docs/UI/UX Design Document: Advanced Second Brain PKM System.md

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.