|
| 1 | +# Concept 1: OBSIDIAN — Dark Luxury |
| 2 | + |
| 3 | +> Premium dark IDE with depth, frosted glass, and refined micro-interactions. |
| 4 | +> Reference energy: Cursor IDE + Linear + Arc Browser |
| 5 | +
|
| 6 | +--- |
| 7 | + |
| 8 | +## Design Philosophy |
| 9 | + |
| 10 | +Everything feels **expensive**. Panels have depth through subtle layered shadows. Glass morphism is used tastefully (not overdone). Typography is crisp with generous letter-spacing on labels. Every pixel has intention. The UI melts away when you're coding and emerges when you need it. |
| 11 | + |
| 12 | +--- |
| 13 | + |
| 14 | +## Color System |
| 15 | + |
| 16 | +### Core Palette |
| 17 | +``` |
| 18 | +Background Layer 0 (deepest): #0a0a0c — True dark, nearly black |
| 19 | +Background Layer 1 (surfaces): #111114 — Main editor/panel bg |
| 20 | +Background Layer 2 (elevated): #18181b — Sidebar, cards |
| 21 | +Background Layer 3 (floating): #1f1f23 — Dropdowns, popovers, modals |
| 22 | +Background Layer 4 (hover): #27272b — Hover states on surfaces |
| 23 | +
|
| 24 | +Border (subtle): #ffffff08 — Nearly invisible, just separation |
| 25 | +Border (medium): #ffffff12 — Panel edges |
| 26 | +Border (strong): #ffffff18 — Active/focused panel edges |
| 27 | +
|
| 28 | +Text Primary: #ececef — High contrast, main text |
| 29 | +Text Secondary: #a1a1a6 — Labels, descriptions |
| 30 | +Text Tertiary: #636366 — Placeholder, disabled |
| 31 | +Text Inverted: #0a0a0c — On accent backgrounds |
| 32 | +
|
| 33 | +Accent Primary: #6366f1 — Indigo — buttons, links, focus rings |
| 34 | +Accent Primary Hover: #818cf8 — Lighter indigo |
| 35 | +Accent Secondary: #8b5cf6 — Violet — secondary actions |
| 36 | +Accent Glow: #6366f140 — Glow effect behind accent elements |
| 37 | +
|
| 38 | +Success: #34d399 |
| 39 | +Warning: #fbbf24 |
| 40 | +Error: #f87171 |
| 41 | +Info: #60a5fa |
| 42 | +``` |
| 43 | + |
| 44 | +### Surface Effects |
| 45 | +```css |
| 46 | +/* Frosted glass — used on floating panels (command palette, modals, popovers) */ |
| 47 | +.surface-glass { |
| 48 | + background: rgba(17, 17, 20, 0.72); |
| 49 | + backdrop-filter: blur(24px) saturate(180%); |
| 50 | + border: 1px solid rgba(255, 255, 255, 0.06); |
| 51 | + box-shadow: |
| 52 | + 0 0 0 1px rgba(255, 255, 255, 0.03) inset, |
| 53 | + 0 8px 40px rgba(0, 0, 0, 0.5), |
| 54 | + 0 2px 12px rgba(0, 0, 0, 0.3); |
| 55 | +} |
| 56 | + |
| 57 | +/* Elevated surface — sidebar, panels (no glass, just layered shadow) */ |
| 58 | +.surface-elevated { |
| 59 | + background: #18181b; |
| 60 | + border-right: 1px solid rgba(255, 255, 255, 0.04); |
| 61 | + box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3); |
| 62 | +} |
| 63 | + |
| 64 | +/* Inset surface — input fields, code blocks in chat */ |
| 65 | +.surface-inset { |
| 66 | + background: #0a0a0c; |
| 67 | + border: 1px solid rgba(255, 255, 255, 0.06); |
| 68 | + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4); |
| 69 | +} |
| 70 | + |
| 71 | +/* Accent glow — behind focused/active elements */ |
| 72 | +.glow-accent { |
| 73 | + box-shadow: 0 0 20px rgba(99, 102, 241, 0.15), 0 0 60px rgba(99, 102, 241, 0.05); |
| 74 | +} |
| 75 | +``` |
| 76 | + |
| 77 | +--- |
| 78 | + |
| 79 | +## Typography |
| 80 | + |
| 81 | +``` |
| 82 | +Font Stack: 'Inter', -apple-system, 'Segoe UI', sans-serif |
| 83 | +Mono Font: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace |
| 84 | +Brand Font: 'Audiowide' (keep existing) |
| 85 | +
|
| 86 | +Title Bar Labels: 12px / 500 weight / 0.01em tracking |
| 87 | +Panel Headers: 11px / 600 weight / 0.08em tracking / uppercase |
| 88 | +Section Labels: 11px / 500 weight / 0.04em tracking / uppercase / text-secondary |
| 89 | +Body Text: 13px / 400 weight / editor content, chat messages |
| 90 | +Small Text: 11px / 400 weight / status bar, metadata |
| 91 | +Tiny Text: 10px / 400 weight / keyboard shortcuts, badges |
| 92 | +``` |
| 93 | + |
| 94 | +--- |
| 95 | + |
| 96 | +## Layout Structure |
| 97 | + |
| 98 | +``` |
| 99 | +┌─────────────────────────────────────────────────────────────────────┐ |
| 100 | +│ TITLE BAR (32px) — transparent bg, floating search pill center │ |
| 101 | +├──┬──────────┬───────────────────────────────────────┬──────────────┤ |
| 102 | +│ │ │ │ │ |
| 103 | +│A │ SIDEBAR │ EDITOR AREA │ CHAT │ |
| 104 | +│C │ (240px) │ │ PANEL │ |
| 105 | +│T │ │ ┌─────────────────────────────┐ │ (360px) │ |
| 106 | +│ │ Sections │ │ Tab Bar (36px) │ │ │ |
| 107 | +│B │ with │ ├─────────────────────────────┤ │ Floating │ |
| 108 | +│A │ rounded │ │ │ │ input at │ |
| 109 | +│R │ section │ │ Monaco Editor │ │ bottom │ |
| 110 | +│ │ headers │ │ │ │ │ |
| 111 | +│44│ │ │ │ │ │ |
| 112 | +│px│ │ └─────────────────────────────┘ │ │ |
| 113 | +│ │ │ ┌─────────────────────────────┐ │ │ |
| 114 | +│ │ │ │ Terminal (collapsible) │ │ │ |
| 115 | +│ │ │ └─────────────────────────────┘ │ │ |
| 116 | +├──┴──────────┴───────────────────────────────────────┴──────────────┤ |
| 117 | +│ STATUS BAR (24px) — semi-transparent, blends with bg │ |
| 118 | +└─────────────────────────────────────────────────────────────────────┘ |
| 119 | +``` |
| 120 | + |
| 121 | +### Title Bar — 32px |
| 122 | +- **Background**: transparent (blends with editor bg via `-webkit-app-region: drag`) |
| 123 | +- **Left**: guIDE logo (16px, subtle glow on hover) + menu items with `text-secondary` color |
| 124 | +- **Center**: Floating search pill — `surface-glass` background, rounded-full, 240-440px wide |
| 125 | + - Icon: magnifying glass at 12px, `text-tertiary` |
| 126 | + - Placeholder: project name in `text-tertiary` |
| 127 | + - Shortcut badge: `Ctrl+P` in tiny text |
| 128 | + - **Hover**: border brightens to `#ffffff12`, subtle glow |
| 129 | +- **Right**: Layout toggle icons (PanelLeft, PanelBottom, PanelRight) — 24x24 touch targets |
| 130 | + - Active: `text-primary` + tiny accent dot below |
| 131 | + - Inactive: `text-tertiary` |
| 132 | +- Far right: current filename in `text-tertiary` + brand "guIDE" in `text-tertiary` at 10px |
| 133 | + |
| 134 | +### Activity Bar — 44px (narrower than current 48px) |
| 135 | +- **Background**: `#0a0a0c` (darkest layer) |
| 136 | +- **Icons**: 20px, vertically centered in 40x40 touch targets |
| 137 | +- **Active indicator**: 2px-wide accent-colored pill on left edge (rounded, 50% height of button) |
| 138 | +- **Active icon color**: `text-primary` |
| 139 | +- **Inactive icon color**: `text-tertiary` → `text-secondary` on hover |
| 140 | +- **Hover**: icon brightens + very subtle bg highlight (`#ffffff06`) |
| 141 | +- **Divider**: thin `1px #ffffff08` line between primary and secondary icon groups |
| 142 | +- **Bottom icons**: Settings gear + Account avatar (show actual avatar circle if signed in, otherwise `UserCircle`) |
| 143 | +- **"More Tools" popover**: Opens to right of activity bar as a floating `surface-glass` menu |
| 144 | + |
| 145 | +### Left Sidebar — 240px default (resizable 180-480px) |
| 146 | +- **Background**: `#111114` (layer 1) |
| 147 | +- **No visible border** — separation is achieved through background color difference + shadow |
| 148 | +- **Header**: 32px, panel name in section-label style, no background — just text |
| 149 | + - Right side of header: action buttons (collapse, filter, etc.) appear on hover |
| 150 | +- **Content sections**: Each section (OPEN EDITORS, FOLDERS) has: |
| 151 | + - Collapsible header: 28px, `text-secondary`, chevron icon |
| 152 | + - Section bg: transparent (inherits sidebar) |
| 153 | + - Items: 26px height, 10px left padding + indent levels |
| 154 | + - Selected item: `#6366f115` bg with `1px solid #6366f130` left border |
| 155 | + - Hover: `#ffffff06` bg |
| 156 | +- **Resize handle**: 4px invisible hitzone, shows `accent` color line on hover/drag |
| 157 | +- **Animation**: Width transition `200ms cubic-bezier(0.4, 0, 0.2, 1)` (same as current) |
| 158 | + |
| 159 | +### Editor Area |
| 160 | +- **Tab bar**: 36px height |
| 161 | + - **Active tab**: `#111114` bg (matches editor) + 2px accent top border + `text-primary` |
| 162 | + - **Inactive tab**: `#0a0a0c` bg + `text-tertiary` → hover `text-secondary` |
| 163 | + - **Modified indicator**: Tiny accent dot (not the default circle) |
| 164 | + - **Close button**: appears on hover, 14px X icon |
| 165 | + - **Tab separator**: 1px `#ffffff06` vertical line |
| 166 | + - **New tab button**: `+` at end, `text-tertiary` |
| 167 | + - **Overflow**: horizontal scroll with fade-out edges |
| 168 | +- **Editor bg**: `#0a0a0c` — true dark for maximum contrast with code |
| 169 | +- **Editor gutters**: Numbers in `text-tertiary`, current line number in `text-primary` |
| 170 | +- **Minimap**: Semi-transparent, narrower (60px vs default 80px) |
| 171 | + |
| 172 | +### Terminal / Bottom Panel |
| 173 | +- **Resize handle**: 4px, accent on hover |
| 174 | +- **Tab strip**: 28px — "Terminal", "Problems", "Output" tabs |
| 175 | + - Active: `text-primary` + 2px accent bottom border |
| 176 | + - Inactive: `text-tertiary` |
| 177 | +- **Terminal bg**: `#0a0a0c` (matches editor deep dark) |
| 178 | +- **Terminal toolbar**: right-aligned, icons for new terminal, split, kill, maximize |
| 179 | + |
| 180 | +### Chat Panel — 360px default (resizable 280-560px) |
| 181 | +- **Background**: `#111114` (same as sidebar for symmetry) |
| 182 | +- **No visible border** — shadow separation only: `box-shadow: -4px 0 24px rgba(0,0,0,0.3)` |
| 183 | +- **Header**: 40px — "AI Chat" label + model picker dropdown + collapse button |
| 184 | + - Model picker shows current model name as a pill with Cpu icon |
| 185 | +- **Message area**: Virtualized list |
| 186 | + - **User messages**: Right-aligned, accent bg (`#6366f1` at 15% opacity), rounded-lg, max-width 85% |
| 187 | + - **Assistant messages**: Left-aligned, transparent bg, full width, with subtle `border-left: 2px solid #ffffff08` |
| 188 | + - **Code blocks**: `surface-inset` bg, syntax highlighted, copy button appears on hover |
| 189 | + - **Tool call indicators**: Inline pills with tool icon + name, collapsible |
| 190 | +- **Input area**: Fixed at bottom |
| 191 | + - **Input field**: `surface-inset` bg, rounded-xl, 12-14px text |
| 192 | + - **Send button**: Accent bg circle, arrow-up icon, pulses subtly when ready |
| 193 | + - **Attachment buttons**: appear on hover/focus of input — file, image, context |
| 194 | + - **Above input**: Contextual chip showing current file name if attached |
| 195 | + |
| 196 | +### Status Bar — 24px |
| 197 | +- **Background**: Semi-transparent `rgba(10, 10, 12, 0.85)` with `backdrop-filter: blur(12px)` |
| 198 | +- **Left section**: |
| 199 | + - Git branch icon + name in `text-secondary` |
| 200 | + - Error/warning counts with colored indicators |
| 201 | +- **Center section**: (empty — clean look) |
| 202 | +- **Right section**: |
| 203 | + - GPU usage ring (14px, accent-colored) |
| 204 | + - Tokens/sec counter |
| 205 | + - Cursor position `Ln X, Col Y` in `text-tertiary` |
| 206 | + - Language mode |
| 207 | + - Encoding |
| 208 | +- **All items**: 11px text, `text-secondary` default → `text-primary` on hover |
| 209 | +- **Dividers**: Tiny `#ffffff08` vertical separators between items |
| 210 | + |
| 211 | +### Command Palette |
| 212 | +- **Overlay**: `rgba(0, 0, 0, 0.6)` backdrop |
| 213 | +- **Dialog**: `surface-glass` with extra blur (32px), 560px wide, centered at top 20% |
| 214 | +- **Input**: Large (38px height), 14px text, no visible border, inset bg |
| 215 | +- **Results**: 32px per item, icon + label + description + shortcut |
| 216 | + - Selected: `#6366f115` bg |
| 217 | + - Hover: `#ffffff06` bg |
| 218 | +- **Categories**: "Files" and "Commands" section headers in tiny uppercase |
| 219 | + |
| 220 | +### Welcome Screen (no project open) |
| 221 | +- **Full center area**: Dark gradient bg from center outward |
| 222 | +- **Hero section**: guIDE logo large (48px), brand font, subtle glow animation |
| 223 | +- **Action cards**: 3 cards in a row — "Open Folder", "New Project", "Recent" |
| 224 | + - `surface-elevated` bg, rounded-xl, hover: lift + glow |
| 225 | +- **Recent projects**: List below cards, 3-5 items, click to open |
| 226 | +- **Model section**: Show installed/recommended models with "Use" buttons |
| 227 | +- **Bottom**: Version number, "by Brendan Gray" in `text-tertiary` |
| 228 | + |
| 229 | +--- |
| 230 | + |
| 231 | +## Theme Variables (expanded from current 26 to 40+) |
| 232 | + |
| 233 | +``` |
| 234 | +New variables added: |
| 235 | +--theme-bg-deep // Deepest background (editor, terminal) |
| 236 | +--theme-bg-float // Floating surfaces (popovers, dropdowns) |
| 237 | +--theme-border-subtle // Nearly invisible borders |
| 238 | +--theme-border-strong // Active/focused borders |
| 239 | +--theme-accent-glow // Glow color for focus states |
| 240 | +--theme-accent-muted // Low-opacity accent for backgrounds |
| 241 | +--theme-accent-secondary // Secondary accent color |
| 242 | +--theme-surface-glass // Glass surface base |
| 243 | +--theme-shadow-sm // Small shadow |
| 244 | +--theme-shadow-md // Medium shadow |
| 245 | +--theme-shadow-lg // Large shadow |
| 246 | +--theme-shadow-glow // Accent glow shadow |
| 247 | +--theme-radius-sm // 4px |
| 248 | +--theme-radius-md // 8px |
| 249 | +--theme-radius-lg // 12px |
| 250 | +--theme-radius-xl // 16px |
| 251 | +--theme-radius-full // 9999px (pills) |
| 252 | +--theme-transition-fast // 100ms |
| 253 | +--theme-transition-base // 200ms |
| 254 | +--theme-transition-slow // 300ms |
| 255 | +``` |
| 256 | + |
| 257 | +--- |
| 258 | + |
| 259 | +## Micro-interactions |
| 260 | + |
| 261 | +1. **Panel open/close**: Width animates with spring curve (`cubic-bezier(0.34, 1.56, 0.64, 1)`) |
| 262 | +2. **Activity bar icon**: On hover, icon scales 1.05x with 100ms ease |
| 263 | +3. **Tab close**: Tab slides out and remaining tabs slide to fill gap |
| 264 | +4. **Toast notifications**: Slide in from bottom-right with fade, glass bg |
| 265 | +5. **Command palette**: Fades in with 60ms scale-up from 0.97 to 1.0 |
| 266 | +6. **Theme switch**: CSS transitions on all color properties (200ms), seamless |
| 267 | +7. **Status bar items**: Hover reveals tooltip with detailed info (e.g., GPU: NVIDIA RTX 3060, 12GB) |
| 268 | +8. **Chat messages**: Appear with subtle fade-in + slide-up (100ms) |
| 269 | +9. **Resize handles**: Show a 2px accent line on hover before drag starts |
| 270 | +10. **Search results**: Each result fades in staggered (30ms delay between items) |
| 271 | + |
| 272 | +--- |
| 273 | + |
| 274 | +## Key Differentiators from Current Design |
| 275 | + |
| 276 | +| Current | Obsidian | |
| 277 | +|---|---| |
| 278 | +| `#1e1e1e` background (VS Code gray) | `#0a0a0c` true dark | |
| 279 | +| Hard borders between panels | Shadow-based separation | |
| 280 | +| `#007acc` blue accent | `#6366f1` indigo accent | |
| 281 | +| 48px activity bar | 44px, more refined | |
| 282 | +| Hardcoded hex in components | Everything flows through CSS vars | |
| 283 | +| Flat panel surfaces | Layered depth with multiple bg levels | |
| 284 | +| Standard dropdowns | Glass morphism popovers | |
| 285 | +| Basic hover states | Glow + scale micro-interactions | |
| 286 | +| Segoe UI font | Inter font (sharper on screens) | |
| 287 | +| 10 themes | Expandable to 20+ with new variable system | |
| 288 | + |
| 289 | +--- |
| 290 | + |
| 291 | +## Implementation Priority |
| 292 | + |
| 293 | +1. **ThemeProvider.tsx** — Expand `Theme` interface with new variables, update all 10 themes |
| 294 | +2. **index.css** — New design system tokens, remove hardcoded hex overrides (replace with proper var usage) |
| 295 | +3. **Layout.tsx** — Restructure title bar, activity bar, sidebar shell, resize handles |
| 296 | +4. **StatusBar.tsx** — Redesign with semi-transparent glass bar |
| 297 | +5. **ChatPanel.tsx** — Redesign message bubbles, input area, header |
| 298 | +6. **Editor.tsx / TabBar.tsx** — New tab bar design with accent top borders |
| 299 | +7. **MenuBar.tsx** — Glass dropdown menus |
| 300 | +8. **CommandPalette.tsx** — Glass overlay redesign |
| 301 | +9. **WelcomeScreen.tsx** — Hero section + card layout |
| 302 | +10. **All sidebar panels** — Consistent section headers, item heights, hover states |
0 commit comments