diff --git a/apps/delta-command/src/app/dashboard/page.tsx b/apps/delta-command/src/app/dashboard/page.tsx
index 4c84ad1..6de2478 100644
--- a/apps/delta-command/src/app/dashboard/page.tsx
+++ b/apps/delta-command/src/app/dashboard/page.tsx
@@ -42,35 +42,31 @@ export default async function DashboardPage() {
     <div>
       <Header title="Executive Dashboard" />
 
-      <div className="space-y-8 p-8">
+      <div className="space-y-6 p-6 md:p-8">
         <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
           <KPICard
             label="Weighted Pipeline"
             value={formatCurrency(pipelineValue)}
             context={`${formatCurrency(totalPipeline)} unweighted · ${pipeline.closingWithin30Days} closing in 30d`}
             icon={DollarSign}
-            accent="blue"
           />
           <KPICard
             label="Active Delivery"
             value={String(activeProjects.length)}
             context={`${delivery.planningCount} in planning · ${delivery.atRiskCount} at risk`}
             icon={FolderKanban}
-            accent="emerald"
           />
           <KPICard
             label="Budget Burn"
             value={`${delivery.burnPercent}%`}
             context={`${formatCurrency(delivery.totalSpent)} of ${formatCurrency(delivery.totalBudget)}`}
             icon={Flame}
-            accent="amber"
           />
           <KPICard
             label="Team Utilization"
             value={`${avgUtilization}%`}
             context={`${team.overallocated.length} overallocated · ${team.benchCapacityPercent}% bench`}
             icon={Users}
-            accent="blue"
           />
         </div>
 
@@ -93,13 +89,13 @@ export default async function DashboardPage() {
 
         {atRiskProjects.length > 0 && (
           <section>
-            <div className="mb-4 flex items-center justify-between">
-              <h3 className="section-title">Projects Needing Attention</h3>
+            <div className="mb-3 flex items-center justify-between">
+              <h3 className="title-lg">Projects Needing Attention</h3>
               <Link href="/projects" className="link-subtle">
                 All projects
               </Link>
             </div>
-            <div className="grid gap-6 md:grid-cols-2">
+            <div className={atRiskProjects.length === 1 ? "grid gap-6" : "grid gap-6 md:grid-cols-2"}>
               {atRiskProjects.map((project) => (
                 <ProjectCard
                   key={project.id}
@@ -136,32 +132,29 @@ function UpcomingClosesPanel({
     <div className="card p-6">
       <div className="mb-4 flex items-center justify-between">
         <div>
-          <h3 className="section-title">Upcoming Closes</h3>
-          <p className="body-md text-surface-on-variant">
-            {formatCurrency(closingValue)} in next 30 days
-          </p>
+          <h3 className="title-lg">Upcoming Closes</h3>
+          <p className="body">{formatCurrency(closingValue)} in next 30 days</p>
         </div>
         <Link href="/opportunities" className="link-subtle">
           View all
         </Link>
       </div>
-      <ul className="space-y-4">
+      <ul className="divide-y divide-outline-variant/40">
         {closes.map((opp) => (
-          <li
-            key={opp.id}
-            className="flex items-start justify-between gap-3 border-b border-outline-variant/40 pb-4 last:border-0 last:pb-0"
-          >
+          <li key={opp.id} className="flex items-start justify-between gap-3 py-3 first:pt-0 last:pb-0">
             <div className="min-w-0">
-              <p className="truncate title-sm text-surface-on">{opp.title}</p>
-              <p className="label-md text-surface-on-variant">{opp.client}</p>
-              <div className="mt-1 flex items-center gap-2">
+              <p className="truncate title-sm">{opp.title}</p>
+              <p className="mt-0.5 text-xs text-surface-on-variant">{opp.client}</p>
+              <div className="mt-1.5 flex items-center gap-2">
                 <span className="chip capitalize">{opp.stage}</span>
-                <span className="label-md text-surface-on-variant/70">{opp.probability}%</span>
+                <span className="text-[11px] tabular text-surface-on-variant/70">
+                  {opp.probability}% probability
+                </span>
               </div>
             </div>
             <div className="shrink-0 text-right">
-              <p className="title-sm text-surface-on">{formatCurrency(opp.value)}</p>
-              <p className="flex items-center justify-end gap-1 label-md text-surface-on-variant/70">
+              <p className="title-sm tabular">{formatCurrency(opp.value)}</p>
+              <p className="mt-0.5 flex items-center justify-end gap-1 text-[11px] tabular text-surface-on-variant/70">
                 <CalendarClock className="h-3 w-3" />
                 {formatDate(opp.expectedClose)}
               </p>
diff --git a/apps/delta-command/src/app/globals.css b/apps/delta-command/src/app/globals.css
index 3b4177e..54040ca 100644
--- a/apps/delta-command/src/app/globals.css
+++ b/apps/delta-command/src/app/globals.css
@@ -14,7 +14,7 @@
 
   body {
     @apply bg-surface text-surface-on antialiased;
-    font-feature-settings: "kern" 1, "liga" 1;
+    font-feature-settings: "kern" 1, "liga" 1, "cv11" 1, "ss01" 1;
   }
 
   h1, h2, h3, h4 {
@@ -24,119 +24,131 @@
   select option {
     @apply bg-surface-bright text-surface-on;
   }
+
+  /* Tabular numbers everywhere data is displayed. */
+  .tabular {
+    font-variant-numeric: tabular-nums;
+  }
 }
 
 @layer components {
+  /*
+   * Cards.
+   *
+   * Static by default — precise dashboards don't move under the cursor.
+   * Use .card-interactive on cards whose click/hover implies a target.
+   */
   .card {
-    @apply rounded-xl border border-white/[0.06] bg-surface-bright/80 shadow-card
-      backdrop-blur-sm transition-all duration-300 ease-emphasized
-      hover:border-white/[0.1] hover:bg-surface-bright hover:shadow-elevated;
+    @apply rounded-xl border border-white/[0.06] bg-surface-bright/80 shadow-card;
+  }
+
+  .card-interactive {
+    @apply card cursor-pointer transition-colors duration-150 ease-standard
+      hover:border-white/[0.1] hover:bg-surface-bright;
   }
 
-  .card-flat {
-    @apply rounded-xl border border-white/[0.06] bg-surface-bright/80;
+  /* Small, uppercase label used for metric captions and section eyebrows. */
+  .label {
+    @apply text-[11px] font-medium uppercase tracking-[0.08em] text-surface-on-variant tabular;
   }
 
   .badge {
-    @apply inline-flex items-center rounded-md px-2 py-0.5 text-[11px] font-medium leading-4;
+    @apply inline-flex items-center rounded-md px-2 py-0.5 text-[11px] font-medium leading-4 tabular;
   }
 
   .chip {
     @apply inline-flex items-center rounded-md bg-surface-container/60 px-2 py-0.5
-      text-[11px] font-medium leading-4 text-surface-on-variant ring-1 ring-inset ring-white/[0.06];
+      text-[11px] font-medium leading-4 text-surface-on-variant ring-1 ring-inset ring-white/[0.06] tabular;
   }
 
   .btn-primary {
-    @apply inline-flex items-center justify-center gap-2 rounded-lg bg-accent px-5 py-2
-      text-sm font-medium text-white shadow-sm
-      transition-all duration-200 ease-standard
-      hover:bg-blue-400 active:scale-[0.98]
-      focus-visible:outline-none focus-visible:shadow-glow;
+    @apply inline-flex h-9 items-center justify-center gap-2 rounded-lg bg-accent px-4
+      text-sm font-medium text-white
+      transition-colors duration-150 ease-standard
+      hover:bg-blue-400 active:bg-blue-500
+      focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface;
   }
 
   .btn-secondary {
-    @apply inline-flex items-center justify-center gap-2 rounded-lg border border-white/[0.08]
-      bg-surface-container px-5 py-2 text-sm font-medium text-surface-on
-      transition-all duration-200 ease-standard
+    @apply inline-flex h-9 items-center justify-center gap-2 rounded-lg border border-white/[0.08]
+      bg-surface-container px-4 text-sm font-medium text-surface-on
+      transition-colors duration-150 ease-standard
       hover:bg-surface-container-high
-      focus-visible:outline-none focus-visible:shadow-glow;
+      focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface;
   }
 
   .btn-tonal {
-    @apply inline-flex items-center justify-center gap-2 rounded-lg bg-accent-muted px-5 py-2
+    @apply inline-flex h-9 items-center justify-center gap-2 rounded-lg bg-accent-muted px-4
       text-sm font-medium text-accent-foreground
-      transition-all duration-200 ease-standard hover:bg-blue-500/20;
+      transition-colors duration-150 ease-standard hover:bg-blue-500/20
+      focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface
+      disabled:opacity-60;
   }
 
-  .icon-btn {
-    @apply relative flex h-9 w-9 items-center justify-center rounded-lg
-      text-surface-on-variant transition-all duration-200 ease-standard
-      hover:bg-white/[0.06] hover:text-surface-on;
-  }
-
-  .headline-md {
-    @apply text-2xl font-semibold leading-8 tracking-tight;
+  /* Typography scale — five tiers, each with one job. */
+  .headline {
+    @apply text-2xl font-semibold leading-8 tracking-tight text-surface-on;
   }
 
   .title-lg {
-    @apply text-lg font-semibold leading-7 tracking-tight;
+    @apply text-base font-semibold leading-6 tracking-tight text-surface-on;
   }
 
   .title-md {
-    @apply text-sm font-semibold leading-5;
+    @apply text-sm font-semibold leading-5 text-surface-on;
   }
 
   .title-sm {
-    @apply text-sm font-medium leading-5;
+    @apply text-sm font-medium leading-5 text-surface-on;
   }
 
-  .body-md {
+  .body {
     @apply text-sm font-normal leading-5 text-surface-on-variant;
   }
 
-  .label-md {
-    @apply text-xs font-medium uppercase tracking-wider text-surface-on-variant/70;
-  }
-
-  .section-title {
-    @apply text-base font-semibold tracking-tight text-surface-on;
+  .metric {
+    @apply text-3xl font-semibold leading-[1.1] tracking-tight text-surface-on tabular;
   }
 
-  .metric-value {
-    @apply text-3xl font-semibold leading-none tracking-tight text-surface-on;
-  }
-
-  .metric-label {
-    @apply text-xs font-medium uppercase tracking-wider text-surface-on-variant/80;
+  .metric-sm {
+    @apply text-xl font-semibold leading-[1.15] tracking-tight text-surface-on tabular;
   }
 
   .nav-item {
-    @apply relative flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium
-      text-sidebar-muted transition-all duration-200 ease-standard
+    @apply relative flex h-9 items-center gap-3 rounded-md px-3 text-sm font-medium
+      text-sidebar-muted transition-colors duration-150 ease-standard
       hover:bg-white/[0.05] hover:text-sidebar-foreground;
   }
 
   .nav-item-active {
-    @apply bg-white/[0.08] text-sidebar-foreground before:absolute before:left-0 before:top-1/2
-      before:h-5 before:w-0.5 before:-translate-y-1/2 before:rounded-full before:bg-accent
-      before:shadow-[0_0_8px_rgb(59_130_246/0.6)] before:content-[''];
+    @apply bg-white/[0.06] text-sidebar-foreground
+      before:absolute before:left-0 before:top-1/2 before:h-4 before:w-[2px]
+      before:-translate-y-1/2 before:rounded-full before:bg-accent before:content-[''];
+  }
+
+  .text-field {
+    @apply h-9 rounded-md border border-white/[0.08] bg-surface-container/80 px-3 text-sm text-surface-on
+      outline-none transition-colors duration-150
+      placeholder:text-surface-on-variant/50
+      focus:border-accent/60 focus:ring-1 focus:ring-accent/40;
   }
 
-  .text-field-outlined {
-    @apply rounded-lg border border-white/[0.08] bg-surface-container/80 text-sm text-surface-on
-      outline-none transition-all duration-200
-      placeholder:text-surface-on-variant/40
-      focus:border-accent/60 focus:shadow-glow;
+  /* Semantic banners — quiet fills + a solid left stripe for scannability. */
+  .banner {
+    @apply relative flex items-center gap-3 rounded-lg border pl-4 pr-4 py-3 text-sm
+      before:absolute before:left-0 before:top-0 before:h-full before:w-[3px] before:rounded-l-lg before:content-[''];
   }
 
   .banner-error {
-    @apply flex items-center gap-3 rounded-xl border border-red-500/30 bg-red-500/10 px-5 py-3.5
-      text-red-300 backdrop-blur-sm;
+    @apply banner border-red-500/25 bg-red-500/[0.06] text-red-200 before:bg-red-500;
   }
 
   .banner-warning {
-    @apply flex items-center gap-3 rounded-xl border border-amber-500/30 bg-amber-500/10 px-5 py-3.5
-      text-amber-200 backdrop-blur-sm;
+    @apply banner border-amber-500/25 bg-amber-500/[0.06] text-amber-100 before:bg-amber-500;
+  }
+
+  .banner-info {
+    @apply banner border-blue-500/25 bg-blue-500/[0.06] text-blue-100 before:bg-blue-500;
   }
 
   .progress-track {
@@ -144,12 +156,12 @@
   }
 
   .progress-indicator {
-    @apply h-full rounded-full bg-accent transition-all duration-500 ease-emphasized;
+    @apply h-full rounded-full bg-accent transition-[width] duration-500 ease-standard;
   }
 
   .top-app-bar {
-    @apply sticky top-0 z-20 flex h-[4.25rem] items-center justify-between
-      border-b border-white/[0.06] bg-surface/80 px-6 backdrop-blur-xl md:px-8;
+    @apply sticky top-0 z-20 flex h-14 items-center justify-between
+      border-b border-white/[0.06] bg-surface/80 px-6 backdrop-blur-md md:px-8;
   }
 
   .nav-drawer {
@@ -158,17 +170,17 @@
   }
 
   .segmented-control {
-    @apply inline-flex rounded-lg bg-surface-container/80 p-1 ring-1 ring-inset ring-white/[0.06];
+    @apply inline-flex rounded-md bg-surface-container/60 p-0.5 ring-1 ring-inset ring-white/[0.06];
   }
 
   .segmented-item {
-    @apply flex items-center gap-2 rounded-md px-3.5 py-2 text-sm font-medium
-      text-surface-on-variant transition-all duration-200 ease-standard
+    @apply flex h-8 items-center gap-1.5 rounded px-3 text-[13px] font-medium
+      text-surface-on-variant transition-colors duration-150 ease-standard
       hover:text-surface-on;
   }
 
   .segmented-item-active {
-    @apply bg-surface-bright text-surface-on shadow-sm ring-1 ring-white/[0.08];
+    @apply bg-surface-bright text-surface-on ring-1 ring-inset ring-white/[0.06];
   }
 
   .link-subtle {
@@ -180,22 +192,18 @@
   }
 
   .stat-icon {
-    @apply flex h-9 w-9 shrink-0 items-center justify-center rounded-lg;
+    @apply flex h-8 w-8 shrink-0 items-center justify-center rounded-md;
   }
 
   .kanban-column {
-    @apply flex w-72 shrink-0 flex-col rounded-xl border border-white/[0.06]
-      bg-surface-container-low/60 p-3 backdrop-blur-sm;
-  }
-
-  .page-shell {
-    @apply bg-radial-glow bg-grid-pattern bg-grid bg-surface;
+    @apply flex w-72 shrink-0 flex-col rounded-lg border border-white/[0.06]
+      bg-surface-container-low/60 p-3;
   }
 
+  /* Utilization grid cell — spreadsheet-precise. */
   .util-cell {
-    @apply mx-auto flex h-10 w-[68px] flex-col items-center justify-center rounded-lg
-      text-sm font-semibold ring-1 ring-inset transition-all duration-200
-      hover:scale-[1.02] hover:brightness-110 active:scale-[0.98];
+    @apply mx-auto flex h-9 w-16 items-center justify-center rounded
+      text-[13px] font-semibold tabular ring-1 ring-inset transition-colors duration-100;
   }
 }
 
diff --git a/apps/delta-command/src/app/layout.tsx b/apps/delta-command/src/app/layout.tsx
index 64680f8..3226d7d 100644
--- a/apps/delta-command/src/app/layout.tsx
+++ b/apps/delta-command/src/app/layout.tsx
@@ -25,7 +25,7 @@ export default function RootLayout({
       <body className={`${inter.variable} font-sans bg-surface text-surface-on`}>
         <div className="flex min-h-screen">
           <Sidebar />
-          <main className="ml-60 min-h-screen flex-1 page-shell">{children}</main>
+          <main className="ml-60 min-h-screen flex-1 bg-surface">{children}</main>
         </div>
       </body>
     </html>
diff --git a/apps/delta-command/src/components/dashboard/ActionItemsPanel.tsx b/apps/delta-command/src/components/dashboard/ActionItemsPanel.tsx
index 3cc7c31..808bcc6 100644
--- a/apps/delta-command/src/components/dashboard/ActionItemsPanel.tsx
+++ b/apps/delta-command/src/components/dashboard/ActionItemsPanel.tsx
@@ -1,30 +1,26 @@
 import Link from "next/link";
+import { AlertCircle, AlertTriangle, ArrowRight, Info } from "lucide-react";
+
 import type { ActionItem, ActionSeverity } from "@/core/dashboard-analytics";
 import { cn } from "@/core/utils";
-import {
-  AlertCircle,
-  AlertTriangle,
-  Info,
-  ArrowRight,
-} from "lucide-react";
 
-const severityStyles: Record<
-  ActionSeverity,
-  { container: string; icon: typeof AlertCircle }
-> = {
+const SEVERITY = {
   critical: {
-    container: "border-red-500/30 bg-red-500/10",
     icon: AlertCircle,
+    stripe: "before:bg-red-500",
+    iconColor: "text-red-400",
   },
   warning: {
-    container: "border-amber-500/30 bg-amber-500/10",
     icon: AlertTriangle,
+    stripe: "before:bg-amber-500",
+    iconColor: "text-amber-400",
   },
   info: {
-    container: "border-blue-500/30 bg-blue-500/10",
     icon: Info,
+    stripe: "before:bg-blue-500",
+    iconColor: "text-blue-400",
   },
-};
+} as const satisfies Record<ActionSeverity, { icon: typeof AlertCircle; stripe: string; iconColor: string }>;
 
 interface ActionItemsPanelProps {
   items: ActionItem[];
@@ -38,36 +34,39 @@ export function ActionItemsPanel({ items }: ActionItemsPanelProps) {
 
   return (
     <div className="card p-6">
-      <div className="mb-4 flex items-center justify-between">
-        <div>
-          <h3 className="section-title">Action Required</h3>
-          <p className="body-md text-surface-on-variant">
-            {critical > 0 && `${critical} critical`}
-            {critical > 0 && warning > 0 && " · "}
-            {warning > 0 && `${warning} needs attention`}
-            {critical === 0 && warning === 0 && `${items.length} items`}
-          </p>
-        </div>
+      <div className="mb-4 flex items-baseline justify-between">
+        <h3 className="title-lg">Action Required</h3>
+        <p className="text-xs text-surface-on-variant tabular">
+          {[
+            critical > 0 && `${critical} critical`,
+            warning > 0 && `${warning} warning`,
+            critical === 0 && warning === 0 && `${items.length} items`,
+          ]
+            .filter(Boolean)
+            .join(" · ")}
+        </p>
       </div>
-      <ul className="space-y-2">
+      <ul className="divide-y divide-outline-variant/30 border-y border-outline-variant/30">
         {items.slice(0, 6).map((item) => {
-          const style = severityStyles[item.severity];
-          const Icon = style.icon;
+          const config = SEVERITY[item.severity];
+          const Icon = config.icon;
           return (
             <li key={item.id}>
               <Link
                 href={item.href}
                 className={cn(
-                  "group flex items-start gap-3 rounded-xl border p-3.5 transition-all duration-200 hover:shadow-card",
-                  style.container
+                  "group relative flex items-center gap-3 py-3 pl-4 pr-2 transition-colors duration-150",
+                  "before:absolute before:left-0 before:top-1/2 before:h-6 before:w-[2px] before:-translate-y-1/2 before:rounded-full before:content-['']",
+                  "hover:bg-white/[0.02]",
+                  config.stripe
                 )}
               >
-                <Icon className="mt-0.5 h-4 w-4 shrink-0" />
+                <Icon className={cn("h-4 w-4 shrink-0", config.iconColor)} strokeWidth={2} />
                 <div className="min-w-0 flex-1">
                   <p className="title-sm">{item.title}</p>
-                  <p className="body-md opacity-80">{item.detail}</p>
+                  <p className="mt-0.5 text-xs text-surface-on-variant tabular">{item.detail}</p>
                 </div>
-                <ArrowRight className="h-4 w-4 shrink-0 opacity-0 transition-opacity group-hover:opacity-60" />
+                <ArrowRight className="h-3.5 w-3.5 shrink-0 text-surface-on-variant/40 transition-colors group-hover:text-surface-on-variant" />
               </Link>
             </li>
           );
diff --git a/apps/delta-command/src/components/dashboard/ExecutiveBriefingPanel.tsx b/apps/delta-command/src/components/dashboard/ExecutiveBriefingPanel.tsx
index 261a381..fc2ac15 100644
--- a/apps/delta-command/src/components/dashboard/ExecutiveBriefingPanel.tsx
+++ b/apps/delta-command/src/components/dashboard/ExecutiveBriefingPanel.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import { useState } from "react";
-import { Sparkles, RefreshCw, AlertCircle } from "lucide-react";
+import { AlertCircle, RefreshCw, Sparkles } from "lucide-react";
+
 import { generateBriefing } from "@/core/api";
 import { cn } from "@/core/utils";
 
@@ -25,53 +26,46 @@ export function ExecutiveBriefingPanel() {
 
   return (
     <div className="card p-6">
-      <div className="mb-4 flex items-start justify-between gap-4">
-        <div>
-          <h3 className="section-title flex items-center gap-2">
-            <Sparkles className="h-4 w-4 text-accent" />
-            AI Executive Briefing
-          </h3>
-          <p className="body-md text-surface-on-variant">
-            Leadership summary generated from live pipeline, delivery, and capacity data
-          </p>
+      <div className="mb-4 flex items-center justify-between gap-4">
+        <div className="flex items-center gap-2">
+          <span className="inline-flex items-center gap-1.5 rounded-md bg-accent-muted px-2 py-0.5 text-[11px] font-medium uppercase tracking-[0.08em] text-accent-foreground">
+            <Sparkles className="h-3 w-3" strokeWidth={2.25} />
+            AI
+          </span>
+          <h3 className="title-lg">Executive Briefing</h3>
         </div>
         <button
           type="button"
           onClick={handleGenerate}
           disabled={loading}
-          className="btn-tonal shrink-0"
+          className="btn-tonal"
         >
-          <RefreshCw className={cn("h-4 w-4", loading && "animate-spin")} />
+          <RefreshCw className={cn("h-3.5 w-3.5", loading && "animate-spin")} />
           {briefing ? "Regenerate" : "Generate"}
         </button>
       </div>
 
       {error && (
-        <div className="banner-error mb-3 text-sm">
+        <div className="banner-error text-sm">
           <AlertCircle className="h-4 w-4 shrink-0" />
           <span>{error}</span>
         </div>
       )}
 
-      {briefing ? (
-        <div className="whitespace-pre-line text-sm leading-relaxed text-surface-on">
-          {briefing}
-        </div>
-      ) : (
-        !error &&
-        !loading && (
-          <p className="body-md text-surface-on-variant/70">
-            Click <span className="font-medium text-surface-on">Generate</span> to author a
-            leadership-ready summary. Requires the backend to have{" "}
-            <code className="rounded bg-surface-container px-1.5 py-0.5 text-xs">LLM_API_KEY</code>{" "}
-            configured (any OpenAI-compatible provider).
-          </p>
-        )
+      {briefing && (
+        <div className="whitespace-pre-line text-[13.5px] leading-6 text-surface-on">{briefing}</div>
+      )}
+
+      {!briefing && !error && !loading && (
+        <p className="text-sm text-surface-on-variant">
+          Composed from live pipeline, capacity, and delivery data. Requires{" "}
+          <code className="rounded bg-surface-container px-1.5 py-0.5 text-xs">LLM_API_KEY</code> on the backend.
+        </p>
       )}
 
       {loading && !briefing && (
-        <div className="flex items-center gap-2 body-md text-surface-on-variant">
-          <RefreshCw className="h-4 w-4 animate-spin" />
+        <div className="flex items-center gap-2 text-sm text-surface-on-variant">
+          <RefreshCw className="h-3.5 w-3.5 animate-spin" />
           Composing briefing…
         </div>
       )}
diff --git a/apps/delta-command/src/components/dashboard/KPICard.tsx b/apps/delta-command/src/components/dashboard/KPICard.tsx
index 33c2a91..49041fa 100644
--- a/apps/delta-command/src/components/dashboard/KPICard.tsx
+++ b/apps/delta-command/src/components/dashboard/KPICard.tsx
@@ -1,76 +1,30 @@
-import { cn } from "@/core/utils";
 import type { LucideIcon } from "lucide-react";
-import { TrendingDown, TrendingUp, Minus } from "lucide-react";
-
-type AccentTone = "blue" | "violet" | "indigo" | "emerald" | "amber" | "red";
-
-const ACCENT_STYLES: Record<AccentTone, string> = {
-  blue: "bg-blue-500/15 text-blue-400",
-  violet: "bg-violet-500/15 text-violet-400",
-  indigo: "bg-indigo-500/15 text-indigo-400",
-  emerald: "bg-emerald-500/15 text-emerald-400",
-  amber: "bg-amber-500/15 text-amber-400",
-  red: "bg-red-500/15 text-red-400",
-};
 
 interface KPICardProps {
   label: string;
   value: string;
   context?: string;
-  change?: number;
-  changeLabel?: string;
   icon: LucideIcon;
-  accent?: AccentTone;
 }
 
-export function KPICard({
-  label,
-  value,
-  context,
-  change,
-  changeLabel,
-  icon: Icon,
-  accent = "blue",
-}: KPICardProps) {
-  const TrendIcon =
-    change === undefined ? null : change > 0 ? TrendingUp : change < 0 ? TrendingDown : Minus;
-  const trendColor =
-    change === undefined
-      ? ""
-      : change > 0
-        ? "text-emerald-400"
-        : change < 0
-          ? "text-red-400"
-          : "text-surface-on-variant";
-
+/**
+ * Precision KPI card.
+ *
+ * - Fixed rhythm: label + value + context, stacked. No hover motion, no
+ *   colored icon backgrounds (the icon is meta, the number is the message).
+ * - Icon lives inline with the label so the eye reads label -> value -> context
+ *   in a straight vertical line, uninterrupted.
+ */
+export function KPICard({ label, value, context, icon: Icon }: KPICardProps) {
   return (
-    <div className="card group p-5">
-      <div className="mb-4 flex items-center justify-between">
-        <p className="metric-label">{label}</p>
-        <div
-          className={cn(
-            "flex h-8 w-8 items-center justify-center rounded-lg transition-transform duration-300 group-hover:scale-105",
-            ACCENT_STYLES[accent]
-          )}
-        >
-          <Icon className="h-4 w-4" strokeWidth={2} />
-        </div>
+    <div className="card p-5">
+      <div className="mb-3 flex items-center gap-2 text-surface-on-variant">
+        <Icon className="h-3.5 w-3.5" strokeWidth={2} />
+        <p className="label">{label}</p>
       </div>
-      <p className="metric-value">{value}</p>
+      <p className="metric">{value}</p>
       {context && (
-        <p className="mt-2 text-xs leading-relaxed text-surface-on-variant">{context}</p>
-      )}
-      {change !== undefined && TrendIcon && (
-        <div className={cn("mt-2 flex items-center gap-1 text-xs font-medium", trendColor)}>
-          <TrendIcon className="h-3.5 w-3.5" />
-          <span>
-            {change > 0 ? "+" : ""}
-            {change}%
-          </span>
-          {changeLabel && (
-            <span className="font-normal text-surface-on-variant/70">{changeLabel}</span>
-          )}
-        </div>
+        <p className="mt-2 text-xs leading-5 text-surface-on-variant tabular">{context}</p>
       )}
     </div>
   );
diff --git a/apps/delta-command/src/components/dashboard/MilestonesPanel.tsx b/apps/delta-command/src/components/dashboard/MilestonesPanel.tsx
index 931125d..05d7b93 100644
--- a/apps/delta-command/src/components/dashboard/MilestonesPanel.tsx
+++ b/apps/delta-command/src/components/dashboard/MilestonesPanel.tsx
@@ -10,33 +10,37 @@ export function MilestonesPanel({ milestones }: MilestonesPanelProps) {
   return (
     <div className="card p-6">
       <div className="mb-4 flex items-center justify-between">
-        <h3 className="section-title">Upcoming Milestones</h3>
+        <div>
+          <h3 className="title-lg">Upcoming Milestones</h3>
+          <p className="body">
+            {milestones.length} in view
+            {milestones.filter((m) => m.overdue).length > 0 &&
+              ` · ${milestones.filter((m) => m.overdue).length} overdue`}
+          </p>
+        </div>
         <Link href="/projects" className="link-subtle">
           All projects
         </Link>
       </div>
       {milestones.length === 0 ? (
-        <p className="body-md text-surface-on-variant/70">No open milestones</p>
+        <p className="text-sm text-surface-on-variant/70">No open milestones</p>
       ) : (
-        <ul className="space-y-3">
+        <ul className="divide-y divide-outline-variant/40">
           {milestones.slice(0, 5).map((m) => (
-            <li
-              key={m.id}
-              className="flex items-start justify-between gap-3 border-b border-outline-variant/40 pb-3 last:border-0 last:pb-0"
-            >
+            <li key={m.id} className="flex items-start justify-between gap-3 py-3 first:pt-0 last:pb-0">
               <div className="min-w-0">
-                <p className="truncate title-sm text-surface-on">{m.title}</p>
-                <p className="truncate label-md text-surface-on-variant">{m.projectName}</p>
+                <p className="truncate title-sm">{m.title}</p>
+                <p className="mt-0.5 truncate text-xs text-surface-on-variant">{m.projectName}</p>
               </div>
               <div className="shrink-0 text-right">
                 <span
                   className={cn(
                     "badge",
                     m.overdue
-                      ? "bg-red-500/15 text-red-300 ring-1 ring-inset ring-red-500/30"
+                      ? "bg-red-500/15 text-red-300 ring-1 ring-inset ring-red-500/25"
                       : m.daysUntil <= 7
-                        ? "bg-amber-500/15 text-amber-300 ring-1 ring-inset ring-amber-500/30"
-                        : "bg-emerald-500/15 text-emerald-300 ring-1 ring-inset ring-emerald-500/30"
+                        ? "bg-amber-500/15 text-amber-300 ring-1 ring-inset ring-amber-500/25"
+                        : "bg-emerald-500/15 text-emerald-300 ring-1 ring-inset ring-emerald-500/25"
                   )}
                 >
                   {m.overdue
@@ -45,7 +49,7 @@ export function MilestonesPanel({ milestones }: MilestonesPanelProps) {
                       ? "Today"
                       : `${m.daysUntil}d`}
                 </span>
-                <p className="mt-1 label-md text-surface-on-variant/70">
+                <p className="mt-1 text-[11px] tabular text-surface-on-variant/70">
                   {formatShortDate(m.dueDate)}
                 </p>
               </div>
diff --git a/apps/delta-command/src/components/dashboard/PipelineChart.tsx b/apps/delta-command/src/components/dashboard/PipelineChart.tsx
index ffa7d22..76c3259 100644
--- a/apps/delta-command/src/components/dashboard/PipelineChart.tsx
+++ b/apps/delta-command/src/components/dashboard/PipelineChart.tsx
@@ -42,33 +42,39 @@ export function PipelineChart({ opportunities }: PipelineChartProps) {
 
   return (
     <div className="card p-6">
-      <h3 className="section-title mb-1">Pipeline by Stage</h3>
-      <p className="mb-6 body-md text-surface-on-variant">
-        Opportunity count and value across the sales funnel
-      </p>
-      <div className="h-64">
+      <div className="mb-4 flex items-baseline justify-between">
+        <h3 className="title-lg">Pipeline by Stage</h3>
+        <p className="text-xs text-surface-on-variant tabular">
+          count across the funnel
+        </p>
+      </div>
+      <div className="h-56">
         <ResponsiveContainer width="100%" height="100%">
-          <BarChart data={data} barSize={40}>
-            <CartesianGrid strokeDasharray="3 3" stroke={CHART_GRID} vertical={false} />
+          <BarChart data={data} barSize={36} margin={{ top: 4, right: 4, bottom: 0, left: -20 }}>
+            <CartesianGrid strokeDasharray="2 4" stroke={CHART_GRID} vertical={false} />
             <XAxis
               dataKey="stage"
-              tick={{ fontSize: 12, fill: CHART_TICK }}
+              tick={{ fontSize: 11, fill: CHART_TICK }}
               axisLine={false}
               tickLine={false}
+              tickMargin={8}
             />
             <YAxis
-              tick={{ fontSize: 12, fill: CHART_TICK }}
+              tick={{ fontSize: 11, fill: CHART_TICK }}
               axisLine={false}
               tickLine={false}
+              width={32}
+              allowDecimals={false}
             />
             <Tooltip
+              cursor={{ fill: "rgb(255 255 255 / 0.03)" }}
               contentStyle={CHART_TOOLTIP_STYLE}
               formatter={(value: number, name: string) => {
                 if (name === "value") return [formatCurrency(value), "Total Value"];
                 return [value, "Count"];
               }}
             />
-            <Bar dataKey="count" radius={[6, 6, 0, 0]}>
+            <Bar dataKey="count" radius={[3, 3, 0, 0]}>
               {data.map((entry, index) => (
                 <Cell key={`cell-${index}`} fill={entry.fill} />
               ))}
diff --git a/apps/delta-command/src/components/dashboard/UtilizationChart.tsx b/apps/delta-command/src/components/dashboard/UtilizationChart.tsx
index 2d4347a..256028c 100644
--- a/apps/delta-command/src/components/dashboard/UtilizationChart.tsx
+++ b/apps/delta-command/src/components/dashboard/UtilizationChart.tsx
@@ -36,48 +36,54 @@ export function UtilizationChart({ engineers, maxVisible = 30 }: UtilizationChar
       fill: getBarColor(e.utilization),
     }));
 
-  const chartHeight = Math.min(520, Math.max(256, data.length * 26));
+  const chartHeight = Math.min(520, Math.max(224, data.length * 22));
 
   return (
     <div className="card p-6">
-      <h3 className="section-title mb-1">Team Utilization</h3>
-      <p className="mb-6 body-md text-surface-on-variant">
-        Current allocation across the delta engineering team
-        {engineers.length > maxVisible && (
-          <span className="text-surface-on-variant/70"> · top {maxVisible} by utilization</span>
-        )}
-      </p>
+      <div className="mb-4 flex items-baseline justify-between">
+        <h3 className="title-lg">Team Utilization</h3>
+        <p className="text-xs text-surface-on-variant tabular">
+          {engineers.length > maxVisible ? `top ${maxVisible} by %` : `${engineers.length} engineers`}
+        </p>
+      </div>
       <div className="overflow-y-auto" style={{ maxHeight: chartHeight }}>
         <div style={{ height: chartHeight }}>
           <ResponsiveContainer width="100%" height="100%">
-            <BarChart data={data} layout="vertical" barSize={16}>
-            <CartesianGrid strokeDasharray="3 3" stroke={CHART_GRID} horizontal={false} />
-            <XAxis
-              type="number"
-              domain={[0, 120]}
-              tick={{ fontSize: 12, fill: CHART_TICK }}
-              axisLine={false}
-              tickLine={false}
-              tickFormatter={(v) => `${v}%`}
-            />
-            <YAxis
-              type="category"
-              dataKey="name"
-              tick={{ fontSize: 12, fill: CHART_TICK }}
-              axisLine={false}
-              tickLine={false}
-              width={60}
-            />
-            <Tooltip
-              contentStyle={CHART_TOOLTIP_STYLE}
-              formatter={(value: number) => [`${value}%`, "Utilization"]}
-            />
-            <ReferenceLine x={100} stroke="#EF4444" strokeDasharray="4 4" label={{ value: "100%", position: "top", fill: "#EF4444", fontSize: 11 }} />
-            <Bar dataKey="utilization" radius={[0, 6, 6, 0]}>
-              {data.map((entry, index) => (
-                <Cell key={`cell-${index}`} fill={entry.fill} />
-              ))}
-            </Bar>
+            <BarChart data={data} layout="vertical" barSize={12} margin={{ top: 12, right: 4, bottom: 4, left: 0 }}>
+              <CartesianGrid strokeDasharray="2 4" stroke={CHART_GRID} horizontal={false} />
+              <XAxis
+                type="number"
+                domain={[0, 120]}
+                tick={{ fontSize: 11, fill: CHART_TICK }}
+                axisLine={false}
+                tickLine={false}
+                tickFormatter={(v) => `${v}%`}
+              />
+              <YAxis
+                type="category"
+                dataKey="name"
+                tick={{ fontSize: 11, fill: CHART_TICK }}
+                axisLine={false}
+                tickLine={false}
+                width={72}
+              />
+              <Tooltip
+                cursor={{ fill: "rgb(255 255 255 / 0.03)" }}
+                contentStyle={CHART_TOOLTIP_STYLE}
+                formatter={(value: number) => [`${value}%`, "Utilization"]}
+              />
+              <ReferenceLine
+                x={100}
+                stroke="#EF4444"
+                strokeDasharray="3 3"
+                strokeOpacity={0.6}
+                label={{ value: "100%", position: "top", fill: "#EF4444", fontSize: 10 }}
+              />
+              <Bar dataKey="utilization" radius={[0, 2, 2, 0]}>
+                {data.map((entry, index) => (
+                  <Cell key={`cell-${index}`} fill={entry.fill} />
+                ))}
+              </Bar>
             </BarChart>
           </ResponsiveContainer>
         </div>
diff --git a/apps/delta-command/src/components/layout/Header.tsx b/apps/delta-command/src/components/layout/Header.tsx
index 0e706b5..b2254a8 100644
--- a/apps/delta-command/src/components/layout/Header.tsx
+++ b/apps/delta-command/src/components/layout/Header.tsx
@@ -6,20 +6,19 @@ interface HeaderProps {
 }
 
 /**
- * The header is deliberately spartan: a page title, an optional meta line
- * (used to show a single actionable number), and today's date. Everything
- * else lives on the page itself so the chrome never competes with data.
+ * Two-line header: page title (h2) and today's date. The optional `meta` slot
+ * carries a single data-bearing summary; anything decorative goes on the page.
  */
 export function Header({ title, meta }: HeaderProps) {
   const today = format(new Date(), "MMM d, yyyy");
 
   return (
     <header className="top-app-bar">
-      <div>
-        <h2 className="headline-md">{title}</h2>
-        {meta && <p className="mt-0.5 text-sm text-surface-on-variant">{meta}</p>}
+      <div className="flex items-baseline gap-3">
+        <h2 className="text-lg font-semibold tracking-tight text-surface-on">{title}</h2>
+        {meta && <p className="text-xs text-surface-on-variant">{meta}</p>}
       </div>
-      <span className="text-xs font-medium text-surface-on-variant">{today}</span>
+      <span className="text-xs font-medium text-surface-on-variant tabular">{today}</span>
     </header>
   );
 }
diff --git a/apps/delta-command/src/components/layout/Sidebar.tsx b/apps/delta-command/src/components/layout/Sidebar.tsx
index 0b2c3d5..e16657c 100644
--- a/apps/delta-command/src/components/layout/Sidebar.tsx
+++ b/apps/delta-command/src/components/layout/Sidebar.tsx
@@ -17,14 +17,14 @@ export function Sidebar() {
 
   return (
     <aside className="nav-drawer">
-      <div className="flex h-[4.25rem] items-center gap-3 border-b border-sidebar-border px-5">
-        <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-accent shadow-glow">
-          <Zap className="h-4 w-4 text-white" strokeWidth={2.5} />
+      <div className="flex h-14 items-center gap-2.5 border-b border-sidebar-border px-4">
+        <div className="flex h-7 w-7 items-center justify-center rounded-md bg-accent">
+          <Zap className="h-3.5 w-3.5 text-white" strokeWidth={2.5} />
         </div>
-        <h1 className="text-sm font-semibold tracking-tight text-white">Delta Command</h1>
+        <h1 className="text-[13px] font-semibold tracking-tight text-white">Delta Command</h1>
       </div>
 
-      <nav className="flex-1 space-y-0.5 px-3 py-4">
+      <nav className="flex-1 space-y-0.5 px-2 py-3">
         {navigation.map((item) => {
           const isActive = pathname.startsWith(item.href);
           return (
@@ -36,9 +36,9 @@ export function Sidebar() {
               <item.icon
                 className={cn(
                   "h-4 w-4 shrink-0",
-                  isActive ? "text-white" : "text-sidebar-muted"
+                  isActive ? "text-surface-on" : "text-sidebar-muted"
                 )}
-                strokeWidth={isActive ? 2.25 : 2}
+                strokeWidth={isActive ? 2.25 : 1.75}
               />
               {item.name}
             </Link>
diff --git a/apps/delta-command/src/components/opportunities/OpportunitiesPageClient.tsx b/apps/delta-command/src/components/opportunities/OpportunitiesPageClient.tsx
index f44f7dd..c7bda39 100644
--- a/apps/delta-command/src/components/opportunities/OpportunitiesPageClient.tsx
+++ b/apps/delta-command/src/components/opportunities/OpportunitiesPageClient.tsx
@@ -45,33 +45,28 @@ export function OpportunitiesPageClient({
         meta={`${activeOpps.length} active · ${wonOpps.length} won · ${lostCount} lost`}
       />
 
-      <div className="space-y-6 p-8">
+      <div className="space-y-6 p-6 md:p-8">
         <div className="grid gap-4 sm:grid-cols-3">
-          <div className="card p-4">
-            <p className="metric-label">Active Pipeline</p>
-            <p className="metric-value text-[1.75rem]">{formatCurrency(totalValue)}</p>
-          </div>
-          <div className="card p-4">
-            <p className="metric-label">Weighted Value</p>
-            <p className="metric-value text-[1.75rem] text-accent-foreground">
-              {formatCurrency(weightedValue)}
-            </p>
-          </div>
-          <div className="card p-4">
-            <div className="flex items-center gap-2">
-              <Trophy className="h-4 w-4 text-emerald-400" />
-              <p className="metric-label">Won this cycle</p>
-              {lostCount > 0 && (
-                <span className="ml-auto flex items-center gap-1 label-md text-surface-on-variant/70">
-                  <XCircle className="h-3.5 w-3.5" />
+          <StatCard label="Active Pipeline" value={formatCurrency(totalValue)} />
+          <StatCard
+            label="Weighted Value"
+            value={formatCurrency(weightedValue)}
+            valueClassName="text-accent-foreground"
+          />
+          <StatCard
+            label="Won this cycle"
+            value={`${wonOpps.length} · ${formatCurrency(wonValue)}`}
+            valueClassName="text-emerald-400"
+            leadingIcon={<Trophy className="h-3.5 w-3.5" />}
+            trailing={
+              lostCount > 0 ? (
+                <span className="flex items-center gap-1 text-[11px] tabular text-surface-on-variant/70">
+                  <XCircle className="h-3 w-3" />
                   {lostCount} lost
                 </span>
-              )}
-            </div>
-            <p className="metric-value text-[1.75rem] text-emerald-400">
-              {wonOpps.length} · {formatCurrency(wonValue)}
-            </p>
-          </div>
+              ) : null
+            }
+          />
         </div>
 
         <div className="segmented-control w-fit">
@@ -80,7 +75,7 @@ export function OpportunitiesPageClient({
             onClick={() => setView("board")}
             className={cn("segmented-item", view === "board" && "segmented-item-active")}
           >
-            <LayoutGrid className="h-4 w-4" />
+            <LayoutGrid className="h-3.5 w-3.5" />
             Board
           </button>
           <button
@@ -88,7 +83,7 @@ export function OpportunitiesPageClient({
             onClick={() => setView("list")}
             className={cn("segmented-item", view === "list" && "segmented-item-active")}
           >
-            <List className="h-4 w-4" />
+            <List className="h-3.5 w-3.5" />
             List
           </button>
         </div>
@@ -110,3 +105,30 @@ export function OpportunitiesPageClient({
     </div>
   );
 }
+
+function StatCard({
+  label,
+  value,
+  valueClassName,
+  leadingIcon,
+  trailing,
+}: {
+  label: string;
+  value: string;
+  valueClassName?: string;
+  leadingIcon?: React.ReactNode;
+  trailing?: React.ReactNode;
+}) {
+  return (
+    <div className="card p-5">
+      <div className="flex items-center justify-between gap-2 text-surface-on-variant">
+        <div className="flex items-center gap-1.5">
+          {leadingIcon}
+          <p className="label">{label}</p>
+        </div>
+        {trailing}
+      </div>
+      <p className={cn("mt-2 metric-sm", valueClassName)}>{value}</p>
+    </div>
+  );
+}
diff --git a/apps/delta-command/src/components/opportunities/PipelineBoard.tsx b/apps/delta-command/src/components/opportunities/PipelineBoard.tsx
index 6895954..92c3d7d 100644
--- a/apps/delta-command/src/components/opportunities/PipelineBoard.tsx
+++ b/apps/delta-command/src/components/opportunities/PipelineBoard.tsx
@@ -1,9 +1,10 @@
 "use client";
 
+import { Building2, Calendar, User } from "lucide-react";
+
 import type { Opportunity, OpportunityStage } from "@/core/types";
 import { OPPORTUNITY_STAGES } from "@/core/types";
-import { formatCurrency, formatShortDate, cn } from "@/core/utils";
-import { Building2, Calendar, User } from "lucide-react";
+import { cn, formatCurrency, formatShortDate } from "@/core/utils";
 
 interface OpportunityCardProps {
   opportunity: Opportunity;
@@ -19,41 +20,37 @@ export function OpportunityCard({
   const weightedValue = opportunity.value * (opportunity.probability / 100);
 
   return (
-    <div className="card group p-4 transition-all duration-200 hover:shadow-elevated">
-      <div className="mb-3 flex items-start justify-between gap-2">
-        <h4 className="title-sm leading-snug text-surface-on">
-          {opportunity.title}
-        </h4>
-        <span className="shrink-0 title-sm text-accent-foreground">
+    <div className="card-interactive p-4">
+      <div className="mb-2 flex items-start justify-between gap-2">
+        <h4 className="title-sm leading-snug">{opportunity.title}</h4>
+        <span className="shrink-0 title-sm tabular text-accent-foreground">
           {formatCurrency(opportunity.value)}
         </span>
       </div>
 
-      <div className="mb-3 flex items-center gap-1.5 label-md text-surface-on-variant">
-        <Building2 className="h-3.5 w-3.5" />
+      <div className="mb-3 flex items-center gap-1.5 text-[11px] text-surface-on-variant">
+        <Building2 className="h-3 w-3" />
         {opportunity.client}
       </div>
 
       {!compact && (
-        <p className="mb-3 line-clamp-2 body-md text-surface-on-variant">
-          {opportunity.description}
-        </p>
+        <p className="mb-3 line-clamp-2 body">{opportunity.description}</p>
       )}
 
-      <div className="mb-3 flex flex-wrap gap-1">
-        {opportunity.tags.map((tag) => (
-          <span key={tag} className="chip">
-            {tag}
-          </span>
-        ))}
-      </div>
+      {opportunity.tags.length > 0 && (
+        <div className="mb-3 flex flex-wrap gap-1">
+          {opportunity.tags.map((tag) => (
+            <span key={tag} className="chip">
+              {tag}
+            </span>
+          ))}
+        </div>
+      )}
 
       <div className="mb-3">
-        <div className="mb-1 flex items-center justify-between label-md">
-          <span className="text-surface-on-variant">Probability</span>
-          <span className="font-medium text-surface-on">
-            {opportunity.probability}%
-          </span>
+        <div className="mb-1 flex items-baseline justify-between text-[11px] tabular text-surface-on-variant">
+          <span>Probability</span>
+          <span className="font-medium text-surface-on">{opportunity.probability}%</span>
         </div>
         <div className="progress-track">
           <div
@@ -61,38 +58,34 @@ export function OpportunityCard({
             style={{ width: `${opportunity.probability}%` }}
           />
         </div>
-        <p className="mt-1 label-sm text-surface-on-variant/70">
-          Weighted: {formatCurrency(weightedValue)}
+        <p className="mt-1 text-[11px] tabular text-surface-on-variant/70">
+          Weighted {formatCurrency(weightedValue)}
         </p>
       </div>
 
-      <div className="flex items-center justify-between border-t border-outline-variant/50 pt-3 label-md text-surface-on-variant">
-        <div className="flex items-center gap-1">
-          <User className="h-3.5 w-3.5" />
+      <div className="flex items-center justify-between border-t border-outline-variant/40 pt-2.5 text-[11px] tabular text-surface-on-variant">
+        <span className="flex items-center gap-1">
+          <User className="h-3 w-3" />
           {opportunity.owner.split(" ")[0]}
-        </div>
-        <div className="flex items-center gap-1">
-          <Calendar className="h-3.5 w-3.5" />
+        </span>
+        <span className="flex items-center gap-1">
+          <Calendar className="h-3 w-3" />
           {formatShortDate(opportunity.expectedClose)}
-        </div>
+        </span>
       </div>
 
       {onStageChange && (
-        <div className="mt-3 border-t border-outline-variant/50 pt-3">
-          <select
-            value={opportunity.stage}
-            onChange={(e) =>
-              onStageChange(opportunity.id, e.target.value as OpportunityStage)
-            }
-            className="text-field-outlined h-10 w-full text-label-md"
-          >
-            {OPPORTUNITY_STAGES.map((s) => (
-              <option key={s.id} value={s.id}>
-                {s.label}
-              </option>
-            ))}
-          </select>
-        </div>
+        <select
+          value={opportunity.stage}
+          onChange={(e) => onStageChange(opportunity.id, e.target.value as OpportunityStage)}
+          className="mt-3 h-8 w-full rounded-md border border-white/[0.06] bg-surface-container/60 px-2 text-[12px] font-medium text-surface-on outline-none transition-colors hover:border-white/[0.1] focus:border-accent/60 focus:ring-1 focus:ring-accent/40"
+        >
+          {OPPORTUNITY_STAGES.map((s) => (
+            <option key={s.id} value={s.id}>
+              {s.label}
+            </option>
+          ))}
+        </select>
       )}
     </div>
   );
@@ -104,9 +97,7 @@ interface PipelineBoardProps {
 }
 
 export function PipelineBoard({ opportunities, onStageChange }: PipelineBoardProps) {
-  const activeStages = OPPORTUNITY_STAGES.filter(
-    (s) => !["won", "lost"].includes(s.id)
-  );
+  const activeStages = OPPORTUNITY_STAGES.filter((s) => !["won", "lost"].includes(s.id));
 
   return (
     <div className="flex gap-4 overflow-x-auto pb-4">
@@ -115,26 +106,21 @@ export function PipelineBoard({ opportunities, onStageChange }: PipelineBoardPro
         const stageValue = stageOpps.reduce((sum, o) => sum + o.value, 0);
 
         return (
-          <div
-            key={stage.id}
-            className="kanban-column"
-          >
+          <div key={stage.id} className="kanban-column">
             <div className="mb-3 flex items-center justify-between px-1">
               <div className="flex items-center gap-2">
-                <div className={cn("h-2.5 w-2.5 rounded-full", stage.color)} />
-                <h3 className="title-sm text-surface-on">
-                  {stage.label}
-                </h3>
-                <span className="flex h-6 min-w-6 items-center justify-center rounded-md bg-surface-bright px-1.5 label-md text-surface-on-variant ring-1 ring-inset ring-outline-variant/60">
+                <span className={cn("h-2 w-2 rounded-full", stage.color)} />
+                <h3 className="title-sm">{stage.label}</h3>
+                <span className="rounded bg-surface-bright/80 px-1.5 text-[11px] font-medium tabular text-surface-on-variant ring-1 ring-inset ring-white/[0.06]">
                   {stageOpps.length}
                 </span>
               </div>
-              <span className="label-md text-surface-on-variant">
+              <span className="text-[11px] tabular text-surface-on-variant">
                 {formatCurrency(stageValue)}
               </span>
             </div>
 
-            <div className="flex flex-1 flex-col gap-3">
+            <div className="flex flex-1 flex-col gap-2.5">
               {stageOpps.map((opp) => (
                 <OpportunityCard
                   key={opp.id}
@@ -144,8 +130,10 @@ export function PipelineBoard({ opportunities, onStageChange }: PipelineBoardPro
                 />
               ))}
               {stageOpps.length === 0 && (
-                <div className="flex flex-1 items-center justify-center rounded-xl border border-dashed border-outline-variant/80 p-6">
-                  <p className="label-md text-surface-on-variant/60">No opportunities</p>
+                <div className="flex flex-1 items-center justify-center rounded-lg border border-dashed border-outline-variant/60 py-8">
+                  <p className="text-[11px] uppercase tracking-wider text-surface-on-variant/50">
+                    Empty
+                  </p>
                 </div>
               )}
             </div>
diff --git a/apps/delta-command/src/components/projects/ProjectCard.tsx b/apps/delta-command/src/components/projects/ProjectCard.tsx
index 6244795..64a1e0a 100644
--- a/apps/delta-command/src/components/projects/ProjectCard.tsx
+++ b/apps/delta-command/src/components/projects/ProjectCard.tsx
@@ -1,13 +1,14 @@
+import { AlertTriangle, Calendar, CheckCircle2, ChevronDown, Circle, Users } from "lucide-react";
+
 import type { Project } from "@/core/types";
 import { PROJECT_STATUSES } from "@/core/types";
 import {
   cn,
+  daysUntil,
   formatCurrency,
   formatDate,
-  daysUntil,
   getStatusBadgeColor,
 } from "@/core/utils";
-import { Calendar, Users, AlertTriangle, CheckCircle2, Circle } from "lucide-react";
 
 interface ProjectCardProps {
   project: Project;
@@ -15,11 +16,7 @@ interface ProjectCardProps {
   onStatusChange?: (id: string, status: Project["status"]) => void;
 }
 
-export function ProjectCard({
-  project,
-  engineerNames = {},
-  onStatusChange,
-}: ProjectCardProps) {
+export function ProjectCard({ project, engineerNames = {}, onStatusChange }: ProjectCardProps) {
   const statusConfig = PROJECT_STATUSES.find((s) => s.id === project.status);
   const daysLeft = daysUntil(project.endDate);
   const budgetUsed = Math.round((project.spent / project.budget) * 100);
@@ -28,30 +25,38 @@ export function ProjectCard({
 
   return (
     <div className="card overflow-hidden">
-      <div className="border-b border-outline-variant/50 px-6 py-4">
-        <div className="flex items-start justify-between gap-4">
-          <div>
-            <h3 className="title-sm text-surface-on">{project.name}</h3>
-            <p className="body-md text-surface-on-variant">{project.client}</p>
-          </div>
+      <div className="flex items-start justify-between gap-4 border-b border-outline-variant/40 px-5 py-3.5">
+        <div className="min-w-0">
+          <h3 className="truncate title-md">{project.name}</h3>
+          <p className="mt-0.5 text-xs text-surface-on-variant">{project.client}</p>
+        </div>
+        {onStatusChange ? (
+          <StatusPicker
+            projectId={project.id}
+            currentStatus={project.status}
+            onChange={onStatusChange}
+          />
+        ) : (
           <span className={cn("badge capitalize", getStatusBadgeColor(project.status))}>
             {statusConfig?.label ?? project.status}
           </span>
-        </div>
+        )}
       </div>
 
-      <div className="px-6 py-4">
-        <p className="mb-4 body-md text-surface-on-variant">{project.description}</p>
+      <div className="space-y-4 px-5 py-4">
+        <p className="body">{project.description}</p>
 
-        <div className="mb-4">
-          <div className="mb-1.5 flex items-center justify-between body-md">
-            <span className="text-surface-on-variant">Progress</span>
-            <span className="title-sm text-surface-on">{project.progress}%</span>
+        <div>
+          <div className="mb-1.5 flex items-baseline justify-between">
+            <span className="text-[11px] uppercase tracking-wider text-surface-on-variant">
+              Progress
+            </span>
+            <span className="title-sm tabular">{project.progress}%</span>
           </div>
-          <div className="progress-track h-2">
+          <div className="progress-track h-1.5">
             <div
               className={cn(
-                "h-full rounded-full transition-all",
+                "h-full rounded-full transition-[width] duration-500",
                 project.status === "at_risk" ? "bg-red-500" : "bg-accent"
               )}
               style={{ width: `${project.progress}%` }}
@@ -59,84 +64,65 @@ export function ProjectCard({
           </div>
         </div>
 
-        <div className="mb-4 grid grid-cols-2 gap-4">
+        <dl className="grid grid-cols-2 gap-4">
           <div>
-            <p className="label-md text-surface-on-variant">Budget</p>
-            <p className="title-sm text-surface-on">
-              {formatCurrency(project.spent)} / {formatCurrency(project.budget)}
-            </p>
-            <p
+            <dt className="label">Budget</dt>
+            <dd className="mt-0.5 title-sm tabular">
+              {formatCurrency(project.spent)}{" "}
+              <span className="font-normal text-surface-on-variant/70">
+                / {formatCurrency(project.budget)}
+              </span>
+            </dd>
+            <dd
               className={cn(
-                "label-md",
-                budgetUsed > 90 ? "text-error" : "text-surface-on-variant/70"
+                "text-[11px] tabular",
+                budgetUsed > 90 ? "text-red-400" : "text-surface-on-variant/70"
               )}
             >
               {budgetUsed}% utilized
-            </p>
+            </dd>
           </div>
           <div>
-            <p className="label-md text-surface-on-variant">Timeline</p>
-            <div className="flex items-center gap-1 title-sm text-surface-on">
-              <Calendar className="h-3.5 w-3.5 text-surface-on-variant" />
+            <dt className="label">Timeline</dt>
+            <dd className="mt-0.5 flex items-center gap-1 title-sm tabular">
+              <Calendar className="h-3 w-3 text-surface-on-variant" />
               {daysLeft > 0 ? `${daysLeft}d remaining` : "Past due"}
-            </div>
-            <p className="label-md text-surface-on-variant/70">
+            </dd>
+            <dd className="text-[11px] tabular text-surface-on-variant/70">
               Due {formatDate(project.endDate)}
-            </p>
+            </dd>
           </div>
-        </div>
+        </dl>
 
-        <div className="mb-4 flex items-center gap-2">
-          <Users className="h-4 w-4 text-surface-on-variant" />
-          <span className="label-md text-surface-on-variant">Lead:</span>
-          <span className="label-md font-medium text-surface-on">
-            {project.leadEngineer}
-          </span>
-          <span className="label-md text-outline-variant">|</span>
-          <span className="label-md text-surface-on-variant">
-            {teamNames.length} team members
-          </span>
+        <div className="flex items-center gap-2 text-xs text-surface-on-variant tabular">
+          <Users className="h-3.5 w-3.5" />
+          <span>Lead</span>
+          <span className="font-medium text-surface-on">{project.leadEngineer}</span>
+          <span className="text-outline-variant">·</span>
+          <span>{teamNames.length} team members</span>
         </div>
 
-        {onStatusChange && (
-          <div className="mb-4">
-            <label className="mb-1.5 block label-md text-surface-on-variant">
-              Update status
-            </label>
-            <select
-              value={project.status}
-              onChange={(e) =>
-                onStatusChange(project.id, e.target.value as Project["status"])
-              }
-              className="text-field-outlined h-10 w-full text-sm"
-            >
-              {PROJECT_STATUSES.map((status) => (
-                <option key={status.id} value={status.id}>
-                  {status.label}
-                </option>
-              ))}
-            </select>
-          </div>
-        )}
-
         {project.status === "at_risk" && (
-          <div className="banner-error mb-4 py-3">
-            <AlertTriangle className="h-4 w-4 shrink-0" />
-            <span className="body-md">Project flagged as at-risk — review milestones and budget</span>
+          <div className="banner-warning text-xs">
+            <AlertTriangle className="h-3.5 w-3.5 shrink-0" />
+            <span>At-risk — review milestones and budget</span>
           </div>
         )}
 
-        <div className="border-t border-outline-variant/50 pt-4">
-          <p className="mb-2 label-md text-surface-on-variant">
-            Milestones ({completedMilestones}/{project.milestones.length})
+        <div className="border-t border-outline-variant/40 pt-3">
+          <p className="mb-2 label">
+            Milestones{" "}
+            <span className="text-surface-on-variant/60">
+              ({completedMilestones}/{project.milestones.length})
+            </span>
           </p>
-          <ul className="space-y-2">
+          <ul className="space-y-1.5">
             {project.milestones.map((milestone) => (
-              <li key={milestone.id} className="flex items-center gap-2 label-md">
+              <li key={milestone.id} className="flex items-center gap-2 text-xs tabular">
                 {milestone.completed ? (
-                  <CheckCircle2 className="h-3.5 w-3.5 shrink-0 text-emerald-400" />
+                  <CheckCircle2 className="h-3 w-3 shrink-0 text-emerald-400" />
                 ) : (
-                  <Circle className="h-3.5 w-3.5 shrink-0 text-outline-variant" />
+                  <Circle className="h-3 w-3 shrink-0 text-outline-variant" />
                 )}
                 <span
                   className={cn(
@@ -158,3 +144,43 @@ export function ProjectCard({
     </div>
   );
 }
+
+/**
+ * Compact status picker rendered inline in the card header — an editable
+ * badge, not a bulky select. Uses a native select for keyboard/a11y,
+ * styled to match the read-only badge visually.
+ */
+function StatusPicker({
+  projectId,
+  currentStatus,
+  onChange,
+}: {
+  projectId: string;
+  currentStatus: Project["status"];
+  onChange: (id: string, status: Project["status"]) => void;
+}) {
+  return (
+    <label
+      className={cn(
+        "badge relative shrink-0 cursor-pointer gap-1 pr-1.5 capitalize",
+        getStatusBadgeColor(currentStatus)
+      )}
+      title="Change status"
+    >
+      {PROJECT_STATUSES.find((s) => s.id === currentStatus)?.label ?? currentStatus}
+      <ChevronDown className="h-3 w-3 opacity-70" strokeWidth={2.25} />
+      <select
+        value={currentStatus}
+        onChange={(e) => onChange(projectId, e.target.value as Project["status"])}
+        className="absolute inset-0 cursor-pointer opacity-0"
+        aria-label="Update project status"
+      >
+        {PROJECT_STATUSES.map((s) => (
+          <option key={s.id} value={s.id}>
+            {s.label}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}
diff --git a/apps/delta-command/src/components/projects/ProjectsPageClient.tsx b/apps/delta-command/src/components/projects/ProjectsPageClient.tsx
index d1d252e..36f0abe 100644
--- a/apps/delta-command/src/components/projects/ProjectsPageClient.tsx
+++ b/apps/delta-command/src/components/projects/ProjectsPageClient.tsx
@@ -47,30 +47,32 @@ export function ProjectsPageClient({
         meta={`${inDelivery} in delivery · ${planning.length} planning · ${atRisk.length} at risk`}
       />
 
-      <div className="space-y-8 p-8">
+      <div className="space-y-6 p-6 md:p-8">
         <div className="grid gap-4 sm:grid-cols-3">
-          <div className="card p-4">
-            <p className="metric-label">Total Projects</p>
-            <p className="metric-value text-[1.75rem]">{projects.length}</p>
+          <div className="card p-5">
+            <p className="label">Total Projects</p>
+            <p className="mt-2 metric-sm tabular">{projects.length}</p>
           </div>
-          <div className="card p-4">
-            <p className="metric-label">Budget</p>
-            <p className="metric-value text-[1.75rem]">{formatCurrency(totalBudget)}</p>
+          <div className="card p-5">
+            <p className="label">Budget</p>
+            <p className="mt-2 metric-sm tabular">{formatCurrency(totalBudget)}</p>
           </div>
-          <div className="card p-4">
-            <p className="metric-label">Spent to Date</p>
-            <p className="metric-value text-[1.75rem] text-accent-foreground">
+          <div className="card p-5">
+            <p className="label">Spent to Date</p>
+            <p className="mt-2 metric-sm tabular text-accent-foreground">
               {formatCurrency(totalSpent)}
             </p>
-            <p className="label-md text-surface-on-variant/70">{burn}% of budget</p>
+            <p className="text-[11px] tabular text-surface-on-variant/70">
+              {burn}% of budget
+            </p>
           </div>
         </div>
 
         {atRisk.length > 0 && (
           <ProjectSection
             title="At Risk"
-            titleIcon={<AlertTriangle className="h-5 w-5 text-error" />}
-            titleClassName="text-error"
+            titleIcon={<AlertTriangle className="h-4 w-4 text-red-400" />}
+            titleClassName="text-red-300"
             projects={atRisk}
             engineerNames={engineerNames}
             onStatusChange={handleStatusChange}
@@ -111,12 +113,14 @@ function ProjectSection({
   if (projects.length === 0) return null;
   return (
     <section>
-      <h3 className={`section-title mb-4 flex items-center gap-2 ${titleClassName ?? ""}`}>
+      <h3 className={`mb-3 flex items-center gap-2 title-lg ${titleClassName ?? ""}`}>
         {titleIcon}
         {title}
-        <span className="ml-1 label-md text-surface-on-variant">({projects.length})</span>
+        <span className="ml-1 text-[11px] font-medium tabular text-surface-on-variant">
+          {projects.length}
+        </span>
       </h3>
-      <div className="grid gap-6 md:grid-cols-2">
+      <div className={projects.length === 1 ? "grid gap-6" : "grid gap-6 md:grid-cols-2"}>
         {projects.map((project) => (
           <ProjectCard
             key={project.id}
diff --git a/apps/delta-command/src/components/team/TeamFilters.tsx b/apps/delta-command/src/components/team/TeamFilters.tsx
index c52fd8f..c02bb5e 100644
--- a/apps/delta-command/src/components/team/TeamFilters.tsx
+++ b/apps/delta-command/src/components/team/TeamFilters.tsx
@@ -26,13 +26,13 @@ export function TeamFilters({ filters, onChange, resultCount, totalCount }: Team
   return (
     <div className="flex flex-wrap items-center gap-3">
       <div className="relative min-w-[220px] flex-1">
-        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-surface-on-variant/60" />
+        <Search className="absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-surface-on-variant/60" />
         <input
           type="search"
-          placeholder="Search engineers..."
+          placeholder="Search engineers…"
           value={filters.search}
           onChange={(e) => onChange({ ...filters, search: e.target.value })}
-          className="text-field-outlined h-10 w-full pl-9 text-sm"
+          className="text-field w-full pl-8"
         />
       </div>
       <select
@@ -40,7 +40,7 @@ export function TeamFilters({ filters, onChange, resultCount, totalCount }: Team
         onChange={(e) =>
           onChange({ ...filters, status: e.target.value as TeamFilterState["status"] })
         }
-        className="text-field-outlined h-10 min-w-[160px] px-3 text-sm"
+        className="text-field min-w-[160px]"
       >
         {STATUS_OPTIONS.map((option) => (
           <option key={option.value} value={option.value}>
@@ -48,7 +48,7 @@ export function TeamFilters({ filters, onChange, resultCount, totalCount }: Team
           </option>
         ))}
       </select>
-      <span className="label-md text-surface-on-variant">
+      <span className="label">
         {resultCount} of {totalCount} engineers
       </span>
     </div>
diff --git a/apps/delta-command/src/components/team/TeamPageClient.tsx b/apps/delta-command/src/components/team/TeamPageClient.tsx
index 725e106..9576ca4 100644
--- a/apps/delta-command/src/components/team/TeamPageClient.tsx
+++ b/apps/delta-command/src/components/team/TeamPageClient.tsx
@@ -37,7 +37,7 @@ export function TeamPageClient({ engineers: initial }: TeamPageClientProps) {
         meta={`${engineers.length} engineers · click any week cell to edit`}
       />
 
-      <div className="space-y-6 p-8">
+      <div className="space-y-6 p-6 md:p-8">
         <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
           <StatCard icon={Users} label="Team Members" value={engineers.length} tone="accent" />
           <StatCard icon={Clock} label="Avg This Week" value={`${avgUtil}%`} tone="blue" />
@@ -57,9 +57,9 @@ export function TeamPageClient({ engineers: initial }: TeamPageClientProps) {
 
         {overallocated.length > 0 && (
           <div className="banner-warning">
-            <AlertTriangle className="h-5 w-5 shrink-0" />
-            <p className="body-md">
-              <span className="title-sm">
+            <AlertTriangle className="h-4 w-4 shrink-0" />
+            <p className="text-sm text-amber-100">
+              <span className="font-medium text-amber-50">
                 {formatNameList(overallocated.map((e) => e.name.split(" ")[0]))}
               </span>{" "}
               {overallocated.length === 1 ? "is" : "are"} overallocated this week.
@@ -109,8 +109,8 @@ function StatCard({
           <Icon className="h-4 w-4" />
         </div>
         <div>
-          <p className="metric-value text-[1.75rem]">{value}</p>
-          <p className="metric-label">{label}</p>
+          <p className="metric-sm">{value}</p>
+          <p className="label">{label}</p>
         </div>
       </div>
     </div>
diff --git a/apps/delta-command/src/components/team/UtilizationTimeline.tsx b/apps/delta-command/src/components/team/UtilizationTimeline.tsx
index 8f567f3..a54bd3c 100644
--- a/apps/delta-command/src/components/team/UtilizationTimeline.tsx
+++ b/apps/delta-command/src/components/team/UtilizationTimeline.tsx
@@ -1,10 +1,11 @@
 "use client";
 
 import { useCallback, useMemo, useState } from "react";
-import type { Database, Engineer } from "@/core/types";
+import { Check, X } from "lucide-react";
+
 import { updateTimelineCell } from "@/core/api";
+import type { Database, Engineer } from "@/core/types";
 import { cn, deriveTimelineWeeks, utilizationVariant } from "@/core/utils";
-import { CalendarRange, Check, Pencil, X } from "lucide-react";
 
 interface UtilizationTimelineProps {
   engineers: Engineer[];
@@ -55,72 +56,56 @@ export function UtilizationTimelineView({
 
   return (
     <div className="card overflow-hidden">
-      <div className="flex flex-wrap items-center justify-between gap-4 border-b border-outline-variant/50 px-6 py-4">
+      <div className="flex flex-wrap items-baseline justify-between gap-3 border-b border-outline-variant/40 px-6 py-4">
         <div>
-          <h3 className="section-title flex items-center gap-2">
-            <CalendarRange className="h-5 w-5 text-accent" />
-            Utilization Timeline
-          </h3>
-          <p className="body-md text-surface-on-variant">
-            Weekly capacity by engineer — click any cell to edit allocation
-            <span className="ml-1 text-surface-on-variant/70">
-              · showing {visibleEngineers.length} of {engineers.length}
-            </span>
+          <h3 className="title-lg">Utilization Timeline</h3>
+          <p className="body">
+            Showing {visibleEngineers.length} of {engineers.length} — click any cell to edit
           </p>
         </div>
-        <div className="flex flex-wrap items-center gap-3 label-md text-surface-on-variant">
-          <span className="flex items-center gap-1.5">
-            <span className="h-2.5 w-2.5 rounded-full bg-emerald-500" /> &lt;60%
-          </span>
-          <span className="flex items-center gap-1.5">
-            <span className="h-2.5 w-2.5 rounded-full bg-accent" /> 60–84%
-          </span>
-          <span className="flex items-center gap-1.5">
-            <span className="h-2.5 w-2.5 rounded-full bg-amber-500" /> 85–99%
-          </span>
-          <span className="flex items-center gap-1.5">
-            <span className="h-2.5 w-2.5 rounded-full bg-red-500" /> 100%+
-          </span>
+        <div className="flex flex-wrap items-center gap-3 text-[11px] tabular text-surface-on-variant">
+          <LegendSwatch className="bg-emerald-500" label="<60%" />
+          <LegendSwatch className="bg-accent" label="60–84%" />
+          <LegendSwatch className="bg-amber-500" label="85–99%" />
+          <LegendSwatch className="bg-red-500" label="100%+" />
         </div>
       </div>
 
-      <div className="max-h-[32rem] overflow-auto">
+      <div className="max-h-[36rem] overflow-auto">
         <table className="w-full min-w-[900px] border-collapse">
           <thead className="sticky top-0 z-20">
-            <tr className="border-b border-outline-variant/50 bg-surface-container-low/95 backdrop-blur-sm">
-              <th className="sticky left-0 z-10 min-w-[180px] bg-surface-container-low/95 px-4 py-3 text-left label-md text-surface-on-variant backdrop-blur-sm">
+            <tr className="border-b border-outline-variant/40 bg-surface-container-low">
+              <th className="sticky left-0 z-10 min-w-[180px] bg-surface-container-low px-4 py-2.5 text-left label">
                 Engineer
               </th>
               {weeks.map((week) => (
                 <th
                   key={week.weekStart}
                   className={cn(
-                    "min-w-[88px] px-2 py-3 text-center label-md",
-                    week.isCurrent ? "bg-accent-muted text-accent-foreground" : "text-surface-on-variant"
+                    "min-w-[80px] px-2 py-2.5 text-center label",
+                    week.isCurrent && "bg-accent-muted text-accent-foreground"
                   )}
                 >
-                  <div>{week.label}</div>
+                  {week.label}
                   {week.isCurrent && (
-                    <div className="mt-0.5 text-[10px] font-semibold uppercase tracking-wide">
-                      This week
-                    </div>
+                    <span className="ml-1 text-[9px] font-semibold uppercase tracking-wider text-accent-foreground/70">
+                      now
+                    </span>
                   )}
                 </th>
               ))}
-              <th className="min-w-[72px] px-3 py-3 text-center label-md text-surface-on-variant">
-                Avg
-              </th>
+              <th className="min-w-[64px] px-3 py-2.5 text-center label">Avg</th>
             </tr>
           </thead>
           <tbody>
             {visibleEngineers.map((engineer) => (
               <tr
                 key={engineer.id}
-                className="border-b border-outline-variant/30 hover:bg-surface-on/[0.02]"
+                className="border-b border-outline-variant/20 hover:bg-white/[0.015]"
               >
-                <td className="sticky left-0 z-10 bg-surface-bright/95 px-4 py-3 backdrop-blur-sm">
-                  <p className="title-sm text-surface-on">{engineer.name}</p>
-                  <p className="label-md text-surface-on-variant">{engineer.role}</p>
+                <td className="sticky left-0 z-10 bg-surface-bright px-4 py-2">
+                  <p className="title-sm leading-tight">{engineer.name}</p>
+                  <p className="text-[11px] text-surface-on-variant">{engineer.role}</p>
                 </td>
                 {engineer.utilizationTimeline.map((cell) => {
                   const isEditing =
@@ -129,10 +114,13 @@ export function UtilizationTimelineView({
                   return (
                     <td
                       key={cell.weekStart}
-                      className={cn("px-1 py-2 text-center", weekMeta?.isCurrent && "bg-accent-muted/30")}
+                      className={cn(
+                        "border-l border-outline-variant/20 px-1.5 py-1.5 text-center",
+                        weekMeta?.isCurrent && "bg-accent-muted/20"
+                      )}
                     >
                       {isEditing ? (
-                        <div className="flex items-center justify-center gap-1">
+                        <div className="flex items-center justify-center gap-0.5">
                           <input
                             type="number"
                             min={0}
@@ -143,49 +131,45 @@ export function UtilizationTimelineView({
                               if (e.key === "Enter") void saveEdit();
                               if (e.key === "Escape") cancelEdit();
                             }}
-                            className="text-field-outlined h-9 w-14 px-1 text-center text-sm"
+                            className="h-8 w-12 rounded border border-accent/50 bg-surface-container px-1 text-center text-[13px] font-semibold tabular text-surface-on outline-none focus:ring-1 focus:ring-accent/60"
                             autoFocus
                             disabled={saving}
                           />
                           <button
                             type="button"
                             onClick={() => void saveEdit()}
-                            className="icon-btn h-8 w-8 text-accent-foreground"
+                            className="flex h-6 w-6 items-center justify-center rounded text-accent-foreground hover:bg-white/[0.06]"
                             aria-label="Save"
                             disabled={saving}
                           >
-                            <Check className="h-4 w-4" />
+                            <Check className="h-3.5 w-3.5" strokeWidth={2.5} />
                           </button>
                           <button
                             type="button"
                             onClick={cancelEdit}
-                            className="icon-btn h-8 w-8"
+                            className="flex h-6 w-6 items-center justify-center rounded text-surface-on-variant hover:bg-white/[0.06]"
                             aria-label="Cancel"
                           >
-                            <X className="h-4 w-4" />
+                            <X className="h-3.5 w-3.5" strokeWidth={2.5} />
                           </button>
                         </div>
                       ) : (
                         <button
                           type="button"
                           onClick={() => startEdit(engineer.id, cell.weekStart, cell.utilization)}
-                          className={cn(
-                            "util-cell group relative",
-                            utilizationVariant(cell.utilization).cell
-                          )}
+                          className={cn("util-cell", utilizationVariant(cell.utilization).cell)}
                           title={cell.note ?? `Click to edit — ${cell.utilization}%`}
                         >
-                          <span className="title-sm">{cell.utilization}%</span>
-                          <Pencil className="mt-0.5 h-3 w-3 opacity-0 transition-opacity group-hover:opacity-60" />
+                          {cell.utilization}%
                         </button>
                       )}
                     </td>
                   );
                 })}
-                <td className="px-3 py-2 text-center">
+                <td className="border-l border-outline-variant/20 px-3 py-2 text-center">
                   <span
                     className={cn(
-                      "title-sm",
+                      "text-[13px] font-semibold tabular",
                       utilizationVariant(rowAverage(engineer.utilizationTimeline)).text
                     )}
                   >
@@ -196,9 +180,9 @@ export function UtilizationTimelineView({
             ))}
           </tbody>
           <tfoot>
-            <tr className="bg-surface-container-low">
-              <td className="sticky left-0 z-10 bg-surface-container-low/95 px-4 py-3 label-md font-medium text-surface-on-variant backdrop-blur-sm">
-                Team average
+            <tr className="border-t border-outline-variant/40 bg-surface-container-low">
+              <td className="sticky left-0 z-10 bg-surface-container-low px-4 py-2.5 label">
+                Team avg
               </td>
               {weeks.map((week, weekIndex) => {
                 const values = visibleEngineers.map(
@@ -208,19 +192,22 @@ export function UtilizationTimelineView({
                 return (
                   <td
                     key={week.weekStart}
-                    className={cn("px-2 py-3 text-center", week.isCurrent && "bg-accent-muted/40")}
+                    className={cn(
+                      "border-l border-outline-variant/20 px-2 py-2.5 text-center",
+                      week.isCurrent && "bg-accent-muted/20"
+                    )}
                   >
-                    <div className="mx-auto flex h-2 max-w-[72px] overflow-hidden rounded-full bg-surface-container-highest">
+                    <div className="mx-auto flex h-1.5 max-w-[60px] overflow-hidden rounded-full bg-surface-container-highest">
                       <div
                         className={cn("h-full rounded-full", utilizationVariant(avg).bar)}
                         style={{ width: `${Math.min(avg, 100)}%` }}
                       />
                     </div>
-                    <p className="mt-1 label-md text-surface-on-variant">{avg}%</p>
+                    <p className="mt-1 text-[11px] tabular text-surface-on-variant">{avg}%</p>
                   </td>
                 );
               })}
-              <td />
+              <td className="border-l border-outline-variant/20" />
             </tr>
           </tfoot>
         </table>
@@ -228,3 +215,12 @@ export function UtilizationTimelineView({
     </div>
   );
 }
+
+function LegendSwatch({ className, label }: { className: string; label: string }) {
+  return (
+    <span className="flex items-center gap-1.5">
+      <span className={cn("h-2 w-2 rounded-full", className)} />
+      {label}
+    </span>
+  );
+}