Design: apply unified design system

- Add design tokens (radius, shadow, transition, z-index, spacing, font-size)
- Rename border/text tokens to match design system naming
- Read macOS accent color via NSColor, inject into webview with live updates
- Migrate cursor highlight from hardcoded blue to accent-subtle
- Create shared Button component, roll out across all 9 dialogs
- Replace ~300 hardcoded values with design tokens across 70+ components
- Remove old hover/cursor tokens, clean up hardcoded colors
- Website: swap Inter → Geist Sans, warm up dark palette, add light mode
- Add empty folder state to file list

Author: vdavid

.interface-design/system.md

@@ -33,12 +33,6 @@ The folder color setting (System Settings > Appearance > Folder color) is separa
 accent (theme) color for interactive UI chrome. This matches macOS intent: accent is for controls, folder tint is
 cosmetic.
 
-**Migration note:** The existing `--color-button-hover` and `--color-bg-hover` tokens (hardcoded blue-tinted rgba
-values) will be removed. Interactive hover states migrate to `--color-accent-subtle` (accent-derived). Neutral hover
-states (non-interactive surfaces) migrate to `--color-bg-tertiary`. Affected components: ModalDialog, Notification,
-DualPaneExplorer, SortableHeader, ShareBrowser, NetworkBrowser, viewer page, CommandPalette, and settings components
-(9 files, ~17 occurrences).
-
 **Website:** Mustard yellow `#ffc206` is the brand accent. Used for CTAs, links, and emphasis. Hover: `#ffd23f`. Glow:
 `rgba(255, 194, 6, 0.4)`.
 
