refactor(ui): migrate PlanningDiffView to ModalShell

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

docs/superpowers/plans/2026-05-30-ui-normalization-visualcheck.md

@@ -0,0 +1,36 @@
+# UI Normalization — Visual Check
+
+Run the app and walk each surface. Lane B intentionally shifted some values (12px→13px, 9px→10px, 16px→18px, off-palette colors folded to the palette), so small differences are expected — you're checking nothing looks *broken*.
+
+## Global
+- [ ] All text renders in **Inter Tight** (sans), not Segoe UI. Labels that were previously "off" (Settings field labels) now match.
+- [ ] Mono text (chips, log lines, file paths, eyebrows, titlebar titles) still renders in JetBrains Mono.
+
+## Main window
+- [ ] Status-bar connection dot color: online = moss green, reconnecting = peat/amber, offline = blood red.
+- [ ] Islands, task rows, chips, agent strips, terminal all look unchanged.
+
+## Task row
+- [ ] Schedule flyout (the date popup) renders with a visible border (was a broken/missing `BorderBrush` key — now `LineBrush`).
+
+## Modals — now wrapped in ModalShell (check titlebar drag, ✕ close, footer buttons)
+- [ ] **Settings** — titlebar "SETTINGS", drag works, ✕ closes, Cancel/Save footer. Tabs (General/Worktrees/Files/Prime Claude) intact.
+- [ ] **List settings** — Delete (left) + Cancel/Save (right) footer; section panels intact.
+- [ ] **Merge** — task summary + action buttons.
+- [ ] **About** — version/data/logs/config labels.
+- [ ] **Unfinished planning** — body text + primary action.
+- [ ] **Repo import** — toolbar at top of body, repo list scrolls, footer.
+- [ ] **Worktrees overview** — rows render; force-remove/phantom text is red (StatusError); state badge text legible. NOTE: window decorations changed to borderless (ModalShell draws the border) — confirm it still looks right.
+- [ ] **Diff modal** — diff text mono, add/del colors, merge button in footer.
+- [ ] **Conflict resolution** — now ModalShell; conflict list mono; error text red.
+
+## Not wrapped in ModalShell (intentional — distinct chrome)
+- [ ] **Worktree modal** (the big 1100×720 acrylic-blur diff window) — unchanged look, fonts slightly normalized.
+- [ ] **Planning diff view** (embedded) — diff renders, mono font, warning text red.
+
+## Date picker
+- [ ] Selected day: accent background with light text (was hardcoded white → TextBrush).
+
+## If something looks wrong
+- Font/size off → check the snap mapping in `2026-05-30-ui-normalization.md` (11→Mono=11, 12→Body=13).
+- A modal's layout broke → that modal's body may have coupled to the old Grid rows; revert just that file's ModalShell wrap and keep only the token changes (the fallback noted in the plan).

docs/superpowers/plans/2026-05-30-ui-normalization.md

