Design System

🖌️ Design System & UI Architecture

VisualMark Studio features a bespoke, premium dark-mode design system called Obsidian Glow. It is engineered to feel like a high-end developer IDE, drawing inspiration from modern tools like VS Code, Linear, and Raycast.

---

🎨 Color Palette & Tokens

Primary Brand Colors

--primary: #6366f1;        /* Main brand color (Electric Indigo) */
--primary-hover: #4f46e5;  /* Button hover and active state */
--primary-light: #e0e7ff;  /* Subtle tinted background / highlights */
--primary-dark: #4338ca;   /* Deep indigo borders and badges */
--accent-cyan: #06b6d4;    /* Tech / API highlights */

Semantic Status Colors

--success: #10b981;        /* Passed tests, clean health scores, badges */
--success-light: #d1fae5;
--warning: #f59e0b;        /* Linter warnings, amber notices */
--warning-light: #fef3c7;
--error: #ef4444;          /* Syntax errors, failed tests */
--error-light: #fee2e2;
--info: #3b82f6;           /* Info notifications, tips */

Dark Mode & Canvas Surfaces

--bg-app: #090d16;         /* Deep canvas black-blue */
--bg-surface: #0f172a;     /* Sidebar & panel backgrounds */
--bg-elevated: #1e293b;    /* Cards, dropdowns, modal windows */
--border-subtle: #1e293b;  /* Subtle section dividers */
--border-focus: #6366f1;   /* Active selection and tab borders */

Text Hierarchy

--text-primary: #f8fafc;   /* High contrast headings and body */
--text-secondary: #94a3b8; /* Subtitles, meta info, labels */
--text-muted: #64748b;     /* Inactive tabs, line numbers, placeholders */

---

✍️ Typography

Element	Font Family	Size	Weight
App Headings	Inter, -apple-system, sans-serif	18px – 24px	600 / 700
Body & UI Text	Inter, -apple-system, sans-serif	13px – 14px	400 / 500
Code Editor	JetBrains Mono, Fira Code, monospace	13.5px	400 / 500
Status Bar & Meta	Inter, monospace	11px – 12px	500

---

🪟 Component Patterns

1. Frameless Titlebar

• Custom obsidian drag region (-webkit-app-region: drag).
• Interactive menu items (File, Edit, View, Studios, Help).
• Centered quick-search HUD bar (Ctrl+K).
• Native Windows window controls (Minimize, Maximize, Close).

2. Tab Bar & Groups

• Draggable and reorderable document tabs with file type indicators.
• Studio tabs rendered with distinct neon icon accents (badges, diagrams, tables, etc.).
• Unsaved indicator dot that shifts on save.

3. Glassmorphism HUD Toolbar

• Floating contextual toolbar that fades in whenever text is highlighted in the Monaco editor.
• Frosted glass backdrop blur (backdrop-filter: blur(12px)).
• Keyboard-accessible shortcuts for rapid Markdown formatting.

---

Return to Home or continue to Testing & QA Guide.