@@ -165,9 +159,6 @@ to anchor the file list below them. Kept as a separate token rather than reusing
 --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 ```
 
-**Migration note:** The current code includes `'Segoe UI'` in the font stack (a Windows font). Remove it — Cmdr is
-macOS-only.
-
 **Type scale.** Fixed `px`, not `rem` — the app scales with macOS display settings, not browser font preferences.
 `html { font-size: 16px }` is hardcoded to establish `1rem = 16px`. The body inherits this. The tokens below are for
 explicit use on specific elements, not as a global cascade.
@@ -493,9 +484,9 @@ both the UI indicator and the background process.
 
 ### Empty states (app)
 
-Currently missing — no visual feedback when a folder is empty. Should show a centered, single-line message in
-`--color-text-tertiary` at `--font-size-sm`: "Empty folder". No icon, no illustration — keep it as quiet as the rest of
-the chrome.
+Centered, single-line message in `--color-text-tertiary` at `--font-size-sm`: "Empty folder". No icon, no
+illustration — keep it as quiet as the rest of the chrome. Shown when a directory exists and has loaded successfully but
+contains no entries.
 
 ### Notifications/toasts (app)
 
@@ -533,7 +524,3 @@ Not shared tokens — shared _decisions_:
 - Fast enough to feel mechanical. Transitions serve confirmation ("I heard your click"), not decoration.
 - Dark mode is the assumed default, not a bolt-on. Light mode is tuned independently, not auto-inverted.
 
----
-
-_This document contains "Migration note" annotations that reference the pre-migration state. Remove them once the
-migration plan is fully executed — this file should be a clean reference, not a changelog._

apps/desktop/.stylelintrc.mjs

@@ -20,7 +20,7 @@ export default {
         'declaration-property-value-disallowed-list': {
             '/.*/': ['/var\\(--[\\w-]+\\s*,/'],
         },
-        'custom-property-pattern': '^(color|spacing|font)-.+',
+        'custom-property-pattern': '^(color|spacing|font|radius|shadow|transition|z)-.+',
         'declaration-block-no-duplicate-custom-properties': true,
         'selector-class-pattern': null,
         'no-descending-specificity': null,

apps/desktop/coverage-allowlist.json

@@ -1,6 +1,7 @@
 {
     "$comment": "Files listed here are exempt from coverage thresholds. Each entry should include a reason. Remove entries as you add tests.",
     "files": {
+        "accent-color.ts": { "reason": "Depends on Tauri invoke and listen APIs" },
         "ui/AlertDialog.svelte": { "reason": "Simple UI modal for informational messages" },
         "ui/dialog-registry.ts": { "reason": "Pure constant and type definition, no logic to test" },
         "ui/ModalDialog.svelte": { "reason": "Shared modal dialog wrapper, depends on DOM APIs and Tauri commands" },

apps/desktop/src-tauri/Cargo.toml

@@ -84,10 +84,12 @@ urlencoding = "2.1.3"
 objc2 = { version = "0.6", features = ["std"] }
 objc2-foundation = { version = "0.3", features = [
     "NSURL", "NSString", "NSDictionary", "NSDate", "NSArray", "NSValue", "NSError",
-    "NSFileManager",
+    "NSFileManager", "NSNotification",
 ] }
 mdns-sd = { version = "0.17", features = ["logging"] }
-objc2-app-kit = { version = "0.3", features = ["NSDragging", "NSDraggingItem", "NSImage"] }
+objc2-app-kit = { version = "0.3", features = [
+    "NSDragging", "NSDraggingItem", "NSImage", "NSColor", "NSColorSpace",
+] }
 block2 = "0.6"
 smb = "0.11.1"
 smb-rpc = "=0.11.1"

apps/desktop/src-tauri/src/accent_color.rs

@@ -0,0 +1,72 @@
+//! macOS accent color reader.
+//!
+//! Reads the user's system accent color via `NSColor.controlAccentColor()` and
+//! observes `NSSystemColorsDidChangeNotification` to emit live updates.
+
+use std::ptr::NonNull;
+
+use log::{info, warn};
+use objc2_app_kit::{NSColor, NSColorSpace};
+use objc2_foundation::{NSNotification, NSNotificationCenter, NSString};
+use tauri::{AppHandle, Emitter, Runtime};
+
+/// macOS default blue accent (light mode fallback).
+const FALLBACK_ACCENT_HEX: &str = "#007aff";
+
+/// Reads the current system accent color and returns it as a hex string (for example, `#007aff`).
+/// Falls back to macOS default blue if the color cannot be read.
+fn read_accent_color() -> String {
+    let accent = NSColor::controlAccentColor();
+
+    // Convert to sRGB color space so we get predictable RGB components.
+    let srgb = NSColorSpace::sRGBColorSpace();
+    let Some(converted) = accent.colorUsingColorSpace(&srgb) else {
+        warn!("Could not convert accent color to sRGB, using fallback");
+        return FALLBACK_ACCENT_HEX.to_owned();
+    };
+
+    let r = converted.redComponent();
+    let g = converted.greenComponent();
+    let b = converted.blueComponent();
+
+    // Clamp to [0, 1] and convert to 8-bit hex
+    let r8 = (r.clamp(0.0, 1.0) * 255.0).round() as u8;
+    let g8 = (g.clamp(0.0, 1.0) * 255.0).round() as u8;
+    let b8 = (b.clamp(0.0, 1.0) * 255.0).round() as u8;
+
+    format!("#{r8:02x}{g8:02x}{b8:02x}")
+}
+
+/// Tauri command: returns the current macOS accent color as a hex string.
+#[tauri::command]
+pub fn get_accent_color() -> String {
+    read_accent_color()
+}
+
+/// Starts observing `NSSystemColorsDidChangeNotification`.
+/// Emits `accent-color-changed` with the new hex value whenever the user
+/// changes their accent color in System Settings.
+pub fn observe_accent_color_changes<R: Runtime>(app_handle: AppHandle<R>) {
+    let initial = read_accent_color();
+    info!("System accent color: {initial}");
+
+    let center = NSNotificationCenter::defaultCenter();
+    let name = NSString::from_str("NSSystemColorsDidChangeNotification");
+
+    // Use block-based observer so we don't need a selector or ObjC class.
+    // The block captures the app handle to emit Tauri events.
+    let block = block2::RcBlock::new(move |_notification: NonNull<NSNotification>| {
+        let hex = read_accent_color();
+        info!("Accent color changed: {hex}");
+        if let Err(e) = app_handle.emit("accent-color-changed", &hex) {
+            warn!("Failed to emit accent-color-changed event: {e}");
+        }
+    });
+
+    unsafe {
+        center.addObserverForName_object_queue_usingBlock(Some(&name), None, None, &block);
+    }
+
+    // The observer is retained by NSNotificationCenter for the lifetime of the app.
+    // We intentionally never remove it because we want updates for the entire session.
+}