@@ -0,0 +1,473 @@
+# UI Normalization Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Make the design tokens the single source of truth for every visual value in the Avalonia UI, remove duplicated styles, and add a reusable `ModalShell` control for the copy-pasted modal chrome.
+
+**Architecture:** Establish global control defaults in `App.axaml`, expand/repoint brushes in `Tokens.axaml`, promote shared styles into `IslandStyles.axaml`, then mechanically migrate every view to reference tokens (snapping stray values to the nearest token per "lane B"). Off-palette colors fold into the existing palette. A new `ModalShell` templated control replaces the per-modal titlebar/border/footer markup.
+
+**Tech Stack:** .NET 8, Avalonia 12 (Fluent theme, dark variant), compiled XAML (`x:DataType`), CommunityToolkit.Mvvm.
+
+**Verification model:** There are no unit tests for XAML. The "test" for every task is a clean build:
+- `dotnet build src/ClaudeDo.App/ClaudeDo.App.csproj` (compiles Ui + Data; validates all StaticResource keys and compiled bindings)
+
+Build with the `.csproj` directly — `.slnx` requires .NET 9 and will fail on this machine (.NET 8).
+
+**Normalization rules (apply everywhere unless a task says otherwise):**
+
+Font sizes — replace every `FontSize="N"` literal with the token whose value it snaps to:
+| literal | token |
+|---|---|
+| 9 | `{StaticResource FontSizeEyebrow}` (10) |
+| 10 | `{StaticResource FontSizeEyebrow}` (10) |
+| 11 | `{StaticResource FontSizeMono}` (11) |
+| 12 | `{StaticResource FontSizeBody}` (13) |
+| 13 | `{StaticResource FontSizeBody}` (13) |
+| 14 | `{StaticResource FontSizeTaskTitle}` (14) |
+| 16 | `{StaticResource FontSizeH3}` (18) |
+| 18 | `{StaticResource FontSizeH3}` (18) |
+| 24 | `{StaticResource FontSizeH2}` (24) |
+| 32 | `{StaticResource FontSizeH1}` (32) |
+
+Spacing — modal body padding literals `16` and `20` snap to `18`; keep other axis values mapped to the nearest of SpaceXs=4/SpaceSm=8/SpaceMd=12/SpaceLg=14/SpaceXl=18/Space2Xl=24. Leave values that already equal a token as plain numbers (do **not** churn every margin into a resource ref — only modal body padding is standardized).
+
+Corner radius — `4` → `6`; TextBox inputs use `8`.
+
+Colors — fold off-palette to palette:
+| literal / named | replacement |
+|---|---|
+| `#4CAF50` (online dot) | `{DynamicResource StatusRunningBrush}` |
+| `#FFA726` (reconnecting dot) | `{DynamicResource StatusReviewBrush}` |
+| `#EF5350` (offline / phantom) | `{DynamicResource StatusErrorBrush}` |
+| `OrangeRed`, `Orange` | `{DynamicResource BloodBrush}` |
+| `White` (badge / danger text) | `{DynamicResource TextBrush}` |
+| `White` (on accent primary button) | `{DynamicResource DeepBrush}` |
+| `#FF080C0B` (terminal bg) | `{DynamicResource VoidBrush}` |
+| `#0DFFFFFF` (island hairline) | `{DynamicResource HairlineOverlayBrush}` |
+
+---
+
+## Phase 1 — Foundation
+
+### Task 1: Add new brushes & repoint badges in Tokens.axaml
+
+**Files:**
+- Modify: `src/ClaudeDo.Ui/Design/Tokens.axaml`
+
+- [ ] **Step 1: Add named tint, hairline brushes**
+
+In the BRUSHES section (after the Status*Brush block ending ~line 85), add:
+
+```xml
+  <!-- Subtle white overlay (island hairline border) -->
+  <SolidColorBrush x:Key="HairlineOverlayBrush" Color="#0DFFFFFF" />
+
+  <!-- Status tints (12% fill / 30% border of the status hue) — reused by chips & agent strips -->
+  <SolidColorBrush x:Key="RunningTintBrush"       Color="#1F7C9166" />
+  <SolidColorBrush x:Key="RunningTintBorderBrush" Color="#4C7C9166" />
+  <SolidColorBrush x:Key="ReviewTintBrush"        Color="#1FD4A574" />
+  <SolidColorBrush x:Key="ReviewTintBorderBrush"  Color="#4CD4A574" />
+  <SolidColorBrush x:Key="ErrorTintBrush"         Color="#1FC87060" />
+  <SolidColorBrush x:Key="ErrorTintBorderBrush"   Color="#4CC87060" />
+  <SolidColorBrush x:Key="QueuedTintBrush"        Color="#1F8B9D7A" />
+  <SolidColorBrush x:Key="QueuedTintBorderBrush"  Color="#4C8B9D7A" />
+```
+
+- [ ] **Step 2: Build to verify tokens parse**
+
+Run: `dotnet build src/ClaudeDo.App/ClaudeDo.App.csproj`
+Expected: PASS (no errors).
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/ClaudeDo.Ui/Design/Tokens.axaml
+git commit -m "feat(ui): add named tint and hairline overlay brush tokens"
+```
+
+---
+
+### Task 2: Global control defaults in App.axaml
+
+**Files:**
+- Modify: `src/ClaudeDo.App/App.axaml`
+
+- [ ] **Step 1: Add Window default style**
+
+Inside `<Application.Styles>`, after `<StyleInclude Source="avares://ClaudeDo.Ui/Design/IslandStyles.axaml" />` and before the ListBoxItem styles, add:
+
+```xml
+        <!-- Global defaults: every Window inherits Inter Tight + body size.
+             Controls that need mono opt in via their own class/style. -->
+        <Style Selector="Window">
+            <Setter Property="FontFamily" Value="{DynamicResource SansFont}" />
+            <Setter Property="FontSize" Value="{DynamicResource FontSizeBody}" />
+            <Setter Property="Foreground" Value="{DynamicResource TextBrush}" />
+        </Style>
+```
+
+(FontFamily/FontSize/Foreground are inherited properties in Avalonia, so setting them on the Window root propagates to all descendant text controls.)
+
+- [ ] **Step 2: Build**
+
+Run: `dotnet build src/ClaudeDo.App/ClaudeDo.App.csproj`
+Expected: PASS.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/ClaudeDo.App/App.axaml
+git commit -m "feat(ui): set global Inter Tight font default on all windows"
+```
+
+---
+
+### Task 3: Promote shared styles into IslandStyles.axaml
+
+**Files:**
+- Modify: `src/ClaudeDo.Ui/Design/IslandStyles.axaml`
+
+- [ ] **Step 1: Add shared modal styles**
+
+At the end of the `<Styles>` element (before the closing `</Styles>` at line ~901), add:
+
+```xml
+  <!-- ============================================================ -->
+  <!-- SHARED MODAL STYLES (promoted from per-modal Window.Styles)  -->
+  <!-- ============================================================ -->
+  <Style Selector="TextBlock.field-label">
+    <Setter Property="FontSize"   Value="{StaticResource FontSizeMono}" />
+    <Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
+    <Setter Property="Margin"     Value="0,0,0,4" />
+  </Style>
+
+  <Style Selector="TextBlock.path-mono">
+    <Setter Property="FontFamily"   Value="{StaticResource MonoFont}" />
+    <Setter Property="FontSize"     Value="{StaticResource FontSizeMono}" />
+    <Setter Property="Foreground"   Value="{StaticResource TextDimBrush}" />
+    <Setter Property="TextTrimming" Value="CharacterEllipsis" />
+  </Style>
+
+  <!-- Standalone modal action buttons (not the .btn family) -->
+  <Style Selector="Button.primary">
+    <Setter Property="Background" Value="{StaticResource AccentDimBrush}" />
+    <Setter Property="BorderBrush" Value="{StaticResource AccentBrush}" />
+    <Setter Property="Foreground" Value="{StaticResource TextBrush}" />
+    <Setter Property="FontWeight" Value="SemiBold" />
+  </Style>
+  <Style Selector="Button.danger">
+    <Setter Property="Background" Value="{StaticResource BloodBrush}" />
+    <Setter Property="Foreground" Value="{StaticResource TextBrush}" />
+  </Style>
+```
+
+Note: `TextBlock.section-label` already exists at line ~864 — do NOT re-add it.
+
+- [ ] **Step 2: Replace hardcoded values inside existing IslandStyles rules**
+
+Apply the normalization rules to the existing style setters in this file:
+- Every `FontSize="N"` setter → the snapped token ref (table above). Specific lines: 149 (10→FontSizeEyebrow), 206 (11→FontSizeMono), 252 (13→FontSizeBody), 397 (11→FontSizeMono), 453 (9→FontSizeEyebrow), 475 (10→FontSizeEyebrow), 483 (10→FontSizeEyebrow), 556 (12→FontSizeBody), 573 (9→FontSizeEyebrow), 597 (12→FontSizeBody), 622 (10→FontSizeEyebrow), 638 (12→FontSizeBody), 697 (14→FontSizeTaskTitle), 771 (10→FontSizeEyebrow), 783 (10→FontSizeEyebrow), 788 (10→FontSizeEyebrow), 819 (11→FontSizeMono), 867 (10→FontSizeEyebrow), 884 (9→FontSizeEyebrow).
+- Chip tint backgrounds/borders → named brushes:
+  - line 155/156 `#1F7C9166`/`#4C7C9166` → `{StaticResource RunningTintBrush}`/`{StaticResource RunningTintBorderBrush}`
+  - 163/164 review tints → `ReviewTintBrush`/`ReviewTintBorderBrush`
+  - 171/172 error tints → `ErrorTintBrush`/`ErrorTintBorderBrush`
+  - 179/180 queued tints → `QueuedTintBrush`/`QueuedTintBorderBrush`
+  - agent-strip tints at 361/362 (`#147C9166`/`#4C7C9166`), 365/366, 368/369, 374/375 → the matching `*TintBrush`/`*TintBorderBrush` (snap the `#14` alpha to the shared `#1F` tint).
+- line 123 `#0DFFFFFF` → `{StaticResource HairlineOverlayBrush}`.
+- line 389 & 810 `#FF080C0B` → `{StaticResource VoidBrush}`.
+- line 887 badge `White` → `{StaticResource TextBrush}`.
+- Badge brushes at lines 88-90: replace the three `<SolidColorBrush>` definitions with palette refs:
+```xml
+    <SolidColorBrush x:Key="DraftBadgeBrush"    Color="{StaticResource TextMuteColor}"/>
+    <SolidColorBrush x:Key="PlanningBadgeBrush" Color="{StaticResource PeatColor}"/>
+    <SolidColorBrush x:Key="PlannedBadgeBrush"  Color="{StaticResource SageColor}"/>
+```
+- Corner radius `4` setters (447 live-chip, 813 task-live-tail `5`→leave, badges 878 `3`→leave) → only snap `4`→`6` where it appears as `CornerRadius="4"` on live-chip (447) and kbd (614) and badge tints. Leave `3` and `5` as-is (no nearby token; they're intentional micro-radii). NOTE: if unsure, leave radius alone — radius churn is lowest priority.
+
+- [ ] **Step 3: Build**
+
+Run: `dotnet build src/ClaudeDo.App/ClaudeDo.App.csproj`
+Expected: PASS.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/ClaudeDo.Ui/Design/IslandStyles.axaml
+git commit -m "refactor(ui): tokenize IslandStyles values and add shared modal styles"
+```
+
+---
+
+## Phase 2 — Per-view token migration (independent; parallelizable)
+
+For each task: open the file, apply the **normalization rules** (font/color/spacing/radius tables at top). Remove any local `Window.Styles` block that only redefines `section-label`, `field-label`, `path-mono`, `Button.primary`, or `Button.danger` (now shared from IslandStyles). Keep local styles that are genuinely unique to that view. After each file, build and commit.
+
+Each task ends with:
+- Build: `dotnet build src/ClaudeDo.App/ClaudeDo.App.csproj` → PASS
+- Commit: `git add <file> && git commit -m "refactor(ui): tokenize <view>"`
+
+### Task 4: MainWindow.axaml
+- Snap all `FontSize` literals (lines ~46,52,59,67,112,136,209,222,231).
+- Status dots: `#4CAF50`→`StatusRunningBrush`, `#FFA726`→`StatusReviewBrush`, `#EF5350`→`StatusErrorBrush` (lines ~200,203,205).
+
+### Task 5: Islands — ListsIslandView.axaml, TasksIslandView.axaml
+- ListsIslandView: snap FontSize (18,10,12 at lines ~18,49,57,58,59); username TextBlock (~57) gets no explicit FontFamily (inherits SansFont now — correct, leave it).
+- TasksIslandView: snap FontSize (24,11 at ~15,19).
+
+### Task 6: DetailsIslandView.axaml
+- Snap all FontSize (10,14,11,10,13,12 at lines ~54,57,92,114,138,142,199,269).
+- `OrangeRed`→`BloodBrush` (~154).
+- TextBox `CornerRadius="6"`→`8` (~172,274). TextBox `Padding="8"` leave.
+- Remove any redundant inline label styles superseded by shared `field-label`.
+
+### Task 7: TaskRowView.axaml  (includes the BorderBrush bug fix)
+- Snap FontSize (10,14 at ~85,103).
+- **Bug fix:** `BorderBrush="{DynamicResource BorderBrush}"` → `{DynamicResource LineBrush}` (the schedule-flyout border, ~line 188/222). `BorderBrush` is not a defined key.
+- Schedule flyout: title/labels inherit SansFont now (leave unset).
+
+### Task 8: AgentStripView.axaml, SessionTerminalView.axaml
+- AgentStrip: snap FontSize (10,9 at ~22,29,73,78); commit chip radius `4`→`6` (~102).
+- SessionTerminal: snap FontSize (10,11 at ~17,69).
+
+### Task 9: ThemedDatePicker.axaml
+- Snap any FontSize literals; popup border `CornerRadius="10"` → leave (10 = ChipCornerRadius value, acceptable) OR `{StaticResource ChipCornerRadius}`. Tokenize colors if any literals present.
+
+---
+
+## Phase 3 — ModalShell control
+
+### Task 10: Create ModalShell control
+
+**Files:**
+- Create: `src/ClaudeDo.Ui/Views/Controls/ModalShell.axaml.cs`
+- Create: `src/ClaudeDo.Ui/Views/Controls/ModalShell.axaml`
+
+- [ ] **Step 1: Write the code-behind (templated control)**
+
+`ModalShell.axaml.cs`:
+```csharp
+using System;
+using System.Windows.Input;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+using Avalonia.Input;
+
+namespace ClaudeDo.Ui.Views.Controls;
+
+/// <summary>Reusable modal chrome: titlebar (drag + close) wrapping a body and optional footer.</summary>
+public class ModalShell : ContentControl
+{
+    public static readonly StyledProperty<string?> TitleProperty =
+        AvaloniaProperty.Register<ModalShell, string?>(nameof(Title));
+
+    public static readonly StyledProperty<object?> FooterProperty =
+        AvaloniaProperty.Register<ModalShell, object?>(nameof(Footer));
+
+    public static readonly StyledProperty<ICommand?> CloseCommandProperty =
+        AvaloniaProperty.Register<ModalShell, ICommand?>(nameof(CloseCommand));
+
+    public string? Title { get => GetValue(TitleProperty); set => SetValue(TitleProperty, value); }
+    public object? Footer { get => GetValue(FooterProperty); set => SetValue(FooterProperty, value); }
+    public ICommand? CloseCommand { get => GetValue(CloseCommandProperty); set => SetValue(CloseCommandProperty, value); }
+
+    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
+    {
+        base.OnApplyTemplate(e);
+        if (e.NameScope.Find<Border>("PART_TitleBar") is { } bar)
+            bar.PointerPressed += OnTitleBarPressed;
+    }
+
+    private void OnTitleBarPressed(object? sender, PointerPressedEventArgs e)
+    {
+        if (e.GetCurrentPoint(this).Properties.IsLeftButtonPressed
+            && VisualRoot is Window w)
+            w.BeginMoveDrag(e);
+    }
+}
+```
+
+- [ ] **Step 2: Write the ControlTheme**
+
+`ModalShell.axaml`:
+```xml
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:ctl="using:ClaudeDo.Ui.Views.Controls">
+  <ControlTheme x:Key="{x:Type ctl:ModalShell}" TargetType="ctl:ModalShell">
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Background="{DynamicResource SurfaceBrush}"
+                BorderBrush="{DynamicResource LineBrush}"
+                BorderThickness="1"
+                CornerRadius="{DynamicResource ModalCornerRadius}"
+                ClipToBounds="True">
+          <DockPanel>
+            <!-- Title bar -->
+            <Border Name="PART_TitleBar" DockPanel.Dock="Top" Height="36"
+                    Background="{DynamicResource DeepBrush}"
+                    BorderBrush="{DynamicResource LineBrush}"
+                    BorderThickness="0,0,0,1">
+              <Grid ColumnDefinitions="*,Auto" Margin="14,0">
+                <TextBlock Text="{TemplateBinding Title}"
+                           FontFamily="{DynamicResource MonoFont}"
+                           FontSize="{DynamicResource FontSizeMono}"
+                           LetterSpacing="1.4"
+                           Foreground="{DynamicResource TextBrush}"
+                           VerticalAlignment="Center"/>
+                <Button Grid.Column="1" Classes="icon-btn" Content="✕"
+                        FontSize="{DynamicResource FontSizeBody}"
+                        Command="{TemplateBinding CloseCommand}"
+                        VerticalAlignment="Center"/>
+              </Grid>
+            </Border>
+            <!-- Footer (optional) -->
+            <Border Name="PART_Footer" DockPanel.Dock="Bottom"
+                    Background="{DynamicResource DeepBrush}"
+                    BorderBrush="{DynamicResource LineBrush}"
+                    BorderThickness="0,1,0,0"
+                    IsVisible="{TemplateBinding Footer, Converter={x:Static ObjectConverters.IsNotNull}}">
+              <ContentPresenter Content="{TemplateBinding Footer}" Margin="16,8"/>
+            </Border>
+            <!-- Body -->
+            <ContentPresenter Content="{TemplateBinding Content}"/>
+          </DockPanel>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+  </ControlTheme>
+</ResourceDictionary>
+```
+
+- [ ] **Step 3: Register the ControlTheme**
+
+In `src/ClaudeDo.App/App.axaml`, inside `<ResourceDictionary.MergedDictionaries>` (after the Tokens include), add:
+```xml
+                <ResourceInclude Source="avares://ClaudeDo.Ui/Views/Controls/ModalShell.axaml" />
+```
+
+- [ ] **Step 4: Build**
+
+Run: `dotnet build src/ClaudeDo.App/ClaudeDo.App.csproj`
+Expected: PASS.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/ClaudeDo.Ui/Views/Controls/ModalShell.axaml src/ClaudeDo.Ui/Views/Controls/ModalShell.axaml.cs src/ClaudeDo.App/App.axaml
+git commit -m "feat(ui): add reusable ModalShell control"
+```
+
+---
+
+### Task 11: Migrate SettingsModalView to ModalShell (reference migration)
+
+**Files:**
+- Modify: `src/ClaudeDo.Ui/Views/Modals/SettingsModalView.axaml`
+- Modify (if needed): `src/ClaudeDo.Ui/Views/Modals/SettingsModalView.axaml.cs`
+
+- [ ] **Step 1: Replace chrome with ModalShell**
+
+- Add namespace if missing: `xmlns:ctl="using:ClaudeDo.Ui.Views.Controls"` (already present).
+- Remove the local `Window.Styles` entries for `section-label`, `field-label`, `path-mono`, `Button.danger`, `Button.primary` (now shared). Keep any genuinely unique styles.
+- Replace the outer `<Border>...<Grid RowDefinitions="36,*,52">` structure with:
+```xml
+  <ctl:ModalShell Title="SETTINGS" CloseCommand="{Binding CancelCommand}">
+    <ctl:ModalShell.Footer>
+      <StackPanel Orientation="Horizontal" Spacing="8" HorizontalAlignment="Right" VerticalAlignment="Center">
+        <Button Content="Cancel" Command="{Binding CancelCommand}" MinWidth="90"/>
+        <Button Content="Save" Classes="primary" Command="{Binding SaveCommand}" IsEnabled="{Binding !IsBusy}" MinWidth="90"/>
+      </StackPanel>
+    </ctl:ModalShell.Footer>
+    <!-- existing DockPanel body (tabs + validation strip) goes here unchanged -->
+  </ctl:ModalShell>
+```
+- The body is the existing `<DockPanel Grid.Row="1">` content minus `Grid.Row`.
+- Snap remaining FontSize literals in the body per the rules.
+
+- [ ] **Step 2: Remove obsolete drag handler if now unused**
+
+If `TitleBar_PointerPressed` in `SettingsModalView.axaml.cs` is no longer referenced (ModalShell handles dragging), delete the method and the `x:Name="TitleBar"`/`PointerPressed` wiring. If the build complains about an unused handler, that's the signal.
+
+- [ ] **Step 3: Build**
+
+Run: `dotnet build src/ClaudeDo.App/ClaudeDo.App.csproj`
+Expected: PASS.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/ClaudeDo.Ui/Views/Modals/SettingsModalView.axaml src/ClaudeDo.Ui/Views/Modals/SettingsModalView.axaml.cs
+git commit -m "refactor(ui): migrate SettingsModal to ModalShell"
+```
+
+---
+
+### Task 12: Migrate remaining modals to ModalShell
+
+Repeat the Task 11 pattern for each modal below. One commit per file. Each: swap chrome → `ModalShell`, lift action buttons into `ModalShell.Footer`, drop local duplicate styles, delete now-unused `*_PointerPressed` drag handlers, snap FontSize/colors per rules, build, commit.
+
+- [ ] **12a:** `ListSettingsModalView.axaml` (+ `.axaml.cs`)
+- [ ] **12b:** `MergeModalView.axaml` (+ `.axaml.cs`)
+- [ ] **12c:** `AboutModalView.axaml` (+ `.axaml.cs`) — labels inherit SansFont now.
+- [ ] **12d:** `UnfinishedPlanningModalView.axaml` (+ `.axaml.cs`)
+- [ ] **12e:** `RepoImportModalView.axaml` (+ `.axaml.cs`)
+- [ ] **12f:** `WorktreesOverviewModalView.axaml` (+ `.axaml.cs`) — also fold `Border.wt-row` to reuse `task-row` if trivial; snap FontSize; `#EF5350`→`StatusErrorBrush`; `White` badge text→`TextBrush`.
+
+Each ends with build PASS + `git commit -m "refactor(ui): migrate <Modal> to ModalShell"`.
+
+---
+
+### Task 13: DiffModalView, PlanningDiffView, ConflictResolutionView (Static→Dynamic + chrome)
+
+These three currently use `StaticResource` for token lookups. Migrate chrome to `ModalShell` where they are full windows, and convert token references.
+
+- [ ] **Step 1: Convert resource references**
+
+In each of `DiffModalView.axaml`, `PlanningDiffView.axaml`, `ConflictResolutionView.axaml`: change every `{StaticResource <Brush/Token>}` used in an **element attribute** to `{DynamicResource ...}`. Leave `{StaticResource ...}` inside `<Style>`/`Setter` blocks (Avalonia styles resolve StaticResource fine and DynamicResource in setters is discouraged).
+
+- [ ] **Step 2: Apply normalization rules**
+
+- Snap FontSize literals.
+- `Consolas,Menlo,monospace` raw font (PlanningDiffView ~98, ConflictResolution ~47) → `{DynamicResource MonoFont}`.
+- `Orange`/`OrangeRed` → `{DynamicResource BloodBrush}`.
+- DiffModal tints `#1A4A6B4A`/`#1AC87060` → `{DynamicResource RunningTintBrush}`/`{DynamicResource ErrorTintBrush}`.
+- Migrate window chrome to `ModalShell` if the file is a Window with the titlebar/footer pattern (DiffModalView, ConflictResolutionView). PlanningDiffView is an embedded view — only convert resources + fonts, no ModalShell.
+
+- [ ] **Step 3: Build + commit (one per file)**
+
+Run: `dotnet build src/ClaudeDo.App/ClaudeDo.App.csproj` → PASS
+Commit: `git commit -m "refactor(ui): tokenize and dynamic-ize <view>"`
+
+---
+
+## Phase 4 — Final verification
+
+### Task 14: Full build + visual checklist
+
+- [ ] **Step 1: Build both projects**
+
+Run:
+```bash
+dotnet build src/ClaudeDo.App/ClaudeDo.App.csproj
+dotnet build src/ClaudeDo.Worker/ClaudeDo.Worker.csproj
+```
+Expected: both PASS.
+
+- [ ] **Step 2: Grep for stragglers**
+
+Confirm no remaining hardcoded values slipped through:
+- `FontSize="` with a numeric literal in any `Views/**/*.axaml` (should be near-zero; only token refs remain).
+- Off-palette hex (`#4CAF50`, `#FFA726`, `#EF5350`, `#FF080C0B`, `OrangeRed`, `Orange`) — should be zero.
+
+- [ ] **Step 3: Produce the human visual-check checklist**
+
+Write a short checklist (`docs/superpowers/plans/2026-05-30-ui-normalization-visualcheck.md`) listing each view/modal and what to eyeball (font looks like Inter Tight, status dots correct color, modal titlebars/footers intact, badges distinguishable, diff/planning views render). This is the regression gate the user runs by launching the app.
+
+---
+
+## Self-Review notes
+
+- **Spec coverage:** global defaults (T2), token source-of-truth fonts/spacing/radius (rules + T3–T13), color fold (T1,T3,T4,T6,T12,T13), shared styles (T3), ModalShell (T10–T13), bug fixes — BorderBrush (T7), Static→Dynamic (T13). All spec sections mapped.
+- **Risk note:** ModalShell migration (T11–T13) is the highest-risk part because each modal's body layout differs. Tasks are per-file so a failure is isolated. If a modal's body has tight coupling to the old Grid rows, keeping that modal's hand-rolled chrome (and only tokenizing it) is an acceptable fallback — note it in the commit.
+- **Line numbers** are from the pre-change audit and may drift as edits land; treat them as guides, locate by content.

docs/superpowers/specs/2026-05-30-ui-normalization-design.md

@@ -0,0 +1,96 @@
+# UI Normalization & Single Source of Truth — Design
+
+Date: 2026-05-30
+Status: Approved
+
+## Goal
+
+Make working on the ClaudeDo UI simpler by establishing the design tokens as the single source of truth for **every** visual value, eliminating duplicated styles, and providing reusable helpers for the patterns that are currently copy-pasted across views. Accept minor visual shifts where current values don't match the token scale — consistency is the priority over pixel-preservation.
+
+## Scope decisions (locked)
+
+- **Lane C (full normalization)** — global defaults + shared helpers + tokenize every hardcoded font/spacing/radius/color.
+- **Normalization strategy: B (snap to existing scale).** Stray values round to the nearest existing token; off-palette colors fold into the closest design brush. The token vocabulary stays small; the UI shifts slightly in places and is verified by human eyeball.
+- Badge colors collapse to palette (option A): blue is dropped.
+
+## 1. Global defaults — `src/ClaudeDo.App/App.axaml`
+
+Add application-level default styles so unstyled controls inherit the intended look instead of falling back to FluentTheme's Segoe UI:
+
+- Default `FontFamily` = `{DynamicResource SansFont}` (Inter Tight) for text-bearing controls (`TextBlock`, `TextBox`, `Button`, `ComboBox`, `CheckBox`, `NumericUpDown`, `TabItem`).
+- Default `FontSize` baseline = `{StaticResource FontSizeBody}` (13) where a control has no more specific style.
+- Controls that need mono (`MonoFont`) continue to opt in explicitly via their class/style.
+
+This single change fixes the Settings modal font and every other bare-Segoe-UI label across the app.
+
+## 2. Tokens = source of truth — `src/ClaudeDo.Ui/Design/Tokens.axaml`
+
+### Fonts — snap to the existing scale
+Existing tokens: Eyebrow=10, Mono=11, Micro=11, Body=13, TaskTitle=14, H3=18, H2=24, H1=32.
+- `9 → 10` (FontSizeEyebrow)
+- `12 → 13` (FontSizeBody)
+- `16 → 18` (FontSizeH3)
+- Every `FontSize="N"` literal across all views/styles becomes a `{StaticResource FontSize*}` reference. No new size tokens are added.
+
+### Spacing / radius — snap to the existing scale
+- Modal body padding `16` / `20 → 18` (SpaceXl); the vertical component `12` stays `SpaceMd`.
+- Corner radius `4 → 6` (ButtonCornerRadius).
+- Text inputs (TextBox) standardize on `InputCornerRadius` (8); the `6` currently on DetailsIslandView TextBoxes moves to 8.
+
+### Colors — fold off-palette into the palette
+Add semantic brushes where a recurring role genuinely needs one, but reuse existing palette brushes wherever possible:
+
+- **Connection-status dots** (MainWindow): green `#4CAF50` → `StatusRunningBrush`; amber `#FFA726` → `StatusReviewBrush`; red `#EF5350` → `StatusErrorBrush`. Also applies to the `#EF5350` literals in WorktreesOverviewModal.
+- **Planning/draft badges** (IslandStyles `DraftBadgeBrush`/`PlanningBadgeBrush`/`PlannedBadgeBrush`): re-point to palette — draft → `TextMuteBrush`, planning → `PeatBrush`, planned → `SageBrush`. Blue dropped.
+- **Named-color literals:** `OrangeRed` / `Orange` → `BloodBrush`; `White` → `TextBrush` (or `DeepBrush` where it sits on an accent fill, e.g. primary button text).
+- **Terminal background** `#FF080C0B` (terminal + task-live-tail) → `VoidBrush` (`#FF0A0E0C`).
+- **Status alpha-tints:** the repeated `#1F<hue>` fills and `#4C<hue>` borders used by chips and agent-strips become named brushes defined once in Tokens (e.g. `RunningTintBrush` / `RunningTintBorderBrush`, and the same for review/error/queued), then referenced from IslandStyles. The `#26<hue>` worktree-badge tints and `#147C9166` agent-strip tints fold into the same named tint family (snap the alpha to one value per family).
+- **Island hairline overlay** `#0DFFFFFF` → a named `HairlineOverlayBrush` token.
+
+## 3. Shared helpers
+
+### `src/ClaudeDo.Ui/Design/IslandStyles.axaml`
+Promote the styles currently copy-pasted into modals into the shared stylesheet, then delete the per-modal copies:
+- `Button.primary` — standardize on **one** definition: `AccentDimBrush` background + `AccentBrush` border + `TextBrush` foreground (matching the existing `Button.btn.primary` variant). Resolves the AccentBrush-vs-AccentDimBrush divergence.
+- `Button.danger` — `BloodBrush` background + `TextBrush` foreground.
+- `TextBlock.field-label` — FontSize Micro (11), `TextDimBrush`, bottom margin 4.
+- `TextBlock.section-label` already exists in IslandStyles; remove the duplicate local copies.
+
+### New control: `ModalShell` (`src/ClaudeDo.Ui/Views/Controls/ModalShell.axaml`)
+A reusable `TemplatedControl` / `UserControl` providing the chrome every modal re-implements:
+- Title bar: mono uppercase title (FontSize Mono, LetterSpacing 1.4), draggable region, ✕ close button (`icon-btn`).
+- Outer border (SurfaceBrush bg, LineBrush border, ModalCornerRadius).
+- Content slot for the body.
+- Optional footer slot for action buttons (right-aligned).
+- Exposes: `Title` (string), `Body` content, `Footer` content, and a `CloseCommand`.
+
+The 8 modal windows (Settings, ListSettings, Merge, About, UnfinishedPlanning, RepoImport, Diff, PlanningDiff, ConflictResolution) migrate to wrap their content in `ModalShell` instead of re-declaring titlebar/border/footer grids. Window-level concerns (Width/Height, KeyBindings, WindowDecorations) stay on the `Window`; only the inner chrome is replaced.
+
+## 4. Bug fixes (folded into the migration)
+
+- `TaskRowView.axaml` schedule flyout: `BorderBrush="{DynamicResource BorderBrush}"` → `{DynamicResource LineBrush}` (the `BorderBrush` key does not exist in Tokens; current runtime resource-not-found).
+- `DiffModalView.axaml`, `PlanningDiffView.axaml`, `ConflictResolutionView.axaml`: convert all `{StaticResource <token>}` references to `{DynamicResource <token>}` to match the rest of the app and survive theme changes. (Style-internal `Setter` references that must stay `StaticResource` for Avalonia reasons are left as-is; only token lookups in element attributes are converted.)
+
+## 5. Verification
+
+- `dotnet build` per project (`.slnx` requires .NET 9 — build individual csproj):
+  - `src/ClaudeDo.App/ClaudeDo.App.csproj` (pulls in Ui + Data)
+  - `src/ClaudeDo.Worker/ClaudeDo.Worker.csproj`
+- A clean build confirms XAML compiles and all resource keys resolve (compiled bindings + StaticResource keys are validated at build time).
+- Human visual pass: launch the app and walk each view/modal against a per-view checklist (provided with the plan), since lane B intentionally shifts some values. The eyeball is the regression check.
+
+## Sequencing
+
+1. Tokens.axaml: add new named brushes (tints, status, hairline), re-point badge brushes. (No behavior change yet.)
+2. App.axaml: global font/size defaults.
+3. IslandStyles.axaml: promote shared styles (primary/danger/field-label), replace internal hardcoded values with token refs.
+4. Per-view migration: replace every hardcoded FontSize/spacing/radius/color with token refs; snap stray values.
+5. ModalShell control + migrate the 8 modals.
+6. Bug fixes (BorderBrush key, Static→Dynamic in the three views).
+7. Build all projects; produce visual-check checklist.
+
+## Out of scope
+
+- No layout/structure redesign — only values and shared chrome.
+- No new features.
+- No changes to ViewModels or behavior (ModalShell migration is markup-only; existing `CancelCommand` etc. bind through unchanged).

src/ClaudeDo.App/App.axaml

@@ -9,6 +9,7 @@
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
                 <ResourceInclude Source="avares://ClaudeDo.Ui/Design/Tokens.axaml" />
+                <ResourceInclude Source="avares://ClaudeDo.Ui/Views/Controls/ModalShell.axaml" />
             </ResourceDictionary.MergedDictionaries>
 
             <!-- Converters -->
@@ -31,6 +32,13 @@
     <Application.Styles>
         <FluentTheme />
         <StyleInclude Source="avares://ClaudeDo.Ui/Design/IslandStyles.axaml" />
+        <!-- Global defaults: every Window inherits Inter Tight + body size.
+             Controls that need mono opt in via their own class/style. -->
+        <Style Selector="Window">
+            <Setter Property="FontFamily" Value="{DynamicResource SansFont}" />
+            <Setter Property="FontSize" Value="{DynamicResource FontSizeBody}" />
+            <Setter Property="Foreground" Value="{DynamicResource TextBrush}" />
+        </Style>
         <Style Selector="ListBoxItem:selected /template/ ContentPresenter">
             <Setter Property="Background" Value="{DynamicResource AccentGlowBrush}"/>
         </Style>

src/ClaudeDo.Ui/Design/IslandStyles.axaml

@@ -85,9 +85,9 @@
     <StreamGeometry x:Key="Icon.Settings">M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8z M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65a.5.5 0 0 0 .12-.64l-2-3.46a.5.5 0 0 0-.61-.22l-2.49 1a7.03 7.03 0 0 0-1.69-.98l-.38-2.65a.5.5 0 0 0-.5-.42h-4a.5.5 0 0 0-.5.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1a.5.5 0 0 0-.61.22l-2 3.46a.5.5 0 0 0 .12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65a.5.5 0 0 0-.12.64l2 3.46a.5.5 0 0 0 .61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65a.5.5 0 0 0 .5.42h4a.5.5 0 0 0 .5-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1a.5.5 0 0 0 .61-.22l2-3.46a.5.5 0 0 0-.12-.64l-2.11-1.65z</StreamGeometry>
 
     <!-- Badge brushes -->
-    <SolidColorBrush x:Key="DraftBadgeBrush"    Color="#4A5568"/>
-    <SolidColorBrush x:Key="PlanningBadgeBrush" Color="#D69E2E"/>
-    <SolidColorBrush x:Key="PlannedBadgeBrush"  Color="#3182CE"/>
+    <SolidColorBrush x:Key="DraftBadgeBrush"    Color="{StaticResource TextMuteColor}"/>
+    <SolidColorBrush x:Key="PlanningBadgeBrush" Color="{StaticResource PeatColor}"/>
+    <SolidColorBrush x:Key="PlannedBadgeBrush"  Color="{StaticResource SageColor}"/>
 
   </Styles.Resources>
 
@@ -120,7 +120,7 @@
   <!-- ============================================================ -->
   <Style Selector="Border.island">
     <Setter Property="Background"    Value="{StaticResource IslandBackgroundBrush}" />
-    <Setter Property="BorderBrush"   Value="#0DFFFFFF" />
+    <Setter Property="BorderBrush"   Value="{StaticResource HairlineOverlayBrush}" />
     <Setter Property="BorderThickness" Value="1" />
     <Setter Property="CornerRadius" Value="{StaticResource IslandCornerRadius}" />
     <Setter Property="BoxShadow"    Value="{StaticResource IslandShadow}" />
@@ -146,30 +146,30 @@
   </Style>
   <Style Selector="Border.chip > TextBlock">
     <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
-    <Setter Property="FontSize"   Value="10" />
+    <Setter Property="FontSize"   Value="{StaticResource FontSizeEyebrow}" />
     <Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
   </Style>
 
   <!-- Status variants — tint background 12% alpha of the status hue -->
   <Style Selector="Border.chip.running">
-    <Setter Property="Background"  Value="#1F7C9166" />
-    <Setter Property="BorderBrush" Value="#4C7C9166" />
+    <Setter Property="Background"  Value="{StaticResource RunningTintBrush}" />
+    <Setter Property="BorderBrush" Value="{StaticResource RunningTintBorderBrush}" />
   </Style>
   <Style Selector="Border.chip.running > TextBlock">
     <Setter Property="Foreground" Value="{StaticResource StatusRunningBrush}" />
   </Style>
 
   <Style Selector="Border.chip.review">
-    <Setter Property="Background"  Value="#1FD4A574" />
-    <Setter Property="BorderBrush" Value="#4CD4A574" />
+    <Setter Property="Background"  Value="{StaticResource ReviewTintBrush}" />
+    <Setter Property="BorderBrush" Value="{StaticResource ReviewTintBorderBrush}" />
   </Style>
   <Style Selector="Border.chip.review > TextBlock">
     <Setter Property="Foreground" Value="{StaticResource StatusReviewBrush}" />
   </Style>
 
   <Style Selector="Border.chip.error">
-    <Setter Property="Background"  Value="#1FC87060" />
-    <Setter Property="BorderBrush" Value="#4CC87060" />
+    <Setter Property="Background"  Value="{StaticResource ErrorTintBrush}" />
+    <Setter Property="BorderBrush" Value="{StaticResource ErrorTintBorderBrush}" />
   </Style>
   <Style Selector="Border.chip.error > TextBlock">
     <Setter Property="Foreground" Value="{StaticResource StatusErrorBrush}" />
@@ -177,8 +177,8 @@
 
   <!-- queued → Sage (#8B9D7A) -->
   <Style Selector="Border.chip.queued">
-    <Setter Property="Background"  Value="#1F8B9D7A" />
-    <Setter Property="BorderBrush" Value="#4C8B9D7A" />
+    <Setter Property="Background"  Value="{StaticResource QueuedTintBrush}" />
+    <Setter Property="BorderBrush" Value="{StaticResource QueuedTintBorderBrush}" />
   </Style>
   <Style Selector="Border.chip.queued > TextBlock">
     <Setter Property="Foreground" Value="{StaticResource StatusQueuedBrush}" />
@@ -203,7 +203,7 @@
     <Setter Property="CornerRadius"    Value="{StaticResource ButtonCornerRadius}" />
     <Setter Property="Padding"         Value="10,6" />
     <Setter Property="FontFamily"      Value="{StaticResource MonoFont}" />
-    <Setter Property="FontSize"        Value="11" />
+    <Setter Property="FontSize"        Value="{StaticResource FontSizeMono}" />
     <Setter Property="Foreground"      Value="{StaticResource TextDimBrush}" />
     <Setter Property="Transitions">
       <Transitions>
@@ -216,11 +216,6 @@
     <Setter Property="Background"  Value="{StaticResource Surface3Brush}" />
     <Setter Property="BorderBrush" Value="{StaticResource LineBrightBrush}" />
   </Style>
-  <Style Selector="Button.btn.primary">
-    <Setter Property="Background"  Value="{StaticResource AccentDimBrush}" />
-    <Setter Property="BorderBrush" Value="{StaticResource AccentBrush}" />
-    <Setter Property="Foreground"  Value="{StaticResource TextBrush}" />
-  </Style>
 
   <!-- Icon button: 24×24 square with hover surface -->
   <Style Selector="Button.icon-btn">
@@ -248,7 +243,7 @@
     <Setter Property="BorderThickness" Value="1" />
     <Setter Property="CornerRadius"    Value="{StaticResource InputCornerRadius}" />
     <Setter Property="Padding"         Value="10,8" />
-    <Setter Property="FontSize"        Value="13" />
+    <Setter Property="FontSize"        Value="{StaticResource FontSizeBody}" />
     <Setter Property="Foreground"      Value="{StaticResource TextBrush}" />
     <Setter Property="CaretBrush"      Value="{StaticResource AccentBrush}" />
   </Style>
@@ -310,8 +305,9 @@
     <Setter Property="Cursor"       Value="Hand" />
     <Setter Property="Transitions">
       <Transitions>
-        <BrushTransition Property="Background" Duration="0:0:0.10"/>
-        <BrushTransition Property="BorderBrush" Duration="0:0:0.10"/>
+        <BrushTransition     Property="Background"  Duration="0:0:0.12" />
+        <BrushTransition     Property="BorderBrush" Duration="0:0:0.12" />
+        <ThicknessTransition Property="Margin"      Duration="0:0:0.15" />
       </Transitions>
     </Setter>
   </Style>
@@ -358,22 +354,22 @@
     <Setter Property="BorderBrush"     Value="{StaticResource LineBrush}" />
   </Style>
   <Style Selector="Border.agent-strip.running">
-    <Setter Property="Background"  Value="#147C9166" />
-    <Setter Property="BorderBrush" Value="#4C7C9166" />
+    <Setter Property="Background"  Value="{StaticResource RunningTintBrush}" />
+    <Setter Property="BorderBrush" Value="{StaticResource RunningTintBorderBrush}" />
   </Style>
   <Style Selector="Border.agent-strip.review">
-    <Setter Property="Background"  Value="#14D4A574" />
-    <Setter Property="BorderBrush" Value="#4CD4A574" />
+    <Setter Property="Background"  Value="{StaticResource ReviewTintBrush}" />
+    <Setter Property="BorderBrush" Value="{StaticResource ReviewTintBorderBrush}" />
   </Style>
   <Style Selector="Border.agent-strip.error">
-    <Setter Property="Background"  Value="#14C87060" />
-    <Setter Property="BorderBrush" Value="#4CC87060" />
+    <Setter Property="Background"  Value="{StaticResource ErrorTintBrush}" />
+    <Setter Property="BorderBrush" Value="{StaticResource ErrorTintBorderBrush}" />
   </Style>
 
   <!-- queued → Sage tint -->
   <Style Selector="Border.agent-strip.queued">
-    <Setter Property="Background"  Value="#148B9D7A" />
-    <Setter Property="BorderBrush" Value="#4C8B9D7A" />
+    <Setter Property="Background"  Value="{StaticResource QueuedTintBrush}" />
+    <Setter Property="BorderBrush" Value="{StaticResource QueuedTintBorderBrush}" />
   </Style>
 
   <!-- idle → neutral (same as base, explicit for clarity) -->
@@ -386,7 +382,7 @@
   <!-- TERMINAL / LOG                                               -->
   <!-- ============================================================ -->
   <Style Selector="Border.terminal">
-    <Setter Property="Background"   Value="#FF080C0B" />
+    <Setter Property="Background"   Value="{StaticResource VoidBrush}" />
     <Setter Property="CornerRadius" Value="8" />
     <Setter Property="Padding"      Value="12" />
     <Setter Property="BorderBrush"  Value="{StaticResource LineBrush}" />
@@ -394,7 +390,7 @@
   </Style>
   <Style Selector="Border.terminal TextBlock">
     <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
-    <Setter Property="FontSize"   Value="11" />
+    <Setter Property="FontSize"   Value="{StaticResource FontSizeMono}" />
     <Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
   </Style>
   <Style Selector="Border.terminal TextBlock[Tag=log-sys]">
@@ -449,7 +445,7 @@
   </Style>
   <Style Selector="Border.live-chip > StackPanel > TextBlock">
     <Setter Property="FontFamily"    Value="{StaticResource MonoFont}" />
-    <Setter Property="FontSize"      Value="9" />
+    <Setter Property="FontSize"      Value="{StaticResource FontSizeEyebrow}" />
     <Setter Property="Foreground"    Value="{StaticResource AccentBrush}" />
     <Setter Property="LetterSpacing" Value="1.2" />
   </Style>
@@ -471,7 +467,7 @@
   <!-- Terminal log-line timestamp column -->
   <Style Selector="TextBlock.log-ts">
     <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
-    <Setter Property="FontSize"   Value="10" />
+    <Setter Property="FontSize"   Value="{StaticResource FontSizeEyebrow}" />
     <Setter Property="Foreground" Value="{StaticResource TextFaintBrush}" />
     <Setter Property="Width"      Value="60" />
     <Setter Property="VerticalAlignment" Value="Top" />
@@ -480,7 +476,7 @@
   <!-- Kind marker column -->
   <Style Selector="TextBlock.log-kind">
     <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
-    <Setter Property="FontSize"   Value="10" />
+    <Setter Property="FontSize"   Value="{StaticResource FontSizeEyebrow}" />
     <Setter Property="Foreground" Value="{StaticResource TextMuteBrush}" />
     <Setter Property="Width"      Value="46" />
     <Setter Property="VerticalAlignment" Value="Top" />
@@ -554,7 +550,7 @@
   <!-- Count badge — larger, high contrast, brighter when the row is active -->
   <Style Selector="TextBlock.list-count">
     <Setter Property="FontFamily"        Value="{StaticResource MonoFont}" />
-    <Setter Property="FontSize"          Value="12" />
+    <Setter Property="FontSize"          Value="{StaticResource FontSizeBody}" />
     <Setter Property="FontWeight"        Value="Medium" />
     <Setter Property="Foreground"        Value="{StaticResource TextDimBrush}" />
     <Setter Property="VerticalAlignment" Value="Center" />
@@ -565,17 +561,6 @@
     <Setter Property="FontWeight" Value="SemiBold" />
   </Style>
 
-  <!-- ============================================================ -->
-  <!-- LIST SECTION HEADER                                          -->
-  <!-- ============================================================ -->
-  <Style Selector="TextBlock.list-section-label">
-    <Setter Property="FontFamily"    Value="{StaticResource MonoFont}" />
-    <Setter Property="FontSize"      Value="9" />
-    <Setter Property="Foreground"    Value="{StaticResource TextFaintBrush}" />
-    <Setter Property="Margin"        Value="10,10,10,4" />
-    <Setter Property="LetterSpacing" Value="1.2" />
-  </Style>
-
   <!-- ============================================================ -->
   <!-- SEARCH BOX WRAPPER                                           -->
   <!-- ============================================================ -->
@@ -594,7 +579,7 @@
     <Setter Property="Background"      Value="Transparent" />
     <Setter Property="BorderThickness" Value="0" />
     <Setter Property="Padding"         Value="4,7" />
-    <Setter Property="FontSize"        Value="12" />
+    <Setter Property="FontSize"        Value="{StaticResource FontSizeBody}" />
     <Setter Property="Foreground"      Value="{StaticResource TextBrush}" />
     <Setter Property="CaretBrush"      Value="{StaticResource AccentBrush}" />
   </Style>
@@ -618,7 +603,7 @@
   </Style>
   <Style Selector="Border.kbd > TextBlock">
     <Setter Property="FontFamily"          Value="{StaticResource MonoFont}" />
-    <Setter Property="FontSize"            Value="10" />
+    <Setter Property="FontSize"            Value="{StaticResource FontSizeEyebrow}" />
     <Setter Property="Foreground"          Value="{StaticResource TextFaintBrush}" />
     <Setter Property="HorizontalAlignment" Value="Center" />
     <Setter Property="VerticalAlignment"   Value="Center" />
@@ -633,7 +618,7 @@
     <Setter Property="BorderThickness" Value="0" />
     <Setter Property="Padding"         Value="10,8" />
     <Setter Property="Foreground"      Value="{StaticResource TextMuteBrush}" />
-    <Setter Property="FontSize"        Value="12" />
+    <Setter Property="FontSize"        Value="{StaticResource FontSizeBody}" />
     <Setter Property="HorizontalAlignment" Value="Stretch" />
     <Setter Property="HorizontalContentAlignment" Value="Left" />
     <Setter Property="Cursor"          Value="Hand" />
@@ -694,7 +679,7 @@
     <Setter Property="Background"      Value="Transparent" />
     <Setter Property="BorderThickness" Value="0" />
     <Setter Property="Padding"         Value="0" />
-    <Setter Property="FontSize"        Value="14" />
+    <Setter Property="FontSize"        Value="{StaticResource FontSizeTaskTitle}" />
     <Setter Property="Foreground"      Value="{StaticResource TextBrush}" />
     <Setter Property="CaretBrush"      Value="{StaticResource AccentBrush}" />
     <Setter Property="MinHeight"       Value="20" />
@@ -722,22 +707,6 @@
   <!-- TASK ROW — extensions (C2)                                   -->
   <!-- ============================================================ -->
 
-  <!-- Augment base task-row transitions to include Margin -->
-  <Style Selector="Border.task-row">
-    <Setter Property="Transitions">
-      <Transitions>
-        <BrushTransition    Property="Background" Duration="0:0:0.12" />
-        <ThicknessTransition Property="Margin"    Duration="0:0:0.15" />
-      </Transitions>
-    </Setter>
-  </Style>
-
-  <!-- Selected state: rely on the left accent bar from TaskRowView;
-       no heavy bg or perimeter border. -->
-  <Style Selector="Border.task-row.selected">
-    <Setter Property="BorderBrush" Value="{StaticResource LineBrightBrush}" />
-  </Style>
-
   <!-- Left accent bar for selected row -->
   <Style Selector="Border.task-row-accent">
     <Setter Property="Width"           Value="2" />
@@ -767,7 +736,7 @@
   </Style>
   <Style Selector="Border.task-row Border.chip > StackPanel > TextBlock">
     <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
-    <Setter Property="FontSize"   Value="10" />
+    <Setter Property="FontSize"   Value="{StaticResource FontSizeEyebrow}" />
     <Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
   </Style>
 
@@ -779,12 +748,12 @@
   <!-- Diff chip add/del coloring -->
   <Style Selector="TextBlock.diff-add">
     <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
-    <Setter Property="FontSize"   Value="10" />
+    <Setter Property="FontSize"   Value="{StaticResource FontSizeEyebrow}" />
     <Setter Property="Foreground" Value="{StaticResource MossBrightBrush}" />
   </Style>
   <Style Selector="TextBlock.diff-del">
     <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
-    <Setter Property="FontSize"   Value="10" />
+    <Setter Property="FontSize"   Value="{StaticResource FontSizeEyebrow}" />
     <Setter Property="Foreground" Value="{StaticResource BloodBrush}" />
   </Style>
 
@@ -807,7 +776,7 @@
   <!-- LIVE-TAIL PREVIEW ROW                                        -->
   <!-- ============================================================ -->
   <Style Selector="Border.task-live-tail">
-    <Setter Property="Background"      Value="#FF080C0B" />
+    <Setter Property="Background"      Value="{StaticResource VoidBrush}" />
     <Setter Property="BorderBrush"     Value="{StaticResource LineBrush}" />
     <Setter Property="BorderThickness" Value="1" />
     <Setter Property="CornerRadius"    Value="5" />
@@ -816,7 +785,7 @@
   </Style>
   <Style Selector="Border.task-live-tail TextBlock">
     <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
-    <Setter Property="FontSize"   Value="11" />
+    <Setter Property="FontSize"   Value="{StaticResource FontSizeMono}" />
     <Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
   </Style>
 
@@ -863,8 +832,8 @@
   <!-- ============================================================ -->
   <Style Selector="TextBlock.section-label">
     <Setter Property="FontFamily"    Value="{StaticResource MonoFont}" />
-    <Setter Property="FontSize"      Value="10" />
-    <Setter Property="Foreground"    Value="{StaticResource TextFaintBrush}" />
+    <Setter Property="FontSize"      Value="{StaticResource FontSizeMono}" />
+    <Setter Property="Foreground"    Value="{StaticResource TextMuteBrush}" />
     <Setter Property="LetterSpacing" Value="1.4" />
   </Style>
   <Style Selector="TextBlock.section-label.overdue">
@@ -881,9 +850,9 @@
   </Style>
 
   <Style Selector="Border.badge > TextBlock">
-    <Setter Property="FontSize"   Value="9"/>
+    <Setter Property="FontSize"   Value="{StaticResource FontSizeEyebrow}"/>
     <Setter Property="FontWeight" Value="Bold"/>
-    <Setter Property="Foreground" Value="White"/>
+    <Setter Property="Foreground" Value="{StaticResource TextBrush}"/>
   </Style>
 
   <Style Selector="Border.badge.draft">
@@ -898,4 +867,153 @@
     <Setter Property="Background" Value="{DynamicResource PlannedBadgeBrush}"/>
   </Style>
 
+  <!-- ============================================================ -->
+  <!-- SHARED MODAL STYLES (promoted from per-modal Window.Styles)  -->
+  <!-- ============================================================ -->
+  <Style Selector="TextBlock.field-label">
+    <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
+    <Setter Property="FontSize"   Value="{StaticResource FontSizeMono}" />
+    <Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
+    <Setter Property="Margin"     Value="0,0,0,4" />
+  </Style>
+
+  <Style Selector="TextBlock.path-mono">
+    <Setter Property="FontFamily"   Value="{StaticResource MonoFont}" />
+    <Setter Property="FontSize"     Value="{StaticResource FontSizeMono}" />
+    <Setter Property="Foreground"   Value="{StaticResource TextDimBrush}" />
+    <Setter Property="TextTrimming" Value="CharacterEllipsis" />
+  </Style>
+
+  <!-- Self-contained action buttons (same geometry as Button.btn, distinct color).
+       Used standalone, e.g. Classes="primary" / "danger". -->
+  <Style Selector="Button.primary">
+    <Setter Property="Background"      Value="{StaticResource AccentDimBrush}" />
+    <Setter Property="BorderBrush"     Value="{StaticResource AccentBrush}" />
+    <Setter Property="BorderThickness" Value="1" />
+    <Setter Property="CornerRadius"    Value="{StaticResource ButtonCornerRadius}" />
+    <Setter Property="Padding"         Value="10,6" />
+    <Setter Property="FontFamily"      Value="{StaticResource MonoFont}" />
+    <Setter Property="FontSize"        Value="{StaticResource FontSizeMono}" />
+    <Setter Property="Foreground"      Value="{StaticResource TextBrush}" />
+    <Setter Property="FontWeight"      Value="SemiBold" />
+  </Style>
+  <Style Selector="Button.danger">
+    <Setter Property="Background"      Value="{StaticResource BloodBrush}" />
+    <Setter Property="BorderBrush"     Value="{StaticResource BloodBrush}" />
+    <Setter Property="BorderThickness" Value="1" />
+    <Setter Property="CornerRadius"    Value="{StaticResource ButtonCornerRadius}" />
+    <Setter Property="Padding"         Value="10,6" />
+    <Setter Property="FontFamily"      Value="{StaticResource MonoFont}" />
+    <Setter Property="FontSize"        Value="{StaticResource FontSizeMono}" />
+    <Setter Property="Foreground"      Value="{StaticResource TextBrush}" />
+    <Setter Property="FontWeight"      Value="SemiBold" />
+  </Style>
+
+  <!-- ============================================================ -->
+  <!-- CANONICAL TYPOGRAPHY                                          -->
+  <!-- One class per text role. Small text = 11 (eyebrow/meta/       -->
+  <!-- field-label/path-mono). Body = 13. Heading = 18. Display = 24.-->
+  <!-- ============================================================ -->
+
+  <!-- Small secondary mono text: timestamps, ids, hints, status, diffstat, age -->
+  <Style Selector="TextBlock.meta">
+    <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
+    <Setter Property="FontSize"   Value="{StaticResource FontSizeMono}" />
+    <Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
+  </Style>
+
+  <!-- Default body / list values / descriptions -->
+  <Style Selector="TextBlock.body">
+    <Setter Property="FontFamily" Value="{StaticResource SansFont}" />
+    <Setter Property="FontSize"   Value="{StaticResource FontSizeBody}" />
+    <Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
+  </Style>
+
+  <!-- Item / task / detail titles -->
+  <Style Selector="TextBlock.title">
+    <Setter Property="FontFamily" Value="{StaticResource SansFont}" />
+    <Setter Property="FontSize"   Value="{StaticResource FontSizeBody}" />
+    <Setter Property="FontWeight" Value="Medium" />
+    <Setter Property="Foreground" Value="{StaticResource TextBrush}" />
+  </Style>
+
+  <!-- Panel / section headings ("Lists", modal section titles) -->
+  <Style Selector="TextBlock.heading">
+    <Setter Property="FontFamily" Value="{StaticResource SansFont}" />
+    <Setter Property="FontSize"   Value="{StaticResource FontSizeH3}" />
+    <Setter Property="FontWeight" Value="SemiBold" />
+    <Setter Property="Foreground" Value="{StaticResource TextBrush}" />
+  </Style>
+
+  <!-- Main board / island display title -->
+  <Style Selector="TextBlock.display">
+    <Setter Property="FontFamily"   Value="{StaticResource SansFont}" />
+    <Setter Property="FontSize"     Value="{StaticResource FontSizeH2}" />
+    <Setter Property="FontWeight"   Value="SemiBold" />
+    <Setter Property="Foreground"   Value="{StaticResource TextBrush}" />
+    <Setter Property="TextTrimming" Value="CharacterEllipsis" />
+  </Style>
+
+  <!-- ============================================================ -->
+  <!-- SHARED CONTAINERS (promoted from per-view inline/local styles)-->
+  <!-- ============================================================ -->
+
+  <!-- Bordered card / settings section -->
+  <Style Selector="Border.section">
+    <Setter Property="BorderBrush"     Value="{StaticResource LineBrush}" />
+    <Setter Property="BorderThickness" Value="1" />
+    <Setter Property="CornerRadius"    Value="{StaticResource ButtonCornerRadius}" />
+    <Setter Property="Padding"         Value="14" />
+    <Setter Property="Background"      Value="{StaticResource DeepBrush}" />
+  </Style>
+
+  <!-- Stacked content section with a bottom hairline (Details island) -->
+  <Style Selector="Border.section-divider">
+    <Setter Property="Padding"         Value="18,12" />
+    <Setter Property="BorderBrush"     Value="{StaticResource LineBrush}" />
+    <Setter Property="BorderThickness" Value="0,0,0,1" />
+  </Style>
+
+  <!-- Inline danger confirm box -->
+  <Style Selector="Border.danger-box">
+    <Setter Property="BorderBrush"     Value="{StaticResource BloodBrush}" />
+    <Setter Property="BorderThickness" Value="1" />
+    <Setter Property="CornerRadius"    Value="{StaticResource ButtonCornerRadius}" />
+    <Setter Property="Padding"         Value="12,10" />
+  </Style>
+
+  <!-- Left sidebar pane with vertical hairline (diff/planning views) -->
+  <Style Selector="Border.sidebar-pane">
+    <Setter Property="BorderBrush"     Value="{StaticResource LineBrush}" />
+    <Setter Property="BorderThickness" Value="0,0,1,0" />
+    <Setter Property="Background"      Value="{StaticResource DeepBrush}" />
+  </Style>
+
+  <!-- Diff line-number gutter column -->
+  <Style Selector="TextBlock.diff-lineno">
+    <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
+    <Setter Property="FontSize"   Value="{StaticResource FontSizeMono}" />
+    <Setter Property="Foreground" Value="{StaticResource TextFaintBrush}" />
+  </Style>
+
+  <!-- Terminal selectable log text (SelectableTextBlock doesn't inherit the TextBlock terminal style) -->
+  <Style Selector="Border.terminal SelectableTextBlock">
+    <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
+    <Setter Property="FontSize"   Value="{StaticResource FontSizeMono}" />
+    <Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
+  </Style>
+
+  <!-- Accent call-to-action button (Send to queue / Continue / Schedule) -->
+  <Style Selector="Button.accent">
+    <Setter Property="Background"      Value="{StaticResource AccentDimBrush}" />
+    <Setter Property="BorderBrush"     Value="{StaticResource AccentBrush}" />
+    <Setter Property="BorderThickness" Value="1" />
+    <Setter Property="CornerRadius"    Value="{StaticResource ButtonCornerRadius}" />
+    <Setter Property="Padding"         Value="10,6" />
+    <Setter Property="FontFamily"      Value="{StaticResource MonoFont}" />
+    <Setter Property="FontSize"        Value="{StaticResource FontSizeMono}" />
+    <Setter Property="Foreground"      Value="{StaticResource TextBrush}" />
+    <Setter Property="FontWeight"      Value="SemiBold" />
+  </Style>
+
 </Styles>

src/ClaudeDo.Ui/Design/Tokens.axaml

@@ -84,6 +84,19 @@
   <SolidColorBrush x:Key="StatusQueuedBrush"  Color="{StaticResource StatusQueuedColor}" />
   <SolidColorBrush x:Key="StatusIdleBrush"    Color="{StaticResource StatusIdleColor}" />
 
+  <!-- Subtle white overlay (island hairline border) -->
+  <SolidColorBrush x:Key="HairlineOverlayBrush" Color="#0DFFFFFF" />
+
+  <!-- Status tints (12% fill / 30% border of the status hue) — reused by chips & agent strips -->
+  <SolidColorBrush x:Key="RunningTintBrush"       Color="#1F7C9166" />
+  <SolidColorBrush x:Key="RunningTintBorderBrush" Color="#4C7C9166" />
+  <SolidColorBrush x:Key="ReviewTintBrush"        Color="#1FD4A574" />
+  <SolidColorBrush x:Key="ReviewTintBorderBrush"  Color="#4CD4A574" />
+  <SolidColorBrush x:Key="ErrorTintBrush"         Color="#1FC87060" />
+  <SolidColorBrush x:Key="ErrorTintBorderBrush"   Color="#4CC87060" />
+  <SolidColorBrush x:Key="QueuedTintBrush"        Color="#1F8B9D7A" />
+  <SolidColorBrush x:Key="QueuedTintBorderBrush"  Color="#4C8B9D7A" />
+
   <!-- Window-body gradient layers (apply as LinearGradientBrush in the main content Border) -->
   <LinearGradientBrush x:Key="DesktopBackgroundBrush" StartPoint="0%,0%" EndPoint="0%,100%">
     <GradientStop Offset="0"   Color="#FF05070A" />
@@ -149,11 +162,11 @@
   <FontFamily x:Key="MonoFamily">avares://ClaudeDo.Ui/Assets/Fonts/#JetBrains Mono, IBM Plex Mono, Cascadia Mono, Consolas, monospace</FontFamily>
 
   <!-- Type scale -->
-  <x:Double x:Key="FontSizeEyebrow">10</x:Double>    <!-- uppercase label, 0.14em tracking -->
+  <x:Double x:Key="FontSizeEyebrow">11</x:Double>    <!-- uppercase label, 0.14em tracking -->
   <x:Double x:Key="FontSizeMono">11</x:Double>       <!-- chips, log lines, filepaths -->
   <x:Double x:Key="FontSizeMicro">11</x:Double>      <!-- meta rows -->
   <x:Double x:Key="FontSizeBody">13</x:Double>
-  <x:Double x:Key="FontSizeTaskTitle">14</x:Double>
+  <x:Double x:Key="FontSizeTaskTitle">13</x:Double>
   <x:Double x:Key="FontSizeH3">18</x:Double>
   <x:Double x:Key="FontSizeH2">24</x:Double>         <!-- island titles ("My Day") -->
   <x:Double x:Key="FontSizeH1">32</x:Double>
@@ -162,7 +175,7 @@
   <Style x:Key="EyebrowText" Selector="TextBlock.eyebrow">
     <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
     <Setter Property="FontSize"   Value="{StaticResource FontSizeEyebrow}" />
-    <Setter Property="Foreground" Value="{StaticResource TextFaintBrush}" />
+    <Setter Property="Foreground" Value="{StaticResource TextMuteBrush}" />
     <Setter Property="LetterSpacing" Value="1.4" />
   </Style>
 

src/ClaudeDo.Ui/Views/Controls/ModalShell.axaml

@@ -0,0 +1,43 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:ctl="using:ClaudeDo.Ui.Views.Controls">
+  <ControlTheme x:Key="{x:Type ctl:ModalShell}" TargetType="ctl:ModalShell">
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Background="{DynamicResource SurfaceBrush}"
+                BorderBrush="{DynamicResource LineBrush}"
+                BorderThickness="1"
+                CornerRadius="{DynamicResource ModalCornerRadius}"
+                ClipToBounds="True">
+          <DockPanel>
+            <Border Name="PART_TitleBar" DockPanel.Dock="Top" Height="36"
+                    Background="{DynamicResource DeepBrush}"
+                    BorderBrush="{DynamicResource LineBrush}"
+                    BorderThickness="0,0,0,1">
+              <Grid ColumnDefinitions="*,Auto" Margin="14,0">
+                <TextBlock Text="{TemplateBinding Title}"
+                           FontFamily="{DynamicResource MonoFont}"
+                           FontSize="{DynamicResource FontSizeMono}"
+                           LetterSpacing="1.4"
+                           Foreground="{DynamicResource TextBrush}"
+                           VerticalAlignment="Center"/>
+                <Button Grid.Column="1" Classes="icon-btn" Content="✕"
+                        FontSize="{DynamicResource FontSizeBody}"
+                        Command="{TemplateBinding CloseCommand}"
+                        VerticalAlignment="Center"/>
+              </Grid>
+            </Border>
+            <Border Name="PART_Footer" DockPanel.Dock="Bottom"
+                    Background="{DynamicResource DeepBrush}"
+                    BorderBrush="{DynamicResource LineBrush}"
+                    BorderThickness="0,1,0,0"
+                    IsVisible="{TemplateBinding Footer, Converter={x:Static ObjectConverters.IsNotNull}}">
+              <ContentPresenter Content="{TemplateBinding Footer}" Margin="16,8"/>
+            </Border>
+            <ContentPresenter Content="{TemplateBinding Content}"/>
+          </DockPanel>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+  </ControlTheme>
+</ResourceDictionary>

src/ClaudeDo.Ui/Views/Controls/ModalShell.axaml.cs

@@ -0,0 +1,38 @@
+using System;
+using System.Windows.Input;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+using Avalonia.Input;
+
+namespace ClaudeDo.Ui.Views.Controls;
+
+/// <summary>Reusable modal chrome: titlebar (drag + close) wrapping a body and optional footer.</summary>
+public class ModalShell : ContentControl
+{
+    public static readonly StyledProperty<string?> TitleProperty =
+        AvaloniaProperty.Register<ModalShell, string?>(nameof(Title));
+
+    public static readonly StyledProperty<object?> FooterProperty =
+        AvaloniaProperty.Register<ModalShell, object?>(nameof(Footer));
+
+    public static readonly StyledProperty<ICommand?> CloseCommandProperty =
+        AvaloniaProperty.Register<ModalShell, ICommand?>(nameof(CloseCommand));
+
+    public string? Title { get => GetValue(TitleProperty); set => SetValue(TitleProperty, value); }
+    public object? Footer { get => GetValue(FooterProperty); set => SetValue(FooterProperty, value); }
+    public ICommand? CloseCommand { get => GetValue(CloseCommandProperty); set => SetValue(CloseCommandProperty, value); }
+
+    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
+    {
+        base.OnApplyTemplate(e);
+        if (e.NameScope.Find<Border>("PART_TitleBar") is { } bar)
+            bar.PointerPressed += OnTitleBarPressed;
+    }
+
+    private void OnTitleBarPressed(object? sender, PointerPressedEventArgs e)
+    {
+        if (e.GetCurrentPoint(this).Properties.IsLeftButtonPressed && VisualRoot is Window w)
+            w.BeginMoveDrag(e);
+    }
+}

src/ClaudeDo.Ui/Views/Controls/ThemedDatePicker.axaml

@@ -31,7 +31,7 @@
       <Setter Property="Foreground" Value="{DynamicResource TextDimBrush}"/>
       <Setter Property="CornerRadius" Value="999"/>
       <Setter Property="Padding" Value="10,3"/>
-      <Setter Property="FontSize" Value="11"/>
+      <Setter Property="FontSize" Value="{StaticResource FontSizeMono}"/>
       <Setter Property="MinHeight" Value="22"/>
     </Style>
     <Style Selector="Button.quick:pointerover /template/ ContentPresenter">
@@ -61,7 +61,7 @@
       <Setter Property="Width" Value="32"/>
       <Setter Property="Height" Value="32"/>
       <Setter Property="CornerRadius" Value="999"/>
-      <Setter Property="FontSize" Value="12"/>
+      <Setter Property="FontSize" Value="{StaticResource FontSizeBody}"/>
       <Setter Property="HorizontalContentAlignment" Value="Center"/>
       <Setter Property="VerticalContentAlignment" Value="Center"/>
       <Setter Property="Padding" Value="0"/>
@@ -77,7 +77,7 @@
     </Style>
     <Style Selector="Button.day.selected /template/ ContentPresenter">
       <Setter Property="Background" Value="{DynamicResource AccentBrush}"/>
-      <Setter Property="TextElement.Foreground" Value="White"/>
+      <Setter Property="TextElement.Foreground" Value="{DynamicResource TextBrush}"/>
     </Style>
     <Style Selector="Button.day.selected:pointerover /template/ ContentPresenter">
       <Setter Property="Background" Value="{DynamicResource AccentDimBrush}"/>
@@ -86,7 +86,7 @@
     <Style Selector="TextBlock.weekday">
       <Setter Property="HorizontalAlignment" Value="Center"/>
       <Setter Property="Foreground" Value="{DynamicResource TextMuteBrush}"/>
-      <Setter Property="FontSize" Value="10"/>
+      <Setter Property="FontSize" Value="{StaticResource FontSizeEyebrow}"/>
       <Setter Property="FontWeight" Value="SemiBold"/>
     </Style>
   </UserControl.Styles>
@@ -133,12 +133,9 @@
 
           <Grid ColumnDefinitions="Auto,*,Auto" Margin="0,2,0,0">
             <Button Grid.Column="0" Click="OnPrevMonthClick" Classes="nav" Content="◀"/>
-            <TextBlock Grid.Column="1" x:Name="MonthHeader"
+            <TextBlock Grid.Column="1" x:Name="MonthHeader" Classes="title"
                        HorizontalAlignment="Center"
-                       VerticalAlignment="Center"
-                       FontWeight="SemiBold"
-                       FontSize="13"
-                       Foreground="{DynamicResource TextBrush}"/>
+                       VerticalAlignment="Center"/>
             <Button Grid.Column="2" Click="OnNextMonthClick" Classes="nav" Content="▶"/>
           </Grid>
 

src/ClaudeDo.Ui/Views/Islands/AgentStripView.axaml

@@ -17,17 +17,14 @@
                  Classes.status-pulse="{Binding IsRunning}"
                  Margin="0,0,6,0"/>
         <TextBlock Grid.Column="1"
+                   Classes="meta"
                    Text="{Binding AgentStatusLabel}"
-                   FontFamily="{DynamicResource MonoFont}"
-                   FontSize="10"
                    LetterSpacing="1.2"
-                   Foreground="{DynamicResource TextDimBrush}"
                    VerticalAlignment="Center"
                    Margin="0,0,8,0"/>
         <TextBlock Grid.Column="2"
+                   Classes="meta"
                    Text="{Binding Model}"
-                   FontFamily="{DynamicResource MonoFont}"
-                   FontSize="10"
                    Foreground="{DynamicResource TextFaintBrush}"
                    VerticalAlignment="Center"
                    TextTrimming="CharacterEllipsis"
@@ -66,16 +63,15 @@
       <Grid ColumnDefinitions="Auto,*,Auto"
             IsVisible="{Binding WorktreePath, Converter={x:Static ObjectConverters.IsNotNull}}">
         <TextBlock Grid.Column="0"
+                   Classes="eyebrow"
                    Text="WORKTREE"
-                   FontFamily="{DynamicResource MonoFont}" FontSize="9"
-                   LetterSpacing="1.2"
                    Foreground="{DynamicResource TextFaintBrush}"
+                   LetterSpacing="1.2"
                    VerticalAlignment="Center"
                    Margin="0,0,8,0"/>
         <TextBlock Grid.Column="1"
+                   Classes="meta"
                    Text="{Binding WorktreePath}"
-                   FontFamily="{DynamicResource MonoFont}" FontSize="10"
-                   Foreground="{DynamicResource TextDimBrush}"
                    TextTrimming="CharacterEllipsis"
                    VerticalAlignment="Center"/>
         <Button Grid.Column="2"
@@ -93,15 +89,14 @@
         <PathIcon Data="{StaticResource Icon.GitBranch}" Width="11" Height="11"
                   Foreground="{DynamicResource AccentBrush}"
                   VerticalAlignment="Center"/>
-        <TextBlock Text="{Binding BranchLine}"
-                   FontFamily="{DynamicResource MonoFont}" FontSize="10"
-                   Foreground="{DynamicResource TextDimBrush}"
+        <TextBlock Classes="meta"
+                   Text="{Binding BranchLine}"
                    VerticalAlignment="Center"/>
         <Border Classes="chip"
                 IsVisible="{Binding CommitsOnBranch}"
-                Padding="5,1" CornerRadius="4">
-          <TextBlock Text="{Binding CommitsOnBranch, StringFormat='{}{0}c'}"
-                     FontFamily="{DynamicResource MonoFont}" FontSize="9"
+                Padding="5,1" CornerRadius="6">
+          <TextBlock Classes="meta"
+                     Text="{Binding CommitsOnBranch, StringFormat='{}{0}c'}"
                      Foreground="{DynamicResource TextFaintBrush}"/>
         </Border>
       </StackPanel>
@@ -109,10 +104,10 @@
       <!-- Row 4: DIFF label + +add −del + meter bar -->
       <Grid ColumnDefinitions="Auto,Auto,Auto,*">
         <TextBlock Grid.Column="0"
+                   Classes="eyebrow"
                    Text="DIFF"
-                   FontFamily="{DynamicResource MonoFont}" FontSize="9"
-                   LetterSpacing="1.2"
                    Foreground="{DynamicResource TextFaintBrush}"
+                   LetterSpacing="1.2"
                    VerticalAlignment="Center"
                    Margin="0,0,8,0"/>
         <TextBlock Grid.Column="1"

src/ClaudeDo.Ui/Views/Islands/DetailsIslandView.axaml

@@ -21,9 +21,8 @@
                     Foreground="{DynamicResource BloodBrush}"/>
         </Button>
         <TextBlock Grid.Column="1"
+                   Classes="meta"
                    Text="{Binding Task.CreatedAtFormatted}"
-                   FontFamily="{DynamicResource MonoFont}" FontSize="10"
-                   Foreground="{DynamicResource TextFaintBrush}"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"/>
         <Button Grid.Column="2" Classes="icon-btn"
@@ -49,12 +48,11 @@
                    Cursor="Hand"/>
         </Button>
         <StackPanel Grid.Column="1" Spacing="0">
-          <TextBlock Text="{Binding TaskIdBadge}"
-                     FontFamily="{DynamicResource MonoFont}" FontSize="10"
-                     Foreground="{DynamicResource TextFaintBrush}"
+          <TextBlock Classes="meta"
+                     Text="{Binding TaskIdBadge}"
                      Margin="0,0,0,4"/>
           <TextBox Text="{Binding EditableTitle, Mode=TwoWay}"
-                   FontSize="14" FontWeight="Medium"
+                   FontSize="{StaticResource FontSizeTaskTitle}" FontWeight="Medium"
                    BorderThickness="0" Background="Transparent"
                    Foreground="{DynamicResource TextBrush}"
                    TextWrapping="Wrap"
@@ -77,30 +75,31 @@
                 IsEnabled="{Binding IsAgentSectionEnabled}"
                 VerticalAlignment="Top"
                 Margin="6,0,0,0">
-          <TextBlock Text="⚙" FontSize="14"/>
+          <TextBlock Text="⚙" FontSize="{StaticResource FontSizeTaskTitle}"/>
           <Button.Flyout>
             <Flyout Placement="BottomEdgeAlignedRight" ShowMode="Standard">
               <StackPanel Width="340" Spacing="10" Margin="4">
                 <TextBlock Text="Agent settings (overrides)" FontWeight="SemiBold"/>
 
                 <StackPanel Spacing="2">
-                  <TextBlock Text="Model"/>
+                  <TextBlock Classes="field-label" Text="Model"/>
                   <ComboBox ItemsSource="{Binding TaskModelOptions}"
                             SelectedItem="{Binding TaskModelSelection, Mode=TwoWay}"
                             HorizontalAlignment="Stretch"/>
-                  <TextBlock Text="{Binding EffectiveModelHint, StringFormat='Effective if inherited: {0}'}"
-                             Opacity="0.6" FontSize="11"/>
+                  <TextBlock Classes="meta"
+                             Text="{Binding EffectiveModelHint, StringFormat='Effective if inherited: {0}'}"
+                             Opacity="0.6"/>
                 </StackPanel>
 
                 <StackPanel Spacing="2">
-                  <TextBlock Text="System prompt (appended)"/>
+                  <TextBlock Classes="field-label" Text="System prompt (appended)"/>
                   <TextBox Text="{Binding TaskSystemPrompt, Mode=TwoWay}"
                            AcceptsReturn="True" TextWrapping="Wrap" MinHeight="70"
                            PlaceholderText="{Binding EffectiveSystemPromptHint}"/>
                 </StackPanel>
 
                 <StackPanel Spacing="2">
-                  <TextBlock Text="Agent file"/>
+                  <TextBlock Classes="field-label" Text="Agent file"/>
                   <ComboBox ItemsSource="{Binding TaskAgentOptions}"
                             SelectedItem="{Binding TaskSelectedAgent, Mode=TwoWay}"
                             HorizontalAlignment="Stretch">
@@ -110,8 +109,9 @@
                       </DataTemplate>
                     </ComboBox.ItemTemplate>
                   </ComboBox>
-                  <TextBlock Text="{Binding EffectiveAgentHint, StringFormat='Effective if inherited: {0}'}"
-                             Opacity="0.6" FontSize="11"/>
+                  <TextBlock Classes="meta"
+                             Text="{Binding EffectiveAgentHint, StringFormat='Effective if inherited: {0}'}"
+                             Opacity="0.6"/>
                 </StackPanel>
               </StackPanel>
             </Flyout>
@@ -128,39 +128,33 @@
       <StackPanel Spacing="0">
 
         <!-- Planning merge section — visible only for planning parent tasks -->
-        <Border Padding="18,12,18,12"
-                BorderBrush="{DynamicResource LineBrush}"
-                BorderThickness="0,0,0,1"
+        <Border Classes="section-divider"
                 IsVisible="{Binding Task.IsPlanningParent}">
           <StackPanel Spacing="8">
             <TextBlock Classes="section-label" Text="MERGE" Margin="0,0,0,2"/>
             <StackPanel Spacing="4">
-              <TextBlock Text="Merge target"
-                         FontSize="11"
-                         Foreground="{DynamicResource TextFaintBrush}"/>
+              <TextBlock Classes="field-label" Text="Merge target"/>
               <ComboBox ItemsSource="{Binding MergeTargetBranches}"
                         SelectedItem="{Binding SelectedMergeTarget, Mode=TwoWay}"
                         HorizontalAlignment="Stretch"/>
             </StackPanel>
             <StackPanel Orientation="Horizontal" Spacing="8">
-              <Button Content="Review combined diff"
+              <Button Classes="btn" Content="Review combined diff"
                       Command="{Binding ReviewCombinedDiffCommand}"/>
-              <Button Content="Merge all subtasks"
+              <Button Classes="btn" Content="Merge all subtasks"
                       IsEnabled="{Binding CanMergeAll}"
                       Command="{Binding MergeAllCommand}"
                       ToolTip.Tip="{Binding MergeAllDisabledReason}"/>
             </StackPanel>
             <TextBlock Text="{Binding MergeAllError}"
-                       Foreground="OrangeRed"
+                       Foreground="{DynamicResource BloodBrush}"
                        TextWrapping="Wrap"
                        IsVisible="{Binding MergeAllError, Converter={x:Static ObjectConverters.IsNotNull}}"/>
           </StackPanel>
         </Border>
 
         <!-- Steps section -->
-        <Border Padding="18,12,18,12"
-                BorderBrush="{DynamicResource LineBrush}"
-                BorderThickness="0,0,0,1">
+        <Border Classes="section-divider">
           <StackPanel Spacing="6">
             <TextBlock Classes="section-label" Text="STEPS" Margin="0,0,0,2"/>
             <TextBox Text="{Binding NewSubtaskTitle, Mode=TwoWay}"
@@ -169,7 +163,7 @@
                      Background="{DynamicResource Surface2Brush}"
                      BorderBrush="{DynamicResource LineBrush}"
                      BorderThickness="1"
-                     CornerRadius="6">
+                     CornerRadius="8">
               <TextBox.KeyBindings>
                 <KeyBinding Gesture="Enter" Command="{Binding AddSubtaskCommand}"/>
               </TextBox.KeyBindings>
@@ -195,7 +189,7 @@
                       <TextBlock Grid.Column="1"
                                  Classes="subtask-title"
                                  Text="{Binding Title}"
-                                 FontSize="13"
+                                 FontSize="{StaticResource FontSizeBody}"
                                  Foreground="{DynamicResource TextDimBrush}"
                                  VerticalAlignment="Center"
                                  TextWrapping="Wrap"/>
@@ -208,9 +202,7 @@
         </Border>
 
         <!-- Details (description) section -->
-        <Border Padding="18,12,18,12"
-                BorderBrush="{DynamicResource LineBrush}"
-                BorderThickness="0,0,0,1">
+        <Border Classes="section-divider">
           <StackPanel Spacing="6">
             <Grid ColumnDefinitions="Auto,*,Auto,Auto">
               <Button Grid.Column="0"
@@ -220,12 +212,12 @@
                       Margin="0,0,6,2"
                       VerticalAlignment="Center">
                 <StackPanel Orientation="Horizontal" Spacing="6">
-                  <TextBlock Text="▾" FontSize="10"
-                             IsVisible="{Binding IsDescriptionExpanded}"
-                             Foreground="{DynamicResource TextDimBrush}"/>
-                  <TextBlock Text="▸" FontSize="10"
-                             IsVisible="{Binding !IsDescriptionExpanded}"
-                             Foreground="{DynamicResource TextDimBrush}"/>
+                  <TextBlock Classes="meta"
+                             Text="▾"
+                             IsVisible="{Binding IsDescriptionExpanded}"/>
+                  <TextBlock Classes="meta"
+                             Text="▸"
+                             IsVisible="{Binding !IsDescriptionExpanded}"/>
                   <TextBlock Classes="section-label" Text="DETAILS"/>
                 </StackPanel>
               </Button>
@@ -239,19 +231,17 @@
                 <PathIcon Data="{StaticResource Icon.Copy}" Width="11" Height="11"/>
               </Button>
               <Button Grid.Column="3"
-                      Classes="icon-btn"
+                      Classes="btn"
                       Command="{Binding ToggleEditDescriptionCommand}"
-                      Padding="6,2"
-                      FontSize="10"
+                      Padding="8,3"
                       ToolTip.Tip="Toggle edit/preview"
                       IsVisible="{Binding IsDescriptionEditorVisible}">
                 <TextBlock Text="Preview"/>
               </Button>
               <Button Grid.Column="3"
-                      Classes="icon-btn"
+                      Classes="btn"
                       Command="{Binding ToggleEditDescriptionCommand}"
-                      Padding="6,2"
-                      FontSize="10"
+                      Padding="8,3"
                       ToolTip.Tip="Toggle edit/preview"
                       IsVisible="{Binding IsDescriptionPreviewVisible}">
                 <TextBlock Text="Edit"/>
@@ -266,11 +256,11 @@
                      PlaceholderText="Add task details (markdown supported)..."
                      Padding="8"
                      FontFamily="{DynamicResource MonoFont}"
-                     FontSize="12"
+                     FontSize="{StaticResource FontSizeBody}"
                      Background="{DynamicResource Surface2Brush}"
                      BorderBrush="{DynamicResource LineBrush}"
                      BorderThickness="1"
-                     CornerRadius="6"
+                     CornerRadius="8"
                      IsVisible="{Binding IsDescriptionEditorVisible}"/>
 
             <ctl:MarkdownView Markdown="{Binding EditableDescription}"

src/ClaudeDo.Ui/Views/Islands/ListsIslandView.axaml

@@ -4,20 +4,12 @@
              xmlns:converters="using:ClaudeDo.Ui.Converters"
              x:Class="ClaudeDo.Ui.Views.Islands.ListsIslandView"
              x:DataType="vm:ListsIslandViewModel">
-  <UserControl.Resources>
-    <converters:UpperCaseConverter x:Key="UpperCase"/>
-    <converters:IconKeyConverter   x:Key="IconKey"/>
-    <converters:DotBrushConverter  x:Key="DotBrush"/>
-  </UserControl.Resources>
-
   <DockPanel LastChildFill="True">
 
     <!-- ── Header ── -->
     <Border DockPanel.Dock="Top" Classes="island-header">
-      <StackPanel Margin="14,12,14,0" Spacing="4">
-        <TextBlock FontFamily="{DynamicResource SansFamily}" FontSize="18"
-                   FontWeight="SemiBold" Foreground="{DynamicResource TextBrush}"
-                   Text="Lists"/>
+      <StackPanel Spacing="4">
+        <TextBlock Classes="heading" Text="Lists"/>
 
         <!-- Search row -->
         <Border Classes="search-wrap" Margin="0,8,0,12">
@@ -45,18 +37,16 @@
         <!-- Avatar circle -->
         <Border Grid.Column="0" Classes="avatar-circle"
                 VerticalAlignment="Center">
-          <TextBlock Text="{Binding UserInitials}"
-                     FontFamily="{DynamicResource MonoFont}" FontSize="10"
+          <TextBlock Classes="eyebrow"
+                     Text="{Binding UserInitials}"
                      FontWeight="SemiBold"
                      Foreground="{DynamicResource DeepBrush}"
                      HorizontalAlignment="Center" VerticalAlignment="Center"/>
         </Border>
         <!-- Name + machine -->
         <StackPanel Grid.Column="1" Margin="8,0" Spacing="1" VerticalAlignment="Center">
-          <TextBlock Text="{Binding UserName}"
-                     FontSize="12" Foreground="{DynamicResource TextBrush}"/>
-          <TextBlock FontFamily="{DynamicResource MonoFont}" FontSize="10"
-                     Foreground="{DynamicResource TextFaintBrush}">
+          <TextBlock Classes="title" Text="{Binding UserName}"/>
+          <TextBlock Classes="meta">
             <TextBlock.Text>
               <MultiBinding StringFormat="{}{0} / local">
                 <Binding Path="MachineName"/>
@@ -80,7 +70,7 @@
       <StackPanel Margin="6,0,6,4">
 
         <!-- SMART LISTS section -->
-        <TextBlock Classes="list-section-label" Text="SMART LISTS"/>
+        <TextBlock Classes="section-label" Text="SMART LISTS" Margin="10,10,10,4"/>
         <ItemsControl ItemsSource="{Binding SmartLists}">
           <ItemsControl.ItemTemplate>
             <DataTemplate DataType="vm:ListNavItemViewModel">
@@ -90,10 +80,8 @@
                   <!-- Left accent bar for active state -->
                   <Border Grid.Column="0" Grid.ColumnSpan="3"
                           Background="Transparent"
-                          CornerRadius="8" IsHitTestVisible="False">
-                    <Border.IsVisible>
-                      <Binding Path="IsActive"/>
-                    </Border.IsVisible>
+                          CornerRadius="8" IsHitTestVisible="False"
+                          IsVisible="{Binding IsActive}">
                     <Border Width="2" Height="16"
                             Background="{DynamicResource AccentBrush}"
                             CornerRadius="1"
@@ -110,7 +98,7 @@
                   <TextBlock Grid.Column="1" Classes="list-label"
                              Text="{Binding Name}"
                              VerticalAlignment="Center" Margin="8,0"
-                             Foreground="{DynamicResource TextDimBrush}" FontSize="13"/>
+                             Foreground="{DynamicResource TextDimBrush}" FontSize="{StaticResource FontSizeBody}"/>
                   <!-- Count -->
                   <TextBlock Grid.Column="2" Classes="list-count"
                              Text="{Binding Count}"/>
@@ -121,7 +109,7 @@
         </ItemsControl>
 
         <!-- MY LISTS section -->
-        <TextBlock Classes="list-section-label" Text="MY LISTS"/>
+        <TextBlock Classes="section-label" Text="MY LISTS" Margin="10,10,10,4"/>
         <ItemsControl ItemsSource="{Binding UserLists}">
           <ItemsControl.ItemTemplate>
             <DataTemplate DataType="vm:ListNavItemViewModel">
@@ -158,7 +146,7 @@
                   <TextBlock Grid.Column="1" Classes="list-label"
                              Text="{Binding Name}"
                              VerticalAlignment="Center" Margin="8,0"
-                             Foreground="{DynamicResource TextDimBrush}" FontSize="13"/>
+                             Foreground="{DynamicResource TextDimBrush}" FontSize="{StaticResource FontSizeBody}"/>
                   <!-- Count -->
                   <TextBlock Grid.Column="2" Classes="list-count"
                              Text="{Binding Count}"/>
@@ -177,7 +165,8 @@
                         Width="13" Height="13"
                         Foreground="{DynamicResource TextMuteBrush}"
                         VerticalAlignment="Center"/>
-              <TextBlock Text="New list" FontSize="12"
+              <TextBlock Classes="body"
+                         Text="New list"
                          Foreground="{DynamicResource TextMuteBrush}"
                          VerticalAlignment="Center"/>
             </StackPanel>

src/ClaudeDo.Ui/Views/Islands/SessionTerminalView.axaml

@@ -12,8 +12,8 @@
             Height="28">
         <!-- Session label -->
         <TextBlock Grid.Column="1"
+                   Classes="meta"
                    Text="{Binding BranchLine, StringFormat='claude-session · {0}'}"
-                   FontFamily="{DynamicResource MonoFont}" FontSize="10"
                    LetterSpacing="0.8"
                    Foreground="{DynamicResource TextMuteBrush}"
                    HorizontalAlignment="Center"
@@ -65,7 +65,6 @@
                 <!-- Message text — selectable so the user can copy raw output -->
                 <SelectableTextBlock Grid.Column="1"
                                      Text="{Binding Text}" Tag="{Binding ClassName}"
-                                     FontFamily="{DynamicResource MonoFont}" FontSize="11"
                                      Foreground="{DynamicResource TextDimBrush}"
                                      TextWrapping="Wrap"/>
               </Grid>

src/ClaudeDo.Ui/Views/Islands/TaskRowView.axaml

@@ -79,9 +79,9 @@
                 Width="18" Height="18"
                 VerticalAlignment="Center">
           <Panel>
-            <TextBlock Text="▾" FontSize="10" IsVisible="{Binding IsExpanded}"
+            <TextBlock Classes="meta" Text="▾" IsVisible="{Binding IsExpanded}"
                        VerticalAlignment="Center" HorizontalAlignment="Center"/>
-            <TextBlock Text="▸" FontSize="10" IsVisible="{Binding !IsExpanded}"
+            <TextBlock Classes="meta" Text="▸" IsVisible="{Binding !IsExpanded}"
                        VerticalAlignment="Center" HorizontalAlignment="Center"/>
           </Panel>
         </Button>
@@ -100,7 +100,7 @@
           <Grid ColumnDefinitions="*,Auto" VerticalAlignment="Center">
             <TextBlock Grid.Column="0"
                        Classes="task-title"
-                       Text="{Binding Title}" FontSize="14"
+                       Text="{Binding Title}" FontSize="{StaticResource FontSizeTaskTitle}"
                        Foreground="{DynamicResource TextBrush}"
                        TextWrapping="Wrap"
                        FontStyle="{Binding IsDraft, Converter={StaticResource BoolToItalic}}"
@@ -218,24 +218,22 @@
       <Button.Flyout>
         <Flyout Placement="Bottom" ShowMode="Standard">
           <Border Background="{DynamicResource Surface2Brush}"
-                  BorderBrush="{DynamicResource BorderBrush}"
+                  BorderBrush="{DynamicResource LineBrush}"
                   BorderThickness="1" CornerRadius="10"
                   Padding="16" Width="300">
             <StackPanel Spacing="12">
-              <TextBlock Text="Schedule task"
-                         FontWeight="SemiBold" FontSize="13"
-                         Foreground="{DynamicResource TextBrush}"/>
+              <TextBlock Classes="title" Text="Schedule task"/>
 
               <StackPanel Spacing="6">
-                <TextBlock Text="WHEN" FontSize="10" Opacity="0.6"
-                           Foreground="{DynamicResource TextDimBrush}"/>
+                <TextBlock Classes="eyebrow" Text="WHEN"
+                           Foreground="{DynamicResource TextDimBrush}" Opacity="0.6"/>
                 <ctl:ThemedDatePicker x:Name="ScheduleDate" ShowTime="True"
                                       HorizontalAlignment="Stretch"/>
               </StackPanel>
 
               <StackPanel Orientation="Horizontal" Spacing="8"
                           HorizontalAlignment="Right" Margin="0,4,0,0">
-                <Button Content="Cancel" Click="OnScheduleCancelClick" MinWidth="76"/>
+                <Button Classes="btn" Content="Cancel" Click="OnScheduleCancelClick" MinWidth="76"/>
                 <Button Content="Schedule" Classes="accent" Click="OnScheduleSetClick" MinWidth="76"/>
               </StackPanel>
             </StackPanel>

src/ClaudeDo.Ui/Views/Islands/TasksIslandView.axaml

@@ -9,14 +9,13 @@
 
     <!-- Header -->
     <Border DockPanel.Dock="Top" Classes="island-header">
-      <Grid ColumnDefinitions="*,Auto" Margin="18,14">
+      <Grid ColumnDefinitions="*,Auto">
         <StackPanel Grid.Column="0" Spacing="4">
           <TextBlock Classes="eyebrow" Text="{Binding HeaderEyebrow}"/>
-          <TextBlock FontFamily="{DynamicResource SansFamily}" FontSize="24"
-                     FontWeight="SemiBold" Foreground="{DynamicResource TextBrush}"
+          <TextBlock Classes="display"
                      Text="{Binding HeaderTitle}"
                      TextTrimming="CharacterEllipsis"/>
-          <TextBlock FontFamily="{DynamicResource MonoFamily}" FontSize="11"
+          <TextBlock Classes="meta"
                      Foreground="{DynamicResource TextMuteBrush}"
                      Text="{Binding Subtitle}"
                      TextTrimming="CharacterEllipsis"/>

src/ClaudeDo.Ui/Views/MainWindow.axaml

@@ -38,24 +38,18 @@
                  VerticalAlignment="Center"
                  RenderOptions.BitmapInterpolationMode="HighQuality"/>
           <!-- CLAUDEDO label -->
-          <TextBlock Classes="title-brand-name"
+          <TextBlock Classes="title-brand-name eyebrow"
                      Text="CLAUDEDO"
-                     FontFamily="{DynamicResource MonoFont}"
-                     FontSize="11"
                      Foreground="{DynamicResource TextBrush}"
                      LetterSpacing="1.4"
                      VerticalAlignment="Center"/>
           <!-- separator dot -->
-          <TextBlock Text="·"
-                     FontFamily="{DynamicResource MonoFont}"
-                     FontSize="11"
-                     Foreground="{DynamicResource TextFaintBrush}"
+          <TextBlock Classes="meta"
+                     Text="·"
                      VerticalAlignment="Center"/>
           <!-- current list name -->
-          <TextBlock Text="{Binding Lists.SelectedList.Name, Converter={StaticResource UpperCase}}"
-                     FontFamily="{DynamicResource MonoFont}"
-                     FontSize="11"
-                     Foreground="{DynamicResource TextDimBrush}"
+          <TextBlock Classes="meta"
+                     Text="{Binding Lists.SelectedList.Name, Converter={StaticResource UpperCase}}"
                      LetterSpacing="1.4"
                      VerticalAlignment="Center"/>
           <!-- Help menu -->
@@ -63,7 +57,7 @@
                 Background="Transparent"
                 VerticalAlignment="Center">
             <MenuItem Header="Help"
-                      FontSize="11"
+                      FontSize="{StaticResource FontSizeMono}"
                       Foreground="{DynamicResource TextDimBrush}">
               <MenuItem Header="Check for updates"
                         Command="{Binding CheckForUpdatesCommand}"/>
@@ -107,21 +101,20 @@
             IsVisible="{Binding IsUpdateBannerVisible}">
       <Grid ColumnDefinitions="*,Auto,Auto">
         <TextBlock Grid.Column="0"
-                   VerticalAlignment="Center"
-                   Foreground="{DynamicResource TextDimBrush}"
-                   FontSize="12">
+                   Classes="body"
+                   VerticalAlignment="Center">
           <Run Text="Update available: v"/>
           <Run Text="{Binding UpdateCheck.CurrentVersion}"/>
           <Run Text=" → v"/>
           <Run Text="{Binding UpdateBannerLatestVersion}"/>
         </TextBlock>
         <Button Grid.Column="1"
+                Classes="btn"
                 Margin="0,0,8,0"
-                Padding="10,3"
                 Content="Update now"
                 Command="{Binding UpdateNowCommand}"/>
         <Button Grid.Column="2"
-                Padding="10,3"
+                Classes="btn"
                 Content="Dismiss"
                 Command="{Binding DismissBannerCommand}"/>
       </Grid>
@@ -129,11 +122,10 @@
 
     <!-- Inline update status (appears at right of banner row when no banner) -->
     <TextBlock Grid.Row="1"
+               Classes="meta"
                HorizontalAlignment="Right"
                VerticalAlignment="Center"
                Margin="0,0,14,0"
-               FontSize="11"
-               Foreground="{DynamicResource TextFaintBrush}"
                Text="{Binding InlineUpdateStatus}"
                IsVisible="{Binding InlineUpdateStatus, Converter={x:Static ObjectConverters.IsNotNull}}"/>
 
@@ -197,36 +189,32 @@
         <!-- Left: connection pill -->
         <StackPanel DockPanel.Dock="Left" Orientation="Horizontal" Spacing="7"
                     VerticalAlignment="Center">
-          <Ellipse Width="7" Height="7" Fill="#4CAF50"
+          <Ellipse Width="7" Height="7" Fill="{DynamicResource StatusRunningBrush}"
                    IsVisible="{Binding Worker.IsConnected}"/>
-          <Ellipse Width="7" Height="7" Fill="#FFA726"
+          <Ellipse Width="7" Height="7" Fill="{DynamicResource StatusReviewBrush}"
                    IsVisible="{Binding Worker.IsReconnecting}"/>
-          <Ellipse Width="7" Height="7" Fill="#EF5350"
+          <Ellipse Width="7" Height="7" Fill="{DynamicResource StatusErrorBrush}"
                    IsVisible="{Binding IsOffline}"/>
-          <TextBlock Text="{Binding ConnectionText, Converter={StaticResource UpperCase}}"
-                     FontFamily="{DynamicResource MonoFont}"
-                     FontSize="10"
+          <TextBlock Classes="eyebrow"
+                     Text="{Binding ConnectionText, Converter={StaticResource UpperCase}}"
                      LetterSpacing="1.4"
-                     Foreground="{DynamicResource TextDimBrush}"
                      VerticalAlignment="Center"/>
         </StackPanel>
 
         <!-- Right: worker log line -->
         <TextBlock DockPanel.Dock="Right"
+                   Classes="meta"
                    Text="{Binding WorkerLogText}"
                    IsVisible="{Binding IsWorkerLogVisible}"
                    Foreground="{Binding WorkerLogLevel, Converter={StaticResource WorkerLogLevelToBrush}}"
-                   FontFamily="{DynamicResource MonoFont}"
-                   FontSize="10"
                    LetterSpacing="1.4"
                    TextTrimming="CharacterEllipsis"
                    VerticalAlignment="Center"/>
 
         <!-- Right: prime status notification -->
         <TextBlock DockPanel.Dock="Right"
+                   Classes="meta"
                    Text="{Binding PrimeStatus}"
-                   Foreground="{DynamicResource TextDimBrush}"
-                   FontSize="11"
                    VerticalAlignment="Center"
                    Margin="12,0,0,0"
                    IsVisible="{Binding PrimeStatus, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/>

src/ClaudeDo.Ui/Views/Modals/AboutModalView.axaml

@@ -1,6 +1,7 @@
 <Window xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:vm="using:ClaudeDo.Ui.ViewModels.Modals"
+        xmlns:ctl="using:ClaudeDo.Ui.Views.Controls"
         x:Class="ClaudeDo.Ui.Views.Modals.AboutModalView"
         x:DataType="vm:AboutModalViewModel"
         Title="About ClaudeDo"
@@ -12,38 +13,24 @@
   <Window.KeyBindings>
     <KeyBinding Gesture="Escape" Command="{Binding CloseCommand}"/>
   </Window.KeyBindings>
-  <Border BorderBrush="{DynamicResource LineBrush}" BorderThickness="1">
-    <Grid RowDefinitions="36,*,52">
-      <Border Grid.Row="0" Background="{DynamicResource DeepBrush}"
-              BorderBrush="{DynamicResource LineBrush}" BorderThickness="0,0,0,1">
-        <Grid ColumnDefinitions="*,Auto" Margin="14,0">
-          <TextBlock Text="ABOUT" FontFamily="{DynamicResource MonoFont}" FontSize="11"
-                     LetterSpacing="1.4" Foreground="{DynamicResource TextBrush}" VerticalAlignment="Center"/>
-          <Button Grid.Column="1" Classes="icon-btn" Content="✕" FontSize="12"
-                  Command="{Binding CloseCommand}" VerticalAlignment="Center"/>
-        </Grid>
-      </Border>
-      <ScrollViewer Grid.Row="1" Padding="20,16" HorizontalScrollBarVisibility="Disabled">
+
+  <ctl:ModalShell Title="ABOUT" CloseCommand="{Binding CloseCommand}">
+    <!-- Body -->
+    <ScrollViewer Padding="20,16" HorizontalScrollBarVisibility="Disabled">
       <Grid RowDefinitions="Auto,Auto,Auto,Auto" ColumnDefinitions="90,*,Auto" RowSpacing="10" ColumnSpacing="8">
-          <TextBlock Grid.Row="0" Grid.Column="0" Text="Version" Foreground="{DynamicResource TextDimBrush}" VerticalAlignment="Center"/>
-          <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding AppVersion}" FontFamily="{DynamicResource MonoFont}" VerticalAlignment="Center"/>
-          <TextBlock Grid.Row="1" Grid.Column="0" Text="Data" Foreground="{DynamicResource TextDimBrush}" VerticalAlignment="Center"/>
-          <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding DataFolderPath}" FontFamily="{DynamicResource MonoFont}" TextTrimming="CharacterEllipsis" VerticalAlignment="Center"/>
-          <Button Grid.Row="1" Grid.Column="2" Content="Open" Command="{Binding OpenPathCommand}" CommandParameter="{Binding DataFolderPath}"/>
-          <TextBlock Grid.Row="2" Grid.Column="0" Text="Logs" Foreground="{DynamicResource TextDimBrush}" VerticalAlignment="Center"/>
-          <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding LogsFolderPath}" FontFamily="{DynamicResource MonoFont}" TextTrimming="CharacterEllipsis" VerticalAlignment="Center"/>
-          <Button Grid.Row="2" Grid.Column="2" Content="Open" Command="{Binding OpenPathCommand}" CommandParameter="{Binding LogsFolderPath}"/>
-          <TextBlock Grid.Row="3" Grid.Column="0" Text="Config" Foreground="{DynamicResource TextDimBrush}" VerticalAlignment="Center"/>
-          <TextBlock Grid.Row="3" Grid.Column="1" Text="{Binding WorkerConfigPath}" FontFamily="{DynamicResource MonoFont}" TextTrimming="CharacterEllipsis" VerticalAlignment="Center"/>
-          <Button Grid.Row="3" Grid.Column="2" Content="Open" Command="{Binding OpenPathCommand}" CommandParameter="{Binding WorkerConfigPath}"/>
+        <TextBlock Classes="meta" Grid.Row="0" Grid.Column="0" Text="Version" VerticalAlignment="Center"/>
+        <TextBlock Classes="meta" Grid.Row="0" Grid.Column="1" Text="{Binding AppVersion}" VerticalAlignment="Center"/>
+        <TextBlock Classes="meta" Grid.Row="1" Grid.Column="0" Text="Data" VerticalAlignment="Center"/>
+        <TextBlock Classes="path-mono" Grid.Row="1" Grid.Column="1" Text="{Binding DataFolderPath}" VerticalAlignment="Center"/>
+        <Button Classes="btn" Grid.Row="1" Grid.Column="2" Content="Open" Command="{Binding OpenPathCommand}" CommandParameter="{Binding DataFolderPath}"/>
+        <TextBlock Classes="meta" Grid.Row="2" Grid.Column="0" Text="Logs" VerticalAlignment="Center"/>
+        <TextBlock Classes="path-mono" Grid.Row="2" Grid.Column="1" Text="{Binding LogsFolderPath}" VerticalAlignment="Center"/>
+        <Button Classes="btn" Grid.Row="2" Grid.Column="2" Content="Open" Command="{Binding OpenPathCommand}" CommandParameter="{Binding LogsFolderPath}"/>
+        <TextBlock Classes="meta" Grid.Row="3" Grid.Column="0" Text="Config" VerticalAlignment="Center"/>
+        <TextBlock Classes="path-mono" Grid.Row="3" Grid.Column="1" Text="{Binding WorkerConfigPath}" VerticalAlignment="Center"/>
+        <Button Classes="btn" Grid.Row="3" Grid.Column="2" Content="Open" Command="{Binding OpenPathCommand}" CommandParameter="{Binding WorkerConfigPath}"/>
       </Grid>
     </ScrollViewer>
