Obsidian DESIGN.md

Markdown knowledge base with a dark, graph-centric aesthetic — deep charcoal surfaces, amethyst purple accents, and linked-thought-first UI.

1. Visual Theme & Atmosphere

Obsidian is a second brain in a dark, minimal interface. The app is deeply customizable but its default aesthetic is dark and focused: charcoal surfaces that disappear around markdown text, a purple accent that marks links and connections, and a graph view that turns notes into a constellation of knowledge. The UI stays out of the way, treating the editor as sacred space.

2. Color Palette & Roles

3. Typography Rules

css--font-text: 'Inter', -apple-system, sans-serif;
--font-monospace: 'JetBrains Mono', 'Fira Code', monospace;
--font-size-xs: 11px;
--font-size-sm: 13px;
--font-size-base: 16px;
--font-size-md: 18px;
--font-size-lg: 22px;
--font-size-xl: 26px;
--font-size-h1: 26px;
--font-size-h2: 22px;
--font-size-h3: 18px;
--font-weight-regular: 400;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.3;
--line-height-base: 1.6;
--line-height-editor: 1.75;

4. Component Stylings

css/* Editor Area */
.editor {
  padding: 40px 80px;
  max-width: 750px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.75;
  color: #DCDDDE;
}

/* Wiki Link */
.wiki-link {
  color: #7C6DF5;
  text-decoration: none;
  background: rgba(124,109,245,0.08);
  border-radius: 3px;
  padding: 0 2px;
}
.wiki-link:hover { background: rgba(124,109,245,0.18); }
.wiki-link--unresolved { color: rgba(124,109,245,0.5); }

/* Tag */
.tag {
  color: #E6A817;
  font-size: 0.9em;
  text-decoration: none;
}
.tag:hover { text-decoration: underline; }

/* Inline Code */
.inline-code {
  background: #282C34;
  border-radius: 3px;
  padding: 2px 6px;
  font-family: var(--font-monospace);
  font-size: 0.9em;
  color: #E06C75;
}

/* Code Block */
.code-block {
  background: #282C34;
  border-radius: 6px;
  padding: 16px;
  font-family: var(--font-monospace);
  font-size: 14px;
  line-height: 1.6;
  border-left: 3px solid #7C6DF5;
  overflow-x: auto;
}

/* File Tree Item */
.file-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  color: #888888;
  transition: background 0.08s, color 0.08s;
}
.file-item:hover { background: #2D2D2D; color: #DCDDDE; }
.file-item--active { background: rgba(124,109,245,0.12); color: #7C6DF5; }

/* Command Palette */
.command-palette {
  background: #2D2D2D;
  border: 1px solid #383838;
  border-radius: 10px;
  width: 560px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.7);
  overflow: hidden;
}
.command-input {
  background: transparent;
  border: none;
  padding: 14px 16px;
  font-size: 15px;
  color: #DCDDDE;
  width: 100%;
}
.command-input:focus { outline: none; }
.command-result {
  padding: 8px 16px;
  font-size: 13px;
  color: #DCDDDE;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}
.command-result:hover,
.command-result--active { background: rgba(124,109,245,0.15); }

5. Layout Principles

6. Depth & Elevation

css.shadow-palette { box-shadow: 0 16px 48px rgba(0,0,0,0.7); }
.shadow-modal { box-shadow: 0 12px 40px rgba(0,0,0,0.6); }

7. Do's and Don'ts

Do:

• Keep the editor centered at max 750px with generous padding
• Color headings differently (H1 purple, H2 blue) for hierarchy
• Wiki links have a subtle purple background tint
• The command palette is the primary navigation — style it prominently

Don't:

• Don't add heavy chrome around the editor — notes need full focus
• Don't use bright accent colors for anything other than links and tags
• Don't show toolbar buttons by default — they appear on selection only

8. Responsive Behavior

9. Agent Prompt Guide

You are designing for Obsidian — a markdown knowledge base.
Use deep dark surfaces (#1E1E1E) with the editor centered at max 750px.
Amethyst purple (#7C6DF5) marks all wiki links, active file, and command palette selections.
H1 headings are colored purple, H2 blue — using CSS color per heading level.
Tags are golden-orange (#E6A817); inline code is on a dark code background.
The command palette is a floating dark modal with instant-search results.
Tone is focused, minimal, dark, and note-taking-first.