apps/desktop/src-tauri/src/lib.rs

@@ -51,6 +51,8 @@ use nusb as _;
 mod ignore_poison;
 pub use ignore_poison::IgnorePoison;
 
+#[cfg(target_os = "macos")]
+mod accent_color;
 mod ai;
 pub mod benchmark;
 mod commands;
@@ -158,6 +160,10 @@ pub fn run() {
             #[cfg(target_os = "macos")]
             drag_image_detection::install(app.handle().clone());
 
+            // Observe system accent color changes and emit events to frontend
+            #[cfg(target_os = "macos")]
+            accent_color::observe_accent_color_changes(app.handle().clone());
+
             // Initialize font metrics for default font (system font at 12px)
             font_metrics::init_font_metrics(app.handle(), "system-400-12");
 
@@ -552,6 +558,11 @@ pub fn run() {
             stubs::network::list_shares_with_credentials,
             #[cfg(not(target_os = "macos"))]
             stubs::network::mount_network_share,
+            // Accent color command (macOS reads system color, others return fallback)
+            #[cfg(target_os = "macos")]
+            accent_color::get_accent_color,
+            #[cfg(not(target_os = "macos"))]
+            stubs::accent_color::get_accent_color,
             // Permission commands (platform-specific)
             #[cfg(target_os = "macos")]
             permissions::check_full_disk_access,

apps/desktop/src-tauri/src/stubs/accent_color.rs

@@ -0,0 +1,10 @@
+//! Accent color stub for Linux/non-macOS platforms.
+//!
+//! Returns the macOS default blue as fallback since system accent color
+//! detection is not available outside macOS.
+
+/// Returns the default accent color (macOS blue) on non-macOS platforms.
+#[tauri::command]
+pub fn get_accent_color() -> String {
+    "#007aff".to_owned()
+}

apps/desktop/src-tauri/src/stubs/mod.rs

@@ -4,6 +4,7 @@
 //! on Linux for E2E testing purposes. They return sensible defaults that
 //! enable the core file manager functionality to work.
 
+pub mod accent_color;
 pub mod mtp;
 pub mod network;
 pub mod permissions;

apps/desktop/src/app.css

@@ -1,15 +1,10 @@
-/* 
- * We use semantic CSS classes with CSS custom properties instead.
- */
-
-/* =============================================================================
-   Design tokens - CSS Custom Properties
-   
-   These variables serve as the single source of truth for all colors, spacing,
-   and typography. They can be used in both scoped CSS and Tailwind classes.
-   
-   Future: Can be modified at runtime for user theme customization.
-   ============================================================================= */
+/* Design tokens for the Cmdr desktop app.
+ * See /.interface-design/system.md for the design system specification.
+ *
+ * These variables serve as the single source of truth for all colors, spacing,
+ * and typography. They can be used in both scoped CSS and Tailwind classes.
+ *
+ * Future: Can be modified at runtime for user theme customization. */
 
 :root {
     /* === Backgrounds === */
@@ -19,24 +14,19 @@
     --color-bg-header: #f0f0f0;
 
     /* === Borders === */
-    --color-border-primary: #ccc;
+    --color-border-strong: #bbb;
     --color-border: #ddd;
-    --color-border-secondary: #e0e0e0;
+    --color-border-subtle: #e8e8e8;
 
     /* === Text === */
-    --color-text-primary: #000000;
+    --color-text-primary: #1a1a1a;
     --color-text-secondary: #666666;
     --color-text-tertiary: #888888;
-    --color-text-muted: #999999;
 
     /* === Interactive States === */
-    --color-button-hover: rgba(0, 120, 215, 0.08);
-    --color-bg-hover: rgba(0, 120, 215, 0.08);
-    --color-cursor-focused-bg: #88cbff;
-    --color-cursor-focused-fg: #ffffff;
-    --color-cursor-unfocused-bg: rgba(104, 128, 147, 0.1);
-    --color-accent: #0078d4;
-    --color-accent-hover: #005a9e;
+    --color-accent: #007aff;
+    --color-accent-hover: color-mix(in oklch, var(--color-accent), white 15%);
+    --color-accent-subtle: color-mix(in oklch, var(--color-accent), transparent 85%);
 
     /* === Semantic Colors === */
     --color-allow: #2e7d32;
@@ -63,14 +53,44 @@
     --spacing-xxs: 2px;
     --spacing-xs: 4px;
     --spacing-sm: 8px;
-    --spacing-md: 16px;
+    --spacing-md: 12px;
+    --spacing-lg: 16px;
+    --spacing-xl: 24px;
+    --spacing-2xl: 32px;
 
     /* === Typography === */
-    --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+    --font-system: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
     --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-    --font-size-xs: 12px;
+    --font-size-xs: 10px;
     --font-size-sm: 12px;
-    --font-size-base: 16px;
+    --font-size-md: 14px;
+    --font-size-lg: 16px;
+    --font-size-xl: 20px;
+
+    /* === Border radius === */
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 8px;
+    --radius-full: 9999px;
+
+    /* === Shadows (light) === */
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
+    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.15);
+    --shadow-focus: 0 0 0 3px var(--color-accent-subtle);
+
+    /* === Transitions === */
+    --transition-fast: 100ms ease;
+    --transition-base: 150ms ease;
+    --transition-slow: 200ms ease;
+
+    /* === Z-index scale === */
+    --z-base: 0;
+    --z-sticky: 10;
+    --z-dropdown: 100;
+    --z-overlay: 200;
+    --z-modal: 300;
+    --z-notification: 400;
 }
 
 /* Dark Mode - automatically applied when user's system prefers dark mode */
@@ -83,24 +103,19 @@
         --color-bg-header: #252525;
 
         /* === Borders === */
-        --color-border-primary: #444444;
-        --color-border: #555555;
-        --color-border-secondary: #3a3a3a;
+        --color-border-strong: #555555;
+        --color-border: #444444;
+        --color-border-subtle: #333333;
 
         /* === Text === */
-        --color-text-primary: #ffffff;
+        --color-text-primary: #e8e8e8;
         --color-text-secondary: #aaaaaa;
         --color-text-tertiary: #888888;
-        --color-text-muted: #808080;
 
         /* === Interactive States === */
-        --color-button-hover: rgba(100, 180, 255, 0.12);
-        --color-bg-hover: rgba(100, 180, 255, 0.12);
-        --color-cursor-focused-bg: #0a50d0;
-        --color-cursor-focused-fg: #ffffff;
-        --color-cursor-unfocused-bg: rgba(10, 80, 208, 0.1);
-        --color-accent: #4da3ff;
-        --color-accent-hover: #6eb5ff;
+        --color-accent: #0a84ff;
+        --color-accent-hover: color-mix(in oklch, var(--color-accent), white 10%);
+        --color-accent-subtle: color-mix(in oklch, var(--color-accent), transparent 85%);
 
         /* === Semantic Colors === */
         --color-allow: #66bb6a;
@@ -116,6 +131,11 @@
         /* === Search Highlight === */
         --color-highlight: rgba(255, 213, 100, 0.9);
         --color-highlight-active: rgba(255, 150, 100, 0.9);
+
+        /* === Shadows (dark) === */
+        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
+        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
+        --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
     }
 }
 
@@ -353,7 +373,6 @@ body {
     -webkit-user-select: none;
     /* Force default cursor everywhere */
     cursor: default;
-    font-size: var(--font-size-base);
 }
 
 body {

apps/desktop/src/app.html

@@ -33,7 +33,7 @@
                 height: 100%;
                 background-color: var(--bg);
                 color: var(--text);
-                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+                font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
             }
 
             #loading-screen {