-      <Border Grid.Row="2" Background="{DynamicResource DeepBrush}"
-              BorderBrush="{DynamicResource LineBrush}" BorderThickness="0,1,0,0">
-        <StackPanel Orientation="Horizontal" Spacing="8" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="16,0">
-          <Button Content="Close" Command="{Binding CloseCommand}" MinWidth="90"/>
-        </StackPanel>
-      </Border>
-    </Grid>
-  </Border>
+
+  </ctl:ModalShell>
 </Window>

src/ClaudeDo.Ui/Views/Modals/DiffModalView.axaml

@@ -1,6 +1,7 @@
 <Window xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:vm="using:ClaudeDo.Ui.ViewModels.Modals"
+        xmlns:ctl="using:ClaudeDo.Ui.Views.Controls"
         x:Class="ClaudeDo.Ui.Views.Modals.DiffModalView"
         x:DataType="vm:DiffModalViewModel"
         Title="Diff"
@@ -8,7 +9,7 @@
         WindowDecorations="None"
         ExtendClientAreaToDecorationsHint="True"
         WindowStartupLocation="CenterOwner"
-        Background="{StaticResource SurfaceBrush}">
+        Background="{DynamicResource SurfaceBrush}">
 
   <Window.KeyBindings>
     <KeyBinding Gesture="Escape" Command="{Binding CloseCommand}"/>
