Get Started
Workspace Customization, Sidebar Archetypes & Layouts
Master complete structural control over Blueprint Nexus: choose between 3 sidebar archetypes (Workspace Stack, 48px IDE Rail, Journal Stream), tune row heights across 4 density tiers, build custom tabs, reorder sections with drag-and-drop, prompt the AI Sidebar Architect, and configure custom themes and BYOK models.
Configure your sidebar design archetype, layout density, custom tabs, and visual chrome.Live Interface
1. Choosing a Sidebar Design Archetype
- 1Navigate to Settings > Appearance or click the layout switcher in the sidebar header.
- 2Select 'Workspace Stack' for the classic multi-tab productivity layout with quick-action toolbars and collapsible section drawers.
- 3Select 'IDE Rail' for a developer-centric 48px slim activity rail with a full-height flush tree panel and monospace JetBrains Mono typography.
- 4Select 'Journal Stream' for a continuous, date-grouped chronological stream without tabs or dividers—perfect for daily reflections and notes.
2. Setting Layout Density Modes
- 1In Settings > Appearance > Sidebar Layout Density, select one of the four density tiers:
- 2• Compact (26px row, 13px icon, 11px font): Maximum data throughput for power users and deep navigation trees.
- 3• Standard (30px row, 14px icon, 12px font): Balanced default desktop ergonomics.
- 4• Comfortable (36px row, 16px icon, 13.5px font): Generous touch targets and clean visual breathing room.
- 5• Expansive (42px row, 18px icon, 15px font): High-legibility scale for large displays, tablets, and presentations.
3. Custom Workspace Tabs, Section Reordering & Chrome
- 1Click '+ New Tab' on the sidebar tab strip to create a dedicated context (e.g. 'Sprint Q3', 'Client Work', 'System Specs').
- 2Drag and drop any section header (Intelligence, Graph, Documents, Goals, Tasks, Files, Agents) to reorder sections.
- 3Hover over section titles and click the collapse chevron to tuck away less frequently used drawers.
- 4Toggle visual chrome in Settings > Appearance: show/hide icons, status badges, and timestamps, or switch between solid filled and outline glyphs.
4. Prompting the AI Sidebar Architect
- 1Open Settings > Appearance > AI Sidebar Architect chat panel.
- 2Type a natural language prompt such as: 'Reorganize my sidebar for a senior backend engineer with an IDE rail, docs on top, and agents below'.
- 3Review the proposed JSON layout structure and live visual preview.
- 4Click 'Apply Proposed Design' to immediately commit the schema to your active workspace.
5. Theming Engine & Bring-Your-Own-Key (BYOK) Freedom
- 1Toggle between Obsidian Dark and Warm Ivory Light themes from the header or customize exact color tokens in Appearance settings.
- 2Navigate to Settings > Models to input private API keys for OpenAI, Anthropic Claude, Google Gemini, Groq, DeepSeek, Mistral, xAI, or Together AI.
- 3Set custom Base URLs to connect local Ollama models or private proxy endpoints with zero vendor lock-in.
Sidebar & Workspace Customization Reference
Core architectural capabilities in every workspace
3 ArchetypesWorkspace Stack, 48px IDE Rail, Journal Continuous Stream
4 Density ModesCompact (26px), Standard (30px), Comfortable (36px), Expansive (42px)
Custom TabsIsolated sprint, client, and project navigation contexts
AI ArchitectNatural language conversational sidebar generation
Chrome TogglesBadges, icons, timestamps, solid vs. outline styles
Theme EngineObsidian Dark, Warm Ivory, and real-time live token sync
Technical Specifications & Code Snippets
// Sidebar Document & Design TypeScript Schema (typescript)
export type SidebarDensity = "compact" | "standard" | "comfortable" | "expansive";
export interface SidebarDesignConfig {
id: "productivity" | "ide" | "journal" | string;
name: string;
shell: "stack" | "rail" | "journal";
fontFamily: "Plus Jakarta Sans" | "JetBrains Mono" | "Outfit Sans";
density: SidebarDensity;
chrome: {
showIcons: boolean;
showBadges: boolean;
showMeta: boolean;
iconStyle: "outline" | "filled";
};
}
export interface SidebarDocument {
version: 1;
tabs: Array<{
id: string;
label: string;
icon: string;
sections: Array<{
id: string;
title: string;
isCollapsed?: boolean;
order: number;
}>;
}>;
}Pro Tips & Architectural Best Practices
•Use the 48px IDE Rail when working on code or terminal tasks to maximize horizontal editor real estate.
•Create separate custom tabs for active sprint milestones to keep related specs, task boards, and graph views one click away.
•Use Compact density if managing large knowledge graphs with 20+ active documents and entities.
Have questions about this workflow?
Use our interactive search console to filter through all guides and articles.