Obsidian
A knowledge management tool with a deep, customizable dark canvas (#1E1E2E base for popular themes, or the native #202020) built around Obsidian's signature purple accent (#7C3AED / #9580FF) that appears on links, graph nodes, and active states. The interface is unapologetically power-user — a file tree sidebar, tabbed editor panes, a command palette, and a graph view that renders your entire knowledge base as a spatial network. Typography uses the system default stack at clean sizes, with monospace for markdown source. The overall feel is a productive text editor crossed with a local database — private, offline-first, yours.
Color Tokens
1. Visual Theme & Atmosphere
Obsidian is where knowledge workers build their second brain, and the product design reflects that seriousness. The dark canvas is the default and preferred context — notes read better against dark in long sessions. The graph view is Obsidian's signature visual: a force-directed network of every note and link in your vault, zoomable and explorable. Purple links and nodes are the chromatic anchor of an otherwise monochromatic system. Everything is local, everything is Markdown, and the interface honors that simplicity.
2. Color System
- Canvas: #202020 — native default dark, deeper than most editor themes
- Purple accent: #7C3AED — used for [[WikiLinks]], active graph nodes, selected states
- Link color: #9580FF — a lighter purple for inline note links — the most important interactive element
- Surface layers: #2A2A2A / #303030 — sidebars, modals, command palette
- Ink: #DCDCDC — not pure white — softer on the eyes for long reading/writing sessions
- Graph colors: Purple nodes (linked), gray edges, red for orphan notes (no links)
3. Typography
System fonts for maximum native feel — Obsidian respects that users are in it for hours and native fonts reduce visual friction. Notes render at generous 16px/1.7 line-height for comfortable reading. Headings use size contrast (H1-H6) with weight boost. Code blocks use monospace (Fira Code if installed). Themes can override all of this — Obsidian's CSS variable system is extensible.
4. Components & Patterns
- File explorer: Left sidebar, tree view, folder collapse, note count badges
- Editor tabs: Top bar with open files as tabs, split pane support
- Graph view: Canvas-based force layout, zoom/pan, filter controls, node hover preview
- Command palette: Full-screen fuzzy-search modal (Cmd+P) — primary navigation method
- Backlinks panel: Right sidebar showing all notes that link to the current note
- Callout blocks: Colored notification boxes within notes, custom icon + title
5. Spacing & Layout
Sidebar: 260px default, resizable. Editor: content max-width 700px centered in pane. Graph: full window canvas. Dense, information-rich layout. Tab height: 32px. File tree row height: 28px.
6. Motion & Interaction
Graph view: nodes repel/attract with physics simulation. Command palette: instant filtering as you type. File open: immediate. Link hover: preview popover slides in. Near-instant throughout — designed for keyboard-first power users.
Use this design
Copy the DESIGN.md and paste it at the top of your AI prompt.
Format for