@@ -17,10 +18,10 @@
   <Window.Styles>
     <!-- diff line row tints via Tag selector (compiled-binding-friendly) -->
     <Style Selector="Border.diff-line[Tag=add]">
-      <Setter Property="Background" Value="#1A4A6B4A"/>
+      <Setter Property="Background" Value="{StaticResource RunningTintBrush}"/>
     </Style>
     <Style Selector="Border.diff-line[Tag=del]">
-      <Setter Property="Background" Value="#1AC87060"/>
+      <Setter Property="Background" Value="{StaticResource ErrorTintBrush}"/>
     </Style>
     <Style Selector="Border.diff-line[Tag=ctx]">
       <Setter Property="Background" Value="Transparent"/>
@@ -45,44 +46,20 @@
     </Style>
   </Window.Styles>
 
-  <!-- Outer container — rectangular so the OS window rectangle stays filled (no black corners) -->
-  <Border Background="{StaticResource SurfaceBrush}"
-          BorderBrush="{StaticResource LineBrush}"
-          BorderThickness="1">
-    <Grid RowDefinitions="36,*">
-
-      <!-- Title bar / drag handle -->
-      <Border Grid.Row="0"
-              x:Name="TitleBar"
-              Background="{StaticResource Surface2Brush}"
-              BorderBrush="{StaticResource LineBrush}"
-              BorderThickness="0,0,0,1"
-              PointerPressed="TitleBar_PointerPressed">
-        <Grid ColumnDefinitions="*,Auto" Margin="14,0">
-          <TextBlock Text="Diff" VerticalAlignment="Center"
-                     FontFamily="{StaticResource MonoFamily}"
-                     FontSize="12"
-                     Foreground="{StaticResource TextDimBrush}"/>
-          <StackPanel Grid.Column="1" Orientation="Horizontal" Spacing="4" VerticalAlignment="Center">
-            <Button Content="Merge…"
-                    Command="{Binding MergeCommand}"
-                    Margin="0,0,4,0" />
-            <Button Classes="icon-btn"
-                    Content="✕"
-                    FontSize="12"
-                    Command="{Binding CloseCommand}" />
+  <ctl:ModalShell Title="DIFF" CloseCommand="{Binding CloseCommand}">
+    <ctl:ModalShell.Footer>
+      <StackPanel Orientation="Horizontal" Spacing="8"
+                  HorizontalAlignment="Right" VerticalAlignment="Center">
+        <Button Classes="btn" Content="Merge…" Command="{Binding MergeCommand}"/>
       </StackPanel>
-        </Grid>
-      </Border>
+    </ctl:ModalShell.Footer>
 
     <!-- Body: sidebar + diff content -->
-      <Grid Grid.Row="1" ColumnDefinitions="240,*">
+    <Grid ColumnDefinitions="240,*">
 
       <!-- File sidebar -->
       <Border Grid.Column="0"
-                BorderBrush="{StaticResource LineBrush}"
-                BorderThickness="0,0,1,0"
-                Background="{StaticResource DeepBrush}">
+              Classes="sidebar-pane">
         <ListBox ItemsSource="{Binding Files}"
                  SelectedItem="{Binding SelectedFile, Mode=TwoWay}"
                  Background="Transparent"
@@ -92,23 +69,16 @@
             <DataTemplate x:DataType="vm:DiffFileViewModel">
               <Border Padding="10,8" Background="Transparent">
                 <StackPanel Spacing="4">
-                    <TextBlock Text="{Binding Path}"
-                               FontFamily="{StaticResource MonoFamily}"
-                               FontSize="11"
-                               Foreground="{StaticResource TextDimBrush}"
+                  <TextBlock Classes="path-mono" Text="{Binding Path}"
                              TextTrimming="PrefixCharacterEllipsis"/>
                   <StackPanel Orientation="Horizontal" Spacing="6">
                     <Border Classes="chip" Padding="5,2">
-                        <TextBlock Foreground="{StaticResource MossBrightBrush}"
-                                   FontFamily="{StaticResource MonoFamily}"
-                                   FontSize="10"
+                      <TextBlock Foreground="{DynamicResource MossBrightBrush}"
                                  Text="{Binding Additions, StringFormat='+{0}'}"/>
                     </Border>
                     <Border Classes="chip" Padding="5,2">
-                        <TextBlock Foreground="{StaticResource BloodBrush}"
-                                   FontFamily="{StaticResource MonoFamily}"
-                                   FontSize="10"
-                                   Text="{Binding Deletions, StringFormat='\u2212{0}'}"/>
+                      <TextBlock Foreground="{DynamicResource BloodBrush}"
+                                 Text="{Binding Deletions, StringFormat='−{0}'}"/>
                     </Border>
                   </StackPanel>
                 </StackPanel>
@@ -119,14 +89,11 @@
       </Border>
 
       <!-- Diff content -->
-        <Grid Grid.Column="1" Background="{StaticResource VoidBrush}">
-          <TextBlock Text="{Binding StatusMessage}"
+      <Grid Grid.Column="1" Background="{DynamicResource VoidBrush}">
+        <TextBlock Classes="body" Text="{Binding StatusMessage}"
                    IsVisible="{Binding StatusMessage, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"
                    HorizontalAlignment="Center"
-                     VerticalAlignment="Center"
-                     Foreground="{StaticResource TextDimBrush}"
-                     FontFamily="{StaticResource MonoFamily}"
-                     FontSize="12"/>
+                   VerticalAlignment="Center"/>
         <ScrollViewer HorizontalScrollBarVisibility="Auto"
                     VerticalScrollBarVisibility="Auto">
         <ItemsControl ItemsSource="{Binding SelectedFile.Lines}">
@@ -140,32 +107,26 @@
                   <TextBlock Grid.Column="0"
                              Text="{Binding OldNo}"
                              Classes="diff-lineno"
-                               FontFamily="{StaticResource MonoFamily}"
-                               FontSize="11"
-                               Foreground="{StaticResource TextFaintBrush}"
                              HorizontalAlignment="Right"
                              Margin="0,0,8,0"/>
                   <!-- New line number -->
                   <TextBlock Grid.Column="1"
                              Text="{Binding NewNo}"
                              Classes="diff-lineno"
-                               FontFamily="{StaticResource MonoFamily}"
-                               FontSize="11"
-                               Foreground="{StaticResource TextFaintBrush}"
                              HorizontalAlignment="Right"
                              Margin="0,0,8,0"/>
                   <!-- Sign -->
                   <TextBlock Grid.Column="2"
                              Classes="diff-sign"
                              Text="{Binding Sign}"
-                               FontFamily="{StaticResource MonoFamily}"
-                               FontSize="11"/>
+                             FontFamily="{DynamicResource MonoFont}"
+                             FontSize="{StaticResource FontSizeMono}"/>
                   <!-- Line text -->
                   <TextBlock Grid.Column="3"
                              Classes="diff-text"
                              Text="{Binding Text}"
-                               FontFamily="{StaticResource MonoFamily}"
-                               FontSize="11"
+                             FontFamily="{DynamicResource MonoFont}"
+                             FontSize="{StaticResource FontSizeMono}"
                              TextWrapping="NoWrap"/>
                 </Grid>
               </Border>
@@ -175,6 +136,5 @@
         </ScrollViewer>
       </Grid>
     </Grid>
-    </Grid>
-  </Border>
+  </ctl:ModalShell>
 </Window>

src/ClaudeDo.Ui/Views/Modals/DiffModalView.axaml.cs

@@ -2,7 +2,6 @@ using Avalonia;
 using Avalonia.Animation;
 using Avalonia.Animation.Easings;
 using Avalonia.Controls;
-using Avalonia.Input;
 using Avalonia.Media;
 using Avalonia.Styling;
 using ClaudeDo.Ui.ViewModels.Modals;
@@ -43,10 +42,4 @@ public partial class DiffModalView : Window
         Opacity = 1;
         RenderTransform = new ScaleTransform(1.0, 1.0);
     }
-
-    private void TitleBar_PointerPressed(object? sender, PointerPressedEventArgs e)
-    {
-        if (e.GetCurrentPoint(this).Properties.IsLeftButtonPressed)
-            BeginMoveDrag(e);
-    }
 }

src/ClaudeDo.Ui/Views/Modals/ListSettingsModalView.axaml

@@ -1,6 +1,7 @@
 <Window xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:vm="clr-namespace:ClaudeDo.Ui.ViewModels.Modals"
+        xmlns:ctl="using:ClaudeDo.Ui.Views.Controls"
         x:Class="ClaudeDo.Ui.Views.Modals.ListSettingsModalView"
         x:DataType="vm:ListSettingsModalViewModel"
         Title="List settings"
@@ -17,68 +18,21 @@
     <KeyBinding Gesture="Enter" Command="{Binding SaveCommand}"/>
   </Window.KeyBindings>
 
-  <Window.Styles>
-    <Style Selector="TextBlock.section-label">
-      <Setter Property="FontFamily" Value="{DynamicResource MonoFont}"/>
-      <Setter Property="FontSize" Value="10"/>
-      <Setter Property="LetterSpacing" Value="1.4"/>
-      <Setter Property="Foreground" Value="{DynamicResource TextFaintBrush}"/>
-      <Setter Property="Margin" Value="4,0,0,6"/>
-    </Style>
-    <Style Selector="TextBlock.field-label">
-      <Setter Property="FontSize" Value="11"/>
-      <Setter Property="Foreground" Value="{DynamicResource TextDimBrush}"/>
-      <Setter Property="Margin" Value="0,0,0,4"/>
-    </Style>
-    <Style Selector="Border.section">
-      <Setter Property="BorderBrush" Value="{DynamicResource LineBrush}"/>
-      <Setter Property="BorderThickness" Value="1"/>
-      <Setter Property="CornerRadius" Value="6"/>
-      <Setter Property="Padding" Value="14"/>
-      <Setter Property="Background" Value="{DynamicResource DeepBrush}"/>
-    </Style>
-    <Style Selector="Button.primary">
-      <Setter Property="Background" Value="{DynamicResource AccentBrush}"/>
-      <Setter Property="Foreground" Value="{DynamicResource DeepBrush}"/>
-      <Setter Property="FontWeight" Value="SemiBold"/>
-    </Style>
-    <Style Selector="Button.danger">
-      <Setter Property="Background" Value="{DynamicResource BloodBrush}"/>
-      <Setter Property="Foreground" Value="White"/>
-    </Style>
-  </Window.Styles>
-
-  <Border Background="{DynamicResource SurfaceBrush}"
-          BorderBrush="{DynamicResource LineBrush}"
-          BorderThickness="1">
-    <Grid RowDefinitions="36,*,52">
-
-      <!-- Title bar -->
-      <Border Grid.Row="0"
-              x:Name="TitleBar"
-              Background="{DynamicResource DeepBrush}"
-              BorderBrush="{DynamicResource LineBrush}"
-              BorderThickness="0,0,0,1"
-              PointerPressed="TitleBar_PointerPressed">
-        <Grid ColumnDefinitions="*,Auto" Margin="14,0">
-          <TextBlock Text="LIST SETTINGS"
-                     FontFamily="{DynamicResource MonoFont}"
-                     FontSize="11"
-                     LetterSpacing="1.4"
-                     Foreground="{DynamicResource TextBrush}"
-                     VerticalAlignment="Center"/>
-          <Button Grid.Column="1"
-                  Classes="icon-btn"
-                  Content="✕"
-                  FontSize="12"
-                  Command="{Binding CancelCommand}"
-                  VerticalAlignment="Center"/>
+  <ctl:ModalShell Title="LIST SETTINGS" CloseCommand="{Binding CancelCommand}">
+    <ctl:ModalShell.Footer>
+      <Grid ColumnDefinitions="Auto,*,Auto" VerticalAlignment="Center">
+        <Button Grid.Column="0" Content="Delete list" Classes="danger"
+                Command="{Binding DeleteCommand}" MinWidth="90"/>
+        <StackPanel Grid.Column="2" Orientation="Horizontal" Spacing="8">
+          <Button Classes="btn" Content="Cancel" Command="{Binding CancelCommand}" MinWidth="90"/>
+          <Button Content="Save" Classes="primary" Command="{Binding SaveCommand}" MinWidth="90"/>
+        </StackPanel>
       </Grid>
-      </Border>
+    </ctl:ModalShell.Footer>
 
     <!-- Body -->
-      <ScrollViewer Grid.Row="1" Padding="20,16">
-        <StackPanel Spacing="18">
+    <ScrollViewer Padding="20,16">
+      <StackPanel Spacing="12">
 
         <!-- GENERAL -->
         <StackPanel Spacing="0">
@@ -94,7 +48,7 @@
                 <TextBlock Classes="field-label" Text="Working directory"/>
                 <Grid ColumnDefinitions="*,Auto">
                   <TextBox Grid.Column="0" Text="{Binding WorkingDir}" PlaceholderText="(none)" />
-                    <Button Grid.Column="1" Content="Browse..." Margin="8,0,0,0" Click="BrowseClicked" />
+                  <Button Classes="btn" Grid.Column="1" Content="Browse..." Margin="8,0,0,0" Click="BrowseClicked" />
                 </Grid>
               </StackPanel>
 
@@ -112,7 +66,7 @@
         <StackPanel Spacing="0">
           <Grid ColumnDefinitions="*,Auto" Margin="4,0,0,6">
             <TextBlock Classes="section-label" Text="AGENT" Margin="0"/>
-              <Button Grid.Column="1" Content="Reset agent settings"
+            <Button Classes="btn" Grid.Column="1" Content="Reset agent settings"
                     Command="{Binding ResetAgentSettingsCommand}" />
           </Grid>
           <Border Classes="section">
@@ -141,22 +95,16 @@
                     <ComboBox.ItemTemplate>
                       <DataTemplate>
                         <StackPanel>
-                            <TextBlock Text="{Binding Name}"
-                                       Foreground="{DynamicResource TextBrush}"/>
-                            <TextBlock Text="{Binding Description}"
-                                       Foreground="{DynamicResource TextMuteBrush}"
-                                       FontSize="11" />
+                          <TextBlock Classes="title" Text="{Binding Name}"/>
+                          <TextBlock Classes="meta" Text="{Binding Description}"/>
                         </StackPanel>
                       </DataTemplate>
                     </ComboBox.ItemTemplate>
                   </ComboBox>
-                    <Button Grid.Column="1" Content="Browse..."
+                  <Button Classes="btn" Grid.Column="1" Content="Browse..."
                           Margin="8,0,0,0" Click="BrowseAgentClicked" />
                 </Grid>
-                  <TextBlock Text="{Binding SelectedAgent.Path}"
-                             FontFamily="{DynamicResource MonoFont}"
-                             FontSize="11"
-                             Foreground="{DynamicResource TextFaintBrush}"
+                <TextBlock Classes="path-mono" Text="{Binding SelectedAgent.Path}"
                            TextTrimming="PrefixCharacterEllipsis"
                            IsVisible="{Binding SelectedAgent.Path, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/>
               </StackPanel>
@@ -167,21 +115,5 @@
       </StackPanel>
     </ScrollViewer>
 
-      <!-- Footer -->
-      <Border Grid.Row="2"
-              Background="{DynamicResource DeepBrush}"
-              BorderBrush="{DynamicResource LineBrush}"
-              BorderThickness="0,1,0,0">
-        <Grid ColumnDefinitions="Auto,*,Auto" VerticalAlignment="Center" Margin="16,0">
-          <Button Grid.Column="0" Content="Delete list" Classes="danger"
-                  Command="{Binding DeleteCommand}" MinWidth="90"/>
-          <StackPanel Grid.Column="2" Orientation="Horizontal" Spacing="8">
-            <Button Content="Cancel" Command="{Binding CancelCommand}" MinWidth="90"/>
-            <Button Content="Save" Classes="primary" Command="{Binding SaveCommand}" MinWidth="90"/>
-          </StackPanel>
-        </Grid>
-      </Border>
-
-    </Grid>
-  </Border>
+  </ctl:ModalShell>
 </Window>

src/ClaudeDo.Ui/Views/Modals/ListSettingsModalView.axaml.cs

@@ -1,5 +1,4 @@
 using Avalonia.Controls;
-using Avalonia.Input;
 using Avalonia.Interactivity;
 using Avalonia.Platform.Storage;
 using ClaudeDo.Data.Models;
@@ -14,12 +13,6 @@ public partial class ListSettingsModalView : Window
         InitializeComponent();
     }
 
-    private void TitleBar_PointerPressed(object? sender, PointerPressedEventArgs e)
-    {
-        if (e.GetCurrentPoint(this).Properties.IsLeftButtonPressed)
-            BeginMoveDrag(e);
-    }
-
     private async void BrowseAgentClicked(object? sender, RoutedEventArgs e)
     {
         if (DataContext is not ListSettingsModalViewModel vm) return;

src/ClaudeDo.Ui/Views/Modals/MergeModalView.axaml

@@ -1,6 +1,7 @@
 <Window xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:vm="clr-namespace:ClaudeDo.Ui.ViewModels.Modals"
+        xmlns:ctl="using:ClaudeDo.Ui.Views.Controls"
         x:Class="ClaudeDo.Ui.Views.Modals.MergeModalView"
         x:DataType="vm:MergeModalViewModel"
         Title="Merge worktree"
@@ -15,54 +16,22 @@
     <KeyBinding Gesture="Escape" Command="{Binding CancelCommand}"/>
   </Window.KeyBindings>
 
-  <Window.Styles>
-    <Style Selector="TextBlock.field-label">
-      <Setter Property="FontSize" Value="11"/>
-      <Setter Property="Foreground" Value="{DynamicResource TextDimBrush}"/>
-      <Setter Property="Margin" Value="0,0,0,4"/>
-    </Style>
-    <Style Selector="Button.primary">
-      <Setter Property="Background" Value="{DynamicResource AccentBrush}"/>
-      <Setter Property="Foreground" Value="{DynamicResource DeepBrush}"/>
-      <Setter Property="FontWeight" Value="SemiBold"/>
-    </Style>
-  </Window.Styles>
-
-  <Border Background="{DynamicResource SurfaceBrush}"
-          BorderBrush="{DynamicResource LineBrush}"
-          BorderThickness="1">
-    <Grid RowDefinitions="36,*,52">
-
-      <!-- Title bar -->
-      <Border Grid.Row="0"
-              x:Name="TitleBar"
-              Background="{DynamicResource DeepBrush}"
-              BorderBrush="{DynamicResource LineBrush}"
-              BorderThickness="0,0,0,1"
-              PointerPressed="TitleBar_PointerPressed">
-        <Grid ColumnDefinitions="*,Auto" Margin="14,0">
-          <TextBlock Text="MERGE WORKTREE"
-                     FontFamily="{DynamicResource MonoFont}"
-                     FontSize="11"
-                     LetterSpacing="1.4"
-                     Foreground="{DynamicResource TextBrush}"
-                     VerticalAlignment="Center"/>
-          <Button Grid.Column="1"
-                  Classes="icon-btn"
-                  Content="✕"
-                  FontSize="12"
-                  Command="{Binding CancelCommand}"
-                  VerticalAlignment="Center"/>
-        </Grid>
-      </Border>
+  <ctl:ModalShell Title="MERGE WORKTREE" CloseCommand="{Binding CancelCommand}">
+    <ctl:ModalShell.Footer>
+      <StackPanel Orientation="Horizontal" Spacing="8"
+                  HorizontalAlignment="Right" VerticalAlignment="Center">
+        <Button Classes="btn" Content="Cancel" Command="{Binding CancelCommand}" MinWidth="90"/>
+        <Button Content="Merge" Classes="primary"
+                Command="{Binding SubmitCommand}"
+                IsDefault="True" MinWidth="90"/>
+      </StackPanel>
+    </ctl:ModalShell.Footer>
 
     <!-- Body -->
-      <ScrollViewer Grid.Row="1" Padding="20,16">
+    <ScrollViewer Padding="20,16">
       <StackPanel Spacing="12">
 
-          <TextBlock Text="{Binding TaskTitle, StringFormat='Merging: {0}'}"
-                     FontWeight="SemiBold"
-                     Foreground="{DynamicResource TextBrush}" />
+        <TextBlock Classes="title" Text="{Binding TaskTitle, StringFormat='Merging: {0}'}" />
 
         <StackPanel Spacing="4">
           <TextBlock Classes="field-label" Text="Target branch"/>
@@ -90,22 +59,14 @@
                    TextWrapping="Wrap"
                    IsVisible="{Binding ErrorMessage, Converter={x:Static ObjectConverters.IsNotNull}}" />
 
-          <Border BorderBrush="{DynamicResource BloodBrush}"
-                  BorderThickness="1"
-                  CornerRadius="6"
-                  Padding="12,10"
+        <Border Classes="danger-box"
                 IsVisible="{Binding HasConflict}">
           <StackPanel Spacing="4">
-              <TextBlock Text="Conflicted files:"
-                         FontWeight="SemiBold"
-                         Foreground="{DynamicResource TextBrush}" />
+            <TextBlock Classes="title" Text="Conflicted files:" />
             <ItemsControl ItemsSource="{Binding ConflictFiles}">
               <ItemsControl.ItemTemplate>
                 <DataTemplate>
-                    <TextBlock Text="{Binding}"
-                               FontFamily="{DynamicResource MonoFont}"
-                               FontSize="11"
-                               Foreground="{DynamicResource TextDimBrush}" />
+                  <TextBlock Classes="meta" Text="{Binding}" />
                 </DataTemplate>
               </ItemsControl.ItemTemplate>
             </ItemsControl>
@@ -118,21 +79,5 @@
       </StackPanel>
     </ScrollViewer>
 
-      <!-- Footer -->
-      <Border Grid.Row="2"
-              Background="{DynamicResource DeepBrush}"
-              BorderBrush="{DynamicResource LineBrush}"
-              BorderThickness="0,1,0,0">
-        <StackPanel Orientation="Horizontal" Spacing="8"
-                    HorizontalAlignment="Right" VerticalAlignment="Center"
-                    Margin="16,0">
-          <Button Content="Cancel" Command="{Binding CancelCommand}" MinWidth="90"/>
-          <Button Content="Merge" Classes="primary"
-                  Command="{Binding SubmitCommand}"
-                  IsDefault="True" MinWidth="90"/>
-        </StackPanel>
-      </Border>
-
-    </Grid>
-  </Border>
+  </ctl:ModalShell>
 </Window>

src/ClaudeDo.Ui/Views/Modals/MergeModalView.axaml.cs

@@ -1,5 +1,4 @@
 using Avalonia.Controls;
-using Avalonia.Input;
 using ClaudeDo.Ui.ViewModels.Modals;
 
 namespace ClaudeDo.Ui.Views.Modals;
@@ -18,9 +17,5 @@ public partial class MergeModalView : Window
         };
     }
 
-    private void TitleBar_PointerPressed(object? sender, PointerPressedEventArgs e)
-    {
-        if (e.GetCurrentPoint(this).Properties.IsLeftButtonPressed)
-            BeginMoveDrag(e);
-    }
+
 }

src/ClaudeDo.Ui/Views/Modals/RepoImportModalView.axaml

@@ -1,6 +1,7 @@
 <Window xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:vm="using:ClaudeDo.Ui.ViewModels.Modals"
+        xmlns:ctl="using:ClaudeDo.Ui.Views.Controls"
         x:Class="ClaudeDo.Ui.Views.Modals.RepoImportModalView"
         x:DataType="vm:RepoImportModalViewModel"
         Title="Add repos as lists"
@@ -12,34 +13,33 @@
   <Window.KeyBindings>
     <KeyBinding Gesture="Escape" Command="{Binding CancelCommand}"/>
   </Window.KeyBindings>
-  <Border BorderBrush="{DynamicResource LineBrush}" BorderThickness="1">
-    <Grid RowDefinitions="36,Auto,*,52">
 
-      <!-- Header -->
-      <Border Grid.Row="0" Background="{DynamicResource DeepBrush}"
-              BorderBrush="{DynamicResource LineBrush}" BorderThickness="0,0,0,1">
-        <Grid ColumnDefinitions="*,Auto" Margin="14,0">
-          <TextBlock Text="ADD REPOS AS LISTS" FontFamily="{DynamicResource MonoFont}" FontSize="11"
-                     LetterSpacing="1.4" Foreground="{DynamicResource TextBrush}" VerticalAlignment="Center"/>
-          <Button Grid.Column="1" Classes="icon-btn" Content="✕" FontSize="12"
-                  Command="{Binding CancelCommand}" VerticalAlignment="Center"/>
-        </Grid>
-      </Border>
+  <ctl:ModalShell Title="ADD REPOS AS LISTS" CloseCommand="{Binding CancelCommand}">
+    <ctl:ModalShell.Footer>
+      <StackPanel Orientation="Horizontal" Spacing="8" HorizontalAlignment="Right"
+                  VerticalAlignment="Center">
+        <Button Classes="btn" Content="Cancel" Command="{Binding CancelCommand}" MinWidth="90"/>
+        <Button Content="{Binding CreateButtonText}" Command="{Binding CreateCommand}"
+                IsEnabled="{Binding CanCreate}" MinWidth="120" Classes="primary"/>
+      </StackPanel>
+    </ctl:ModalShell.Footer>
 
+    <!-- Body: toolbar + checklist -->
+    <DockPanel>
       <!-- Toolbar: search + folder actions -->
-      <StackPanel Grid.Row="1" Spacing="8" Margin="16,12,16,6">
+      <StackPanel DockPanel.Dock="Top" Spacing="8" Margin="20,12,20,6">
         <TextBox Text="{Binding SearchText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                  PlaceholderText="Search repos…"/>
         <Grid ColumnDefinitions="Auto,*,Auto">
-          <Button Grid.Column="0" Content="Add folder…" Click="AddFolderClicked"/>
-          <Button Grid.Column="2" Content="Forget folders"
+          <Button Classes="btn" Grid.Column="0" Content="Add folder…" Click="AddFolderClicked"/>
+          <Button Classes="btn" Grid.Column="2" Content="Forget folders"
                   Command="{Binding ForgetFoldersCommand}"
                   IsVisible="{Binding HasFolders}"/>
         </Grid>
       </StackPanel>
 
       <!-- Repo checklist -->
-      <ScrollViewer Grid.Row="2" Padding="16,2,16,8">
+      <ScrollViewer Padding="20,2,20,8">
         <ItemsControl ItemsSource="{Binding Repos}">
           <ItemsControl.ItemTemplate>
             <DataTemplate DataType="vm:RepoImportItemViewModel">
@@ -49,16 +49,11 @@
                           IsChecked="{Binding IsChecked, Mode=TwoWay}"
                           IsEnabled="{Binding CanToggle}"
                           VerticalAlignment="Center"/>
-                <TextBlock Grid.Column="1" Text="{Binding Name}"
-                           Foreground="{DynamicResource TextBrush}" FontSize="12"
+                <TextBlock Classes="body" Grid.Column="1" Text="{Binding Name}"
                            VerticalAlignment="Center" Margin="4,0,0,0"/>
-                <TextBlock Grid.Column="2" Text="{Binding FullPath}"
-                           Foreground="{DynamicResource TextFaintBrush}"
-                           FontFamily="{DynamicResource MonoFont}" FontSize="10"
-                           TextTrimming="CharacterEllipsis"
+                <TextBlock Classes="path-mono" Grid.Column="2" Text="{Binding FullPath}"
                            VerticalAlignment="Center" Margin="8,0,0,0"/>
-                <TextBlock Grid.Column="3" Text="(already added)"
-                           Foreground="{DynamicResource TextFaintBrush}" FontSize="10"
+                <TextBlock Classes="meta" Grid.Column="3" Text="(already added)"
                            VerticalAlignment="Center" Margin="8,0,0,0"
                            IsVisible="{Binding AlreadyAdded}"/>
               </Grid>
@@ -66,18 +61,7 @@
           </ItemsControl.ItemTemplate>
         </ItemsControl>
       </ScrollViewer>
+    </DockPanel>
 
-      <!-- Footer -->
-      <Border Grid.Row="3" Background="{DynamicResource DeepBrush}"
-              BorderBrush="{DynamicResource LineBrush}" BorderThickness="0,1,0,0">
-        <StackPanel Orientation="Horizontal" Spacing="8" HorizontalAlignment="Right"
-                    VerticalAlignment="Center" Margin="16,0">
-          <Button Content="Cancel" Command="{Binding CancelCommand}" MinWidth="90"/>
-          <Button Content="{Binding CreateButtonText}" Command="{Binding CreateCommand}"
-                  IsEnabled="{Binding CanCreate}" MinWidth="120" Classes="primary"/>
-        </StackPanel>
-      </Border>
-
-    </Grid>
-  </Border>
+  </ctl:ModalShell>
 </Window>

src/ClaudeDo.Ui/Views/Modals/SettingsModalView.axaml

@@ -22,71 +22,28 @@
     <conv:TimeSpanToHhmmConverter x:Key="TimeSpanToHhmm"/>
   </Window.Resources>
 
-  <Window.Styles>
-    <Style Selector="TextBlock.section-label">
-      <Setter Property="FontFamily" Value="{DynamicResource MonoFont}"/>
-      <Setter Property="FontSize" Value="10"/>
-      <Setter Property="LetterSpacing" Value="1.4"/>
-      <Setter Property="Foreground" Value="{DynamicResource TextFaintBrush}"/>
-      <Setter Property="Margin" Value="4,0,0,6"/>
-    </Style>
-    <Style Selector="TextBlock.field-label">
-      <Setter Property="FontSize" Value="11"/>
-      <Setter Property="Foreground" Value="{DynamicResource TextDimBrush}"/>
-      <Setter Property="Margin" Value="0,0,0,4"/>
-    </Style>
-    <Style Selector="TextBlock.path-mono">
-      <Setter Property="FontFamily" Value="{DynamicResource MonoFont}"/>
-      <Setter Property="FontSize" Value="11"/>
-      <Setter Property="Foreground" Value="{DynamicResource TextDimBrush}"/>
-      <Setter Property="TextTrimming" Value="CharacterEllipsis"/>
-    </Style>
-    <Style Selector="Button.danger">
-      <Setter Property="Background" Value="{DynamicResource BloodBrush}"/>
-      <Setter Property="Foreground" Value="White"/>
-    </Style>
-    <Style Selector="Button.primary">
-      <Setter Property="Background" Value="{DynamicResource AccentBrush}"/>
-      <Setter Property="Foreground" Value="{DynamicResource DeepBrush}"/>
-      <Setter Property="FontWeight" Value="SemiBold"/>
-    </Style>
-  </Window.Styles>
-
-  <Border Background="{DynamicResource SurfaceBrush}"
-          BorderBrush="{DynamicResource LineBrush}"
-          BorderThickness="1">
-    <Grid RowDefinitions="36,*,52">
-
-      <!-- Title bar -->
-      <Border Grid.Row="0" x:Name="TitleBar"
-              Background="{DynamicResource DeepBrush}"
-              BorderBrush="{DynamicResource LineBrush}"
-              BorderThickness="0,0,0,1"
-              PointerPressed="TitleBar_PointerPressed">
-        <Grid ColumnDefinitions="*,Auto" Margin="14,0">
-          <TextBlock Text="SETTINGS"
-                     FontFamily="{DynamicResource MonoFont}"
-                     FontSize="11"
-                     LetterSpacing="1.4"
-                     Foreground="{DynamicResource TextBrush}"
-                     VerticalAlignment="Center"/>
-          <Button Grid.Column="1" Classes="icon-btn" Content="✕" FontSize="12"
-                  Command="{Binding CancelCommand}" VerticalAlignment="Center"/>
-        </Grid>
-      </Border>
+  <ctl:ModalShell Title="SETTINGS" CloseCommand="{Binding CancelCommand}">
+    <ctl:ModalShell.Footer>
+      <StackPanel Orientation="Horizontal" Spacing="8"
+                  HorizontalAlignment="Right" VerticalAlignment="Center">
+        <Button Classes="btn" Content="Cancel" Command="{Binding CancelCommand}" MinWidth="90"/>
+        <Button Content="Save" Classes="primary"
+                Command="{Binding SaveCommand}"
+                IsEnabled="{Binding !IsBusy}" MinWidth="90"/>
+      </StackPanel>
+    </ctl:ModalShell.Footer>
 
     <!-- Body: tabs + bottom validation/status strip -->
-      <DockPanel Grid.Row="1">
+    <DockPanel>
       <StackPanel DockPanel.Dock="Bottom" Margin="20,0,20,8" Spacing="2">
-          <TextBlock Text="{Binding ValidationError}"
-                     Foreground="{DynamicResource BloodBrush}" FontSize="11"
+        <TextBlock Classes="meta" Text="{Binding ValidationError}"
+                   Foreground="{DynamicResource BloodBrush}"
                    IsVisible="{Binding ValidationError, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/>
-          <TextBlock Text="{Binding StatusMessage}"
-                     Foreground="{DynamicResource TextDimBrush}" FontSize="11"
+        <TextBlock Classes="meta" Text="{Binding StatusMessage}"
                    IsVisible="{Binding StatusMessage, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/>
       </StackPanel>
 
-        <TabControl Padding="20,12" TabStripPlacement="Top">
+      <TabControl Padding="20,16" TabStripPlacement="Top">
 
         <TabItem Header="General">
           <ScrollViewer>
@@ -143,11 +100,11 @@
                 <NumericUpDown Value="{Binding Worktrees.WorktreeAutoCleanupDays, Mode=TwoWay}"
                                Width="130" Minimum="1" Maximum="365" Increment="1" FormatString="0"
                                IsEnabled="{Binding Worktrees.WorktreeAutoCleanupEnabled}"/>
-                  <TextBlock Text="days" VerticalAlignment="Center" Foreground="{DynamicResource TextDimBrush}"/>
+                <TextBlock Classes="body" Text="days" VerticalAlignment="Center"/>
               </StackPanel>
               <Border BorderBrush="{DynamicResource LineBrush}" BorderThickness="0,1,0,0" Margin="0,4,0,0"/>
               <StackPanel Spacing="8">
-                  <Button Content="Cleanup finished worktrees"
+                <Button Classes="btn" Content="Cleanup finished worktrees"
                         Command="{Binding Worktrees.CleanupWorktreesCommand}"
                         HorizontalAlignment="Left"/>
                 <StackPanel>
@@ -155,14 +112,13 @@
                           Command="{Binding Worktrees.RequestResetConfirmCommand}"
                           HorizontalAlignment="Left"
                           IsVisible="{Binding !Worktrees.ShowResetConfirm}"/>
-                    <Border BorderBrush="{DynamicResource BloodBrush}" BorderThickness="1"
-                            CornerRadius="6" Padding="12,10"
+                  <Border Classes="danger-box"
                           IsVisible="{Binding Worktrees.ShowResetConfirm}">
                     <StackPanel Spacing="8">
                       <TextBlock Text="Remove ALL worktrees? Uncommitted work will be lost."
                                  Foreground="{DynamicResource TextBrush}" TextWrapping="Wrap"/>
                       <StackPanel Orientation="Horizontal" Spacing="8">
-                          <Button Content="Cancel" Command="{Binding Worktrees.CancelResetConfirmCommand}"/>
+                        <Button Classes="btn" Content="Cancel" Command="{Binding Worktrees.CancelResetConfirmCommand}"/>
                         <Button Content="Remove All" Classes="danger"
                                 Command="{Binding Worktrees.ConfirmResetAllCommand}"/>
                       </StackPanel>
@@ -170,8 +126,7 @@
                   </Border>
                 </StackPanel>
               </StackPanel>
-                <TextBlock Text="{Binding Worktrees.StatusMessage}"
-                           Foreground="{DynamicResource TextDimBrush}" FontSize="11"
+              <TextBlock Classes="meta" Text="{Binding Worktrees.StatusMessage}"
                          IsVisible="{Binding Worktrees.StatusMessage, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/>
             </StackPanel>
           </ScrollViewer>
@@ -179,13 +134,12 @@
 
         <TabItem Header="Files">
           <ScrollViewer>
-              <StackPanel Spacing="14" Margin="0,8,0,0">
+            <StackPanel Spacing="12" Margin="0,8,0,0">
               <StackPanel Spacing="6">
                 <TextBlock Classes="section-label" Text="AGENTS"/>
-                  <TextBlock Text="Restore bundled default agents. Existing files are not overwritten."
-                             FontSize="11" TextWrapping="Wrap"
-                             Foreground="{DynamicResource TextDimBrush}"/>
-                  <Button Content="Restore default agents"
+                <TextBlock Classes="meta" Text="Restore bundled default agents. Existing files are not overwritten."
+                           TextWrapping="Wrap"/>
+                <Button Classes="btn" Content="Restore default agents"
                         Command="{Binding Files.RestoreDefaultAgentsCommand}"
                         IsEnabled="{Binding !Files.IsBusy}"
                         HorizontalAlignment="Left"/>
@@ -195,20 +149,19 @@
                 <Grid RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="90,*,Auto" RowSpacing="8">
                   <TextBlock Grid.Row="0" Grid.Column="0" Classes="field-label" Text="System" VerticalAlignment="Center"/>
                   <TextBlock Grid.Row="0" Grid.Column="1" Classes="path-mono" Text="{Binding Files.SystemPromptPath}" VerticalAlignment="Center"/>
-                    <Button Grid.Row="0" Grid.Column="2" Content="Open in editor"
+                  <Button Classes="btn" Grid.Row="0" Grid.Column="2" Content="Open in editor"
                           Command="{Binding Files.OpenPromptCommand}" CommandParameter="System"/>
                   <TextBlock Grid.Row="1" Grid.Column="0" Classes="field-label" Text="Planning" VerticalAlignment="Center"/>
                   <TextBlock Grid.Row="1" Grid.Column="1" Classes="path-mono" Text="{Binding Files.PlanningPromptPath}" VerticalAlignment="Center"/>
-                    <Button Grid.Row="1" Grid.Column="2" Content="Open in editor"
+                  <Button Classes="btn" Grid.Row="1" Grid.Column="2" Content="Open in editor"
                           Command="{Binding Files.OpenPromptCommand}" CommandParameter="Planning"/>
                   <TextBlock Grid.Row="2" Grid.Column="0" Classes="field-label" Text="Agent" VerticalAlignment="Center"/>
                   <TextBlock Grid.Row="2" Grid.Column="1" Classes="path-mono" Text="{Binding Files.AgentPromptPath}" VerticalAlignment="Center"/>
-                    <Button Grid.Row="2" Grid.Column="2" Content="Open in editor"
+                  <Button Classes="btn" Grid.Row="2" Grid.Column="2" Content="Open in editor"
                           Command="{Binding Files.OpenPromptCommand}" CommandParameter="Agent"/>
                 </Grid>
               </StackPanel>
-                <TextBlock Text="{Binding Files.StatusMessage}"
-                           Foreground="{DynamicResource TextDimBrush}" FontSize="11"
+              <TextBlock Classes="meta" Text="{Binding Files.StatusMessage}"
                          IsVisible="{Binding Files.StatusMessage, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/>
             </StackPanel>
           </ScrollViewer>
@@ -217,8 +170,7 @@
         <TabItem Header="Prime Claude">
           <ScrollViewer>
             <StackPanel Spacing="12" Margin="0,8,0,0">
-                <TextBlock TextWrapping="Wrap" FontSize="11"
-                           Foreground="{DynamicResource TextDimBrush}"
+              <TextBlock Classes="meta" TextWrapping="Wrap"
                          Text="Prime your Claude usage window each morning by firing a single non-interactive ping at a chosen time. Only runs while ClaudeDo is open. If the app starts within 30 minutes of the target time, the ping fires immediately."/>
               <ItemsControl ItemsSource="{Binding Prime.Rows}">
                 <ItemsControl.ItemTemplate>
@@ -239,10 +191,9 @@
                                  VerticalAlignment="Center"/>
                         <CheckBox Grid.Column="3" Content="Mon–Fri"
                                   IsChecked="{Binding WorkdaysOnly, Mode=TwoWay}" VerticalAlignment="Center"/>
-                          <TextBlock Grid.Column="4" Text="{Binding LastRunLabel}" VerticalAlignment="Center"
-                                     Foreground="{DynamicResource TextDimBrush}" FontSize="11"
+                        <TextBlock Classes="meta" Grid.Column="4" Text="{Binding LastRunLabel}" VerticalAlignment="Center"
                                    MinWidth="80"/>
-                          <Button Grid.Column="5" Content="✕"
+                        <Button Classes="icon-btn" Grid.Column="5" Content="✕"
                                 Command="{Binding $parent[ItemsControl].((vm:SettingsModalViewModel)DataContext).Prime.RemoveScheduleCommand}"
                                 CommandParameter="{Binding}"/>
                       </Grid>
@@ -250,7 +201,7 @@
                   </DataTemplate>
                 </ItemsControl.ItemTemplate>
               </ItemsControl>
-                <Button Content="+ Add schedule" Command="{Binding Prime.AddScheduleCommand}" HorizontalAlignment="Left"/>
+              <Button Classes="btn" Content="+ Add schedule" Command="{Binding Prime.AddScheduleCommand}" HorizontalAlignment="Left"/>
             </StackPanel>
           </ScrollViewer>
         </TabItem>
@@ -258,21 +209,5 @@
       </TabControl>
     </DockPanel>
 
-      <!-- Footer -->
-      <Border Grid.Row="2"
-              Background="{DynamicResource DeepBrush}"
-              BorderBrush="{DynamicResource LineBrush}"
-              BorderThickness="0,1,0,0">
-        <StackPanel Orientation="Horizontal" Spacing="8"
-                    HorizontalAlignment="Right" VerticalAlignment="Center"
-                    Margin="16,0">
-          <Button Content="Cancel" Command="{Binding CancelCommand}" MinWidth="90"/>
-          <Button Content="Save" Classes="primary"
-                  Command="{Binding SaveCommand}"
-                  IsEnabled="{Binding !IsBusy}" MinWidth="90"/>
-        </StackPanel>
-      </Border>
-
-    </Grid>
-  </Border>
+  </ctl:ModalShell>
 </Window>

src/ClaudeDo.Ui/Views/Modals/SettingsModalView.axaml.cs

@@ -1,5 +1,4 @@
 using Avalonia.Controls;
-using Avalonia.Input;
 using ClaudeDo.Ui.ViewModels.Modals;
 
 namespace ClaudeDo.Ui.Views.Modals;
@@ -17,10 +16,4 @@ public partial class SettingsModalView : Window
         if (DataContext is SettingsModalViewModel vm)
             vm.CloseAction = Close;
     }
-
-    private void TitleBar_PointerPressed(object? sender, PointerPressedEventArgs e)
-    {
-        if (e.GetCurrentPoint(this).Properties.IsLeftButtonPressed)
-            BeginMoveDrag(e);
-    }
 }

src/ClaudeDo.Ui/Views/Modals/UnfinishedPlanningModalView.axaml

@@ -1,6 +1,7 @@
 <Window xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:vm="clr-namespace:ClaudeDo.Ui.ViewModels.Modals"
+        xmlns:ctl="using:ClaudeDo.Ui.Views.Controls"
         x:Class="ClaudeDo.Ui.Views.Modals.UnfinishedPlanningModalView"
         x:DataType="vm:UnfinishedPlanningModalViewModel"
         Title="Unfinished planning session"
@@ -15,68 +16,25 @@
     <KeyBinding Gesture="Escape" Command="{Binding CancelCommand}"/>
   </Window.KeyBindings>
 
-  <Window.Styles>
-    <Style Selector="Button.primary">
-      <Setter Property="Background" Value="{DynamicResource AccentBrush}"/>
-      <Setter Property="Foreground" Value="{DynamicResource DeepBrush}"/>
-      <Setter Property="FontWeight" Value="SemiBold"/>
-    </Style>
-  </Window.Styles>
-
-  <Border Background="{DynamicResource SurfaceBrush}"
-          BorderBrush="{DynamicResource LineBrush}"
-          BorderThickness="1">
-    <Grid RowDefinitions="36,*,52">
-
-      <!-- Title bar -->
-      <Border Grid.Row="0"
-              x:Name="TitleBar"
-              Background="{DynamicResource DeepBrush}"
-              BorderBrush="{DynamicResource LineBrush}"
-              BorderThickness="0,0,0,1"
-              PointerPressed="TitleBar_PointerPressed">
-        <Grid ColumnDefinitions="*,Auto" Margin="14,0">
-          <TextBlock Text="UNFINISHED PLANNING SESSION"
-                     FontFamily="{DynamicResource MonoFont}"
-                     FontSize="11"
-                     LetterSpacing="1.4"
-                     Foreground="{DynamicResource TextBrush}"
-                     VerticalAlignment="Center"/>
-          <Button Grid.Column="1"
-                  Classes="icon-btn"
-                  Content="✕"
-                  FontSize="12"
-                  Command="{Binding CancelCommand}"
-                  VerticalAlignment="Center"/>
-        </Grid>
-      </Border>
+  <ctl:ModalShell Title="UNFINISHED PLANNING SESSION" CloseCommand="{Binding CancelCommand}">
+    <ctl:ModalShell.Footer>
+      <StackPanel Orientation="Horizontal" Spacing="8"
+                  HorizontalAlignment="Right" VerticalAlignment="Center">
+        <Button Classes="btn" Content="Discard"  Command="{Binding DiscardCommand}"     MinWidth="80"/>
+        <Button Classes="btn" Content="Finalize" Command="{Binding FinalizeNowCommand}" MinWidth="80"/>
+        <Button Content="Resume"   Command="{Binding ResumeCommand}"      Classes="primary" MinWidth="80"/>
+      </StackPanel>
+    </ctl:ModalShell.Footer>
 
     <!-- Body -->
-      <StackPanel Grid.Row="1" Margin="20,16" Spacing="8">
-        <TextBlock Text="{Binding TaskTitle}"
-                   FontWeight="SemiBold"
-                   Foreground="{DynamicResource TextBrush}"
+    <StackPanel Margin="20,16" Spacing="8">
+      <TextBlock Classes="title" Text="{Binding TaskTitle}"
                  TextTrimming="CharacterEllipsis"/>
-        <TextBlock Foreground="{DynamicResource TextDimBrush}">
+      <TextBlock Classes="body">
         <Run Text="{Binding DraftCount}"/>
         <Run Text=" draft task(s) waiting to be finalized."/>
       </TextBlock>
     </StackPanel>
 
-      <!-- Footer -->
-      <Border Grid.Row="2"
-              Background="{DynamicResource DeepBrush}"
-              BorderBrush="{DynamicResource LineBrush}"
-              BorderThickness="0,1,0,0">
-        <StackPanel Orientation="Horizontal" Spacing="8"
-                    HorizontalAlignment="Right" VerticalAlignment="Center"
-                    Margin="16,0">
-          <Button Content="Discard"  Command="{Binding DiscardCommand}"     MinWidth="80"/>
-          <Button Content="Finalize" Command="{Binding FinalizeNowCommand}" MinWidth="80"/>
-          <Button Content="Resume"   Command="{Binding ResumeCommand}"      Classes="primary" MinWidth="80"/>
-        </StackPanel>
-      </Border>
-
-    </Grid>
-  </Border>
+  </ctl:ModalShell>
 </Window>

src/ClaudeDo.Ui/Views/Modals/UnfinishedPlanningModalView.axaml.cs

@@ -1,5 +1,4 @@
 using Avalonia.Controls;
-using Avalonia.Input;
 
 namespace ClaudeDo.Ui.Views.Modals;
 
@@ -14,10 +13,4 @@ public partial class UnfinishedPlanningModalView : Window
                 vm.CloseAction = () => Close();
         };
     }
-
-    private void TitleBar_PointerPressed(object? sender, PointerPressedEventArgs e)
-    {
-        if (e.GetCurrentPoint(this).Properties.IsLeftButtonPressed)
-            BeginMoveDrag(e);
-    }
 }

src/ClaudeDo.Ui/Views/Modals/WorktreeModalView.axaml

@@ -31,7 +31,7 @@
               PointerPressed="OnTitleBarPressed">
         <Grid ColumnDefinitions="*,Auto" Margin="14,0">
           <TextBlock Grid.Column="0" Text="Worktree" VerticalAlignment="Center"
-                     FontFamily="{DynamicResource MonoFont}" FontSize="12"
+                     FontFamily="{DynamicResource MonoFont}" FontSize="{StaticResource FontSizeBody}"
                      Foreground="{DynamicResource TextMuteBrush}"/>
           <Button Grid.Column="1" Classes="icon-btn" Content="✕"
                   Command="{Binding CloseCommand}" VerticalAlignment="Center"/>
@@ -40,10 +40,7 @@
 
       <!-- Path strip -->
       <Border DockPanel.Dock="Top" Padding="14,0,14,8">
-        <TextBlock Text="{Binding WorktreePath}"
-                   FontFamily="{DynamicResource MonoFont}" FontSize="11"
-                   Foreground="{DynamicResource TextFaintBrush}"
-                   TextTrimming="CharacterEllipsis"/>
+        <TextBlock Classes="path-mono" Text="{Binding WorktreePath}"/>
       </Border>
 
       <!-- Split: file tree | splitter | diff pane -->
@@ -66,14 +63,12 @@
                               ItemsSource="{Binding Children}">
               <Border Background="Transparent" Tapped="OnNodeTapped" Cursor="Hand">
               <StackPanel Orientation="Horizontal" Spacing="8">
-                <TextBlock Text="{Binding Name}"
-                           FontFamily="{DynamicResource MonoFont}" FontSize="12"
-                           Foreground="{DynamicResource TextBrush}"/>
+                <TextBlock Classes="meta" Text="{Binding Name}"/>
                 <Border Tag="{Binding Status}" CornerRadius="3" Padding="4,0"
                         VerticalAlignment="Center"
                         IsVisible="{Binding Status, Converter={x:Static ObjectConverters.IsNotNull}}">
                   <TextBlock Text="{Binding Status}"
-                             FontFamily="{DynamicResource MonoFont}" FontSize="10"
+                             FontFamily="{DynamicResource MonoFont}" FontSize="{StaticResource FontSizeEyebrow}"
                              Foreground="{DynamicResource TextBrush}"/>
                 </Border>
               </StackPanel>
@@ -95,7 +90,7 @@
               <DataTemplate DataType="vm:WorktreeDiffLineViewModel">
                 <SelectableTextBlock Text="{Binding Text}"
                                      FontFamily="{DynamicResource MonoFont}"
-                                     FontSize="11"
+                                     FontSize="{StaticResource FontSizeMono}"
                                      Foreground="{Binding Kind, Converter={StaticResource DiffLineKindToBrush}}"
                                      TextWrapping="NoWrap"/>
               </DataTemplate>

src/ClaudeDo.Ui/Views/Modals/WorktreesOverviewModalView.axaml

@@ -2,6 +2,7 @@
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:vm="using:ClaudeDo.Ui.ViewModels.Modals"
         xmlns:converters="using:ClaudeDo.Ui.Converters"
+        xmlns:ctl="using:ClaudeDo.Ui.Views.Controls"
         x:Class="ClaudeDo.Ui.Views.Modals.WorktreesOverviewModalView"
         x:DataType="vm:WorktreesOverviewModalViewModel"
         Title="{Binding Title}"
@@ -10,13 +11,12 @@
         WindowStartupLocation="CenterOwner"
         Background="{DynamicResource SurfaceBrush}"
         WindowDecorations="BorderOnly"
-        ExtendClientAreaToDecorationsHint="True"
-        ExtendClientAreaTitleBarHeightHint="-1">
+        ExtendClientAreaToDecorationsHint="True">
 
   <Window.Resources>
     <converters:WorktreeStateColorConverter x:Key="WorktreeStateColor"/>
     <DataTemplate x:Key="WorktreeRowTemplate" x:DataType="vm:WorktreeOverviewRowViewModel">
-      <Border Classes="wt-row"
+      <Border Classes="task-row"
               Classes.selected="{Binding IsSelected}"
               Tapped="OnRowTapped">
         <Border.ContextMenu>
@@ -53,120 +53,63 @@
                       CommandParameter="{Binding}"/>
             <Separator/>
             <MenuItem Header="Force remove"
-                      Foreground="#EF5350"
+                      Foreground="{DynamicResource StatusErrorBrush}"
                       Command="{Binding $parent[Window].((vm:WorktreesOverviewModalViewModel)DataContext).ForceRemoveCommand}"
                       CommandParameter="{Binding}"/>
           </ContextMenu>
         </Border.ContextMenu>
         <Grid ColumnDefinitions="*,90,80,80">
           <StackPanel Grid.Column="0" Orientation="Vertical" Spacing="2">
-            <TextBlock Text="{Binding TaskTitle}" FontWeight="SemiBold"/>
+            <TextBlock Classes="title" Text="{Binding TaskTitle}"/>
             <StackPanel Orientation="Horizontal" Spacing="4">
-              <TextBlock Text="{Binding TaskStatus}" FontSize="10"
-                         Foreground="{DynamicResource TextFaintBrush}"/>
-              <TextBlock Text="•" FontSize="10" Foreground="{DynamicResource TextFaintBrush}"
+              <TextBlock Classes="meta" Text="{Binding TaskStatus}"/>
+              <TextBlock Classes="meta" Text="•"
                          IsVisible="{Binding !PathExistsOnDisk}"/>
-              <TextBlock Text="phantom" FontSize="10" Foreground="#EF5350"
+              <TextBlock Classes="meta" Text="phantom" Foreground="{DynamicResource StatusErrorBrush}"
                          IsVisible="{Binding !PathExistsOnDisk}"
                          ToolTip.Tip="Directory missing on disk"/>
             </StackPanel>
           </StackPanel>
           <Border Grid.Column="1" CornerRadius="3" Padding="6,2" VerticalAlignment="Center"
                   Background="{Binding State, Converter={StaticResource WorktreeStateColor}}">
-            <TextBlock Text="{Binding State}" FontSize="10" Foreground="White"
+            <TextBlock Classes="meta" Text="{Binding State}" Foreground="{DynamicResource TextBrush}"
                        HorizontalAlignment="Center"/>
           </Border>
-          <TextBlock Grid.Column="2" Text="{Binding DiffStat}" VerticalAlignment="Center"
-                     FontFamily="{DynamicResource MonoFont}" FontSize="11"
-                     Foreground="{DynamicResource TextDimBrush}"/>
-          <TextBlock Grid.Column="3" Text="{Binding AgeText}" VerticalAlignment="Center"
-                     FontSize="11" Foreground="{DynamicResource TextDimBrush}"/>
+          <TextBlock Grid.Column="2" Classes="meta" Text="{Binding DiffStat}" VerticalAlignment="Center"/>
+          <TextBlock Grid.Column="3" Classes="meta" Text="{Binding AgeText}" VerticalAlignment="Center"/>
         </Grid>
       </Border>
     </DataTemplate>
   </Window.Resources>
 
-  <Window.Styles>
-    <Style Selector="Border.wt-row">
-      <Setter Property="Padding"         Value="12,10"/>
-      <Setter Property="CornerRadius"    Value="8"/>
-      <Setter Property="Background"      Value="Transparent"/>
-      <Setter Property="BorderBrush"     Value="{DynamicResource LineBrush}"/>
-      <Setter Property="BorderThickness" Value="1"/>
-      <Setter Property="Margin"          Value="0,0,0,6"/>
-      <Setter Property="Cursor"          Value="Hand"/>
-      <Setter Property="Transitions">
-        <Transitions>
-          <BrushTransition Property="BorderBrush" Duration="0:0:0.10"/>
-        </Transitions>
-      </Setter>
-    </Style>
-    <Style Selector="Border.wt-row:pointerover">
-      <Setter Property="BorderBrush" Value="{DynamicResource LineBrightBrush}"/>
-    </Style>
-    <Style Selector="Border.wt-row.selected">
-      <Setter Property="BorderBrush" Value="{DynamicResource LineBrightBrush}"/>
-    </Style>
-  </Window.Styles>
+  <ctl:ModalShell Title="{Binding Title}" CloseCommand="{Binding CloseCommand}">
 
-  <Grid RowDefinitions="36,Auto,*,52">
-
-      <!-- Title bar -->
-      <Border Grid.Row="0"
-              Background="{DynamicResource DeepBrush}"
-              BorderBrush="{DynamicResource LineBrush}"
-              BorderThickness="0,0,0,1"
-              PointerPressed="OnTitleBarPressed">
-        <Grid ColumnDefinitions="*,Auto">
-          <TextBlock Grid.Column="0"
-                     Text="{Binding Title}"
-                     VerticalAlignment="Center"
-                     Margin="14,0,0,0"
-                     FontSize="12"
-                     FontWeight="SemiBold"
-                     Foreground="{DynamicResource TextBrush}"/>
-          <Button Grid.Column="1"
-                  Content="✕"
-                  Command="{Binding CloseCommand}"
-                  Margin="0,0,8,0"
-                  Width="28" Height="28"
-                  FontSize="11"
-                  HorizontalContentAlignment="Center"
-                  VerticalContentAlignment="Center"/>
-        </Grid>
-      </Border>
+    <!-- Body: toolbar + content -->
+    <DockPanel>
 
       <!-- Toolbar -->
-      <Border Grid.Row="1"
+      <Border DockPanel.Dock="Top"
               Background="{DynamicResource DeepBrush}"
               BorderBrush="{DynamicResource LineBrush}"
               BorderThickness="0,0,0,1"
               Padding="12,8">
         <StackPanel Orientation="Horizontal" Spacing="8">
-          <Button Content="Refresh" Command="{Binding RefreshCommand}" IsEnabled="{Binding !IsBusy}"/>
-          <Button Content="Cleanup finished" Command="{Binding CleanupFinishedCommand}" IsEnabled="{Binding !IsBusy}"/>
+          <Button Classes="btn" Content="Refresh" Command="{Binding RefreshCommand}" IsEnabled="{Binding !IsBusy}"/>
+          <Button Classes="btn" Content="Cleanup finished" Command="{Binding CleanupFinishedCommand}" IsEnabled="{Binding !IsBusy}"/>
           <TextBlock Text="{Binding StatusMessage}" VerticalAlignment="Center" Margin="12,0,0,0"
                      Foreground="{DynamicResource TextDimBrush}"/>
         </StackPanel>
       </Border>
 
       <!-- Content -->
-      <ScrollViewer Grid.Row="2" Padding="12,8">
+      <ScrollViewer Padding="20,16">
         <StackPanel>
           <!-- Column headers -->
           <Grid ColumnDefinitions="*,90,80,80" Margin="12,0,12,4">
-            <TextBlock Grid.Column="0" Text="TASK"
-                       FontFamily="{DynamicResource MonoFont}" FontSize="10" LetterSpacing="1.4"
-                       Foreground="{DynamicResource TextFaintBrush}"/>
-            <TextBlock Grid.Column="1" Text="STATE"
-                       FontFamily="{DynamicResource MonoFont}" FontSize="10" LetterSpacing="1.4"
-                       Foreground="{DynamicResource TextFaintBrush}"/>
-            <TextBlock Grid.Column="2" Text="DIFF"
-                       FontFamily="{DynamicResource MonoFont}" FontSize="10" LetterSpacing="1.4"
-                       Foreground="{DynamicResource TextFaintBrush}"/>
-            <TextBlock Grid.Column="3" Text="AGE"
-                       FontFamily="{DynamicResource MonoFont}" FontSize="10" LetterSpacing="1.4"
-                       Foreground="{DynamicResource TextFaintBrush}"/>
+            <TextBlock Grid.Column="0" Classes="eyebrow" Text="TASK"/>
+            <TextBlock Grid.Column="1" Classes="eyebrow" Text="STATE"/>
+            <TextBlock Grid.Column="2" Classes="eyebrow" Text="DIFF"/>
+            <TextBlock Grid.Column="3" Classes="eyebrow" Text="AGE"/>
           </Grid>
           <Border Height="1" Background="{DynamicResource LineBrush}" Margin="0,0,0,8"/>
 
@@ -183,7 +126,8 @@
           <ItemsControl ItemsSource="{Binding Groups}" IsVisible="{Binding IsGlobal}">
             <ItemsControl.ItemTemplate>
               <DataTemplate DataType="vm:WorktreesGroupViewModel">
-                <Expander Header="{Binding ListName}" IsExpanded="True" Margin="0,0,0,6">
+                <Expander Header="{Binding ListName}" IsExpanded="True" Margin="0,0,0,6"
+                          HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
                   <ItemsControl ItemsSource="{Binding Rows}">
                     <ItemsControl.ItemTemplate>
                       <DataTemplate DataType="vm:WorktreeOverviewRowViewModel">
@@ -198,16 +142,7 @@
         </StackPanel>
       </ScrollViewer>
 
-      <!-- Footer -->
-      <Border Grid.Row="3"
-              Background="{DynamicResource DeepBrush}"
-              BorderBrush="{DynamicResource LineBrush}"
-              BorderThickness="0,1,0,0"
-              Padding="12,10">
-        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
-          <Button Content="Close" Command="{Binding CloseCommand}"/>
-        </StackPanel>
-      </Border>
+    </DockPanel>
 
-    </Grid>
+  </ctl:ModalShell>
 </Window>

src/ClaudeDo.Ui/Views/Modals/WorktreesOverviewModalView.axaml.cs

@@ -17,9 +17,5 @@ public partial class WorktreesOverviewModalView : Window
         }
     }
 
-    private void OnTitleBarPressed(object? sender, PointerPressedEventArgs e)
-    {
-        if (e.GetCurrentPoint(this).Properties.IsLeftButtonPressed)
-            BeginMoveDrag(e);
-    }
+
 }

src/ClaudeDo.Ui/Views/Planning/ConflictResolutionView.axaml

@@ -1,6 +1,7 @@
 <Window xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:vm="using:ClaudeDo.Ui.ViewModels.Planning"
+        xmlns:ctl="using:ClaudeDo.Ui.Views.Controls"
         x:DataType="vm:ConflictResolutionViewModel"
         x:Class="ClaudeDo.Ui.Views.Planning.ConflictResolutionView"
         Title="Merge conflict"
@@ -8,58 +9,41 @@
         WindowDecorations="None"
         ExtendClientAreaToDecorationsHint="True"
         WindowStartupLocation="CenterOwner"
-        Background="{StaticResource SurfaceBrush}">
+        Background="{DynamicResource SurfaceBrush}">
 
   <Window.KeyBindings>
     <KeyBinding Gesture="Escape" Command="{Binding AbortCommand}"/>
   </Window.KeyBindings>
 
-  <Border Background="{StaticResource SurfaceBrush}"
-          BorderBrush="{StaticResource LineBrush}"
-          BorderThickness="1">
-    <Grid RowDefinitions="36,*">
-
-      <!-- Title bar / drag handle -->
-      <Border Grid.Row="0"
-              x:Name="TitleBar"
-              Background="{StaticResource Surface2Brush}"
-              BorderBrush="{StaticResource LineBrush}"
-              BorderThickness="0,0,0,1"
-              PointerPressed="TitleBar_PointerPressed">
-        <Grid ColumnDefinitions="*,Auto" Margin="14,0">
-          <TextBlock Text="Merge conflict"
-                     VerticalAlignment="Center"
-                     FontFamily="{StaticResource MonoFamily}"
-                     FontSize="12"
-                     Foreground="{StaticResource TextDimBrush}"/>
-        </Grid>
-      </Border>
+  <ctl:ModalShell Title="MERGE CONFLICT" CloseCommand="{Binding AbortCommand}">
+    <ctl:ModalShell.Footer>
+      <StackPanel Orientation="Horizontal" Spacing="8"
+                  HorizontalAlignment="Right" VerticalAlignment="Center">
+        <Button Classes="btn" Content="Open all in VS Code" Command="{Binding OpenInVsCodeCommand}"/>
+        <Button Classes="btn" Content="I've resolved — continue" Command="{Binding ContinueCommand}"/>
+        <Button Classes="btn" Content="Abort this merge" Command="{Binding AbortCommand}"/>
+      </StackPanel>
+    </ctl:ModalShell.Footer>
 
     <!-- Content -->
-      <StackPanel Grid.Row="1" Spacing="12" Margin="16" MinWidth="520">
-        <TextBlock FontWeight="SemiBold" FontSize="16"
+    <StackPanel Spacing="12" Margin="20,16" MinWidth="520">
+      <TextBlock Classes="heading"
                  Text="{Binding SubtaskTitle, StringFormat='Conflicts in subtask: {0}'}"/>
-        <TextBlock Text="{Binding TargetBranch, StringFormat='Merging into: {0}'}" Opacity="0.7"/>
+      <TextBlock Classes="body" Text="{Binding TargetBranch, StringFormat='Merging into: {0}'}"/>
       <ItemsControl ItemsSource="{Binding ConflictedFiles}">
         <ItemsControl.ItemTemplate>
           <DataTemplate>
-              <TextBlock Text="{Binding}" FontFamily="Consolas,Menlo,monospace"/>
+            <TextBlock Classes="path-mono" Text="{Binding}"/>
           </DataTemplate>
         </ItemsControl.ItemTemplate>
       </ItemsControl>
-        <TextBlock Text="{Binding VsCodeError}" Foreground="OrangeRed"
+      <TextBlock Classes="meta" Text="{Binding VsCodeError}" Foreground="{DynamicResource BloodBrush}"
                  IsVisible="{Binding VsCodeError, Converter={x:Static ObjectConverters.IsNotNull}}"
                  TextWrapping="Wrap"/>
-        <TextBlock Text="{Binding ActionError}" Foreground="OrangeRed"
+      <TextBlock Classes="meta" Text="{Binding ActionError}" Foreground="{DynamicResource BloodBrush}"
                  IsVisible="{Binding ActionError, Converter={x:Static ObjectConverters.IsNotNull}}"
                  TextWrapping="Wrap"/>
-        <StackPanel Orientation="Horizontal" Spacing="8" HorizontalAlignment="Right" Margin="0,4,0,4">
-          <Button Content="Open all in VS Code" Command="{Binding OpenInVsCodeCommand}"/>
-          <Button Content="I've resolved — continue" Command="{Binding ContinueCommand}"/>
-          <Button Content="Abort this merge" Command="{Binding AbortCommand}"/>
-        </StackPanel>
     </StackPanel>
 
-    </Grid>
-  </Border>
+  </ctl:ModalShell>
 </Window>

src/ClaudeDo.Ui/Views/Planning/ConflictResolutionView.axaml.cs

@@ -1,5 +1,4 @@
 using Avalonia.Controls;
-using Avalonia.Input;
 using ClaudeDo.Ui.ViewModels.Planning;
 
 namespace ClaudeDo.Ui.Views.Planning;
@@ -17,10 +16,4 @@ public partial class ConflictResolutionView : Window
         if (DataContext is ConflictResolutionViewModel vm)
             vm.CloseRequested = Close;
     }
-
-    private void TitleBar_PointerPressed(object? sender, PointerPressedEventArgs e)
-    {
-        if (e.GetCurrentPoint(this).Properties.IsLeftButtonPressed)
-            BeginMoveDrag(e);
-    }
 }

src/ClaudeDo.Ui/Views/Planning/PlanningDiffView.axaml

@@ -1,6 +1,7 @@
 <Window xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:vm="using:ClaudeDo.Ui.ViewModels.Planning"
+        xmlns:ctl="using:ClaudeDo.Ui.Views.Controls"
         x:Class="ClaudeDo.Ui.Views.Planning.PlanningDiffView"
         x:DataType="vm:PlanningDiffViewModel"
         Title="Planning — Combined diff"
@@ -8,47 +9,23 @@
         WindowDecorations="None"
         ExtendClientAreaToDecorationsHint="True"
         WindowStartupLocation="CenterOwner"
-        Background="{StaticResource SurfaceBrush}">
+        Background="{DynamicResource SurfaceBrush}">
 
   <Window.KeyBindings>
     <KeyBinding Gesture="Escape" Command="{Binding CloseCommand}"/>
   </Window.KeyBindings>
 
-  <Border Background="{StaticResource SurfaceBrush}"
-          BorderBrush="{StaticResource LineBrush}"
-          BorderThickness="1">
-    <Grid RowDefinitions="36,Auto,*">
-
-      <!-- Title bar / drag handle -->
-      <Border Grid.Row="0"
-              x:Name="TitleBar"
-              Background="{StaticResource Surface2Brush}"
-              BorderBrush="{StaticResource LineBrush}"
-              BorderThickness="0,0,0,1"
-              PointerPressed="TitleBar_PointerPressed">
-        <Grid ColumnDefinitions="*,Auto" Margin="14,0">
-          <TextBlock Text="Planning — Combined diff"
-                     VerticalAlignment="Center"
-                     FontFamily="{StaticResource MonoFamily}"
-                     FontSize="12"
-                     Foreground="{StaticResource TextDimBrush}"/>
-          <Button Grid.Column="1"
-                  Classes="icon-btn"
-                  Content="✕"
-                  FontSize="12"
-                  Command="{Binding CloseCommand}"
-                  VerticalAlignment="Center"/>
-        </Grid>
-      </Border>
+  <ctl:ModalShell Title="PLANNING — COMBINED DIFF" CloseCommand="{Binding CloseCommand}">
 
     <!-- Toolbar row -->
-      <StackPanel Grid.Row="1"
+    <DockPanel>
+      <StackPanel DockPanel.Dock="Top"
                   Orientation="Horizontal"
                   Spacing="8"
                   Margin="8,6">
         <ToggleButton Content="Preview combined" IsChecked="{Binding IsCombinedMode}"/>
         <TextBlock Text="{Binding CombinedWarning}"
-                   Foreground="Orange"
+                   Foreground="{DynamicResource BloodBrush}"
                    VerticalAlignment="Center"
                    IsVisible="{Binding CombinedWarning, Converter={x:Static ObjectConverters.IsNotNull}}"/>
         <TextBlock Text="Loading…"
@@ -57,13 +34,11 @@
       </StackPanel>
 
       <!-- Two-pane body -->
-      <Grid Grid.Row="2" ColumnDefinitions="240,*">
+      <Grid ColumnDefinitions="240,*">
 
         <!-- Subtask list (left pane) -->
         <Border Grid.Column="0"
-                BorderBrush="{StaticResource LineBrush}"
-                BorderThickness="0,0,1,0"
-                Background="{StaticResource DeepBrush}">
+                Classes="sidebar-pane">
           <ListBox ItemsSource="{Binding Subtasks}"
                    SelectedItem="{Binding SelectedSubtask}"
                    IsEnabled="{Binding !IsCombinedMode}"
@@ -74,13 +49,9 @@
               <DataTemplate x:DataType="vm:SubtaskDiffRow">
                 <Border Padding="10,8" Background="Transparent">
                   <StackPanel Spacing="2">
-                    <TextBlock Text="{Binding Title}"
-                               FontWeight="SemiBold"
+                    <TextBlock Classes="title" Text="{Binding Title}"
                                TextTrimming="CharacterEllipsis"/>
-                    <TextBlock Text="{Binding DiffStat}"
-                               Opacity="0.7"
-                               FontFamily="{StaticResource MonoFamily}"
-                               FontSize="11"/>
+                    <TextBlock Classes="meta" Text="{Binding DiffStat}"/>
                   </StackPanel>
                 </Border>
               </DataTemplate>
@@ -89,14 +60,14 @@
         </Border>
 
         <!-- Diff content (right pane) -->
-        <Grid Grid.Column="1" Background="{StaticResource VoidBrush}">
+        <Grid Grid.Column="1" Background="{DynamicResource VoidBrush}">
           <ScrollViewer HorizontalScrollBarVisibility="Auto"
                         VerticalScrollBarVisibility="Auto">
             <TextBox Text="{Binding DisplayedDiff, Mode=OneWay}"
                      IsReadOnly="True"
                      AcceptsReturn="True"
-                     FontFamily="Consolas,Menlo,monospace"
-                     FontSize="12"
+                     FontFamily="{DynamicResource MonoFont}"
+                     FontSize="{StaticResource FontSizeBody}"
                      Background="Transparent"
                      BorderThickness="0"
                      Padding="8"/>
@@ -104,6 +75,7 @@
         </Grid>
 
       </Grid>
-    </Grid>
-  </Border>
+    </DockPanel>
+
+  </ctl:ModalShell>
 </Window>

src/ClaudeDo.Ui/Views/Planning/PlanningDiffView.axaml.cs

@@ -1,6 +1,4 @@
 using Avalonia.Controls;
-using Avalonia.Input;
-using CommunityToolkit.Mvvm.Input;
 using ClaudeDo.Ui.ViewModels.Planning;
 
 namespace ClaudeDo.Ui.Views.Planning;
@@ -18,10 +16,4 @@ public partial class PlanningDiffView : Window
         if (DataContext is PlanningDiffViewModel vm)
             vm.CloseAction = Close;
     }
-
-    private void TitleBar_PointerPressed(object? sender, PointerPressedEventArgs e)
-    {
-        if (e.GetCurrentPoint(this).Properties.IsLeftButtonPressed)
-            BeginMoveDrag(e);
-    }
 }