diff --git a/app/frontend/public/containr.svg b/app/frontend/public/containr.svg
index e872de2..256a12a 100644
--- a/app/frontend/public/containr.svg
+++ b/app/frontend/public/containr.svg
@@ -1,12 +1,12 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
   <defs>
     <linearGradient id="bg" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#f4497f"/>
-      <stop offset="1" stop-color="#cf1d5b"/>
+      <stop offset="0" stop-color="#cdf06f"/>
+      <stop offset="1" stop-color="#7fb524"/>
     </linearGradient>
   </defs>
   <rect width="64" height="64" rx="15" fill="url(#bg)"/>
-  <g fill="none" stroke="#ffffff" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round">
+  <g fill="none" stroke="#131507" stroke-width="4.2" stroke-linecap="round" stroke-linejoin="round">
     <rect x="15" y="18" width="34" height="26" rx="4"/>
     <path d="M23 18v26M31 18v26M39 18v26"/>
     <path d="M20 51h24"/>
diff --git a/app/frontend/src/app/App.smoke.test.tsx b/app/frontend/src/app/App.smoke.test.tsx
index 7c0a9db..2af983d 100644
--- a/app/frontend/src/app/App.smoke.test.tsx
+++ b/app/frontend/src/app/App.smoke.test.tsx
@@ -30,9 +30,9 @@ describe('App smoke routes', () => {
   it('renders projects page in demo mode', async () => {
     renderApp('/projects?demo=1');
 
-    expect(await screen.findByRole('heading', { name: /^projects$/i })).toBeInTheDocument();
-    expect(screen.getByText(/demo mode active/i)).toBeInTheDocument();
-    expect(screen.getByText(/deploy, manage, and monitor containerized services/i)).toBeInTheDocument();
+    expect(await screen.findByRole('heading', { name: /^projects\s*_?$/i })).toBeInTheDocument();
+    expect(screen.getByText(/recent deployments/i)).toBeInTheDocument();
+    expect(screen.getAllByText(/core-services/i).length).toBeGreaterThan(0);
   });
 
   it('renders builds page in demo mode', async () => {
diff --git a/app/frontend/src/app/layout/PlatformShell.tsx b/app/frontend/src/app/layout/PlatformShell.tsx
index 40c4f60..e03ecd6 100644
--- a/app/frontend/src/app/layout/PlatformShell.tsx
+++ b/app/frontend/src/app/layout/PlatformShell.tsx
@@ -130,26 +130,18 @@ export function PlatformShell() {
 
       <div className="relative flex min-h-screen">
         <aside
-          className="hidden h-screen shrink-0 flex-col border-r md:flex"
+          className="hidden h-screen shrink-0 flex-col items-center border-r py-4 md:flex"
           style={{
-            width: '232px',
+            width: '62px',
             background: 'var(--bg-base)',
             borderRightColor: 'var(--border-subtle)',
           }}
         >
-          <NavLink
-            to={href('/projects')}
-            className="flex h-[58px] shrink-0 items-center gap-3 border-b px-4"
-            style={{ borderBottomColor: 'var(--border-subtle)' }}
-          >
-            <img src="/containr.svg" alt="Containr" className="h-9 w-9 rounded-[var(--radius-md)]" />
-            <div className="min-w-0">
-              <p className="text-sm font-semibold text-[var(--text-primary)]">Containr</p>
-              <p className="text-[11px] text-[var(--text-tertiary)]">Deploy platform</p>
-            </div>
+          <NavLink to={href('/projects')} className="mb-3" title="Containr">
+            <img src="/containr.svg" alt="Containr" className="h-[38px] w-[38px] rounded-xl" />
           </NavLink>
 
-          <nav className="flex min-h-0 flex-1 flex-col gap-1 px-3 py-4">
+          <nav className="flex flex-col items-center gap-1.5">
             {navItems.map((item) => {
               const Icon = item.icon;
               const isActive = isActiveRoute(item.href);
@@ -157,75 +149,72 @@ export function PlatformShell() {
                 <NavLink
                   key={item.href}
                   to={href(item.href)}
-                  className={`flex h-10 items-center gap-3 rounded-[var(--radius-md)] px-3 text-sm font-medium transition-colors ${
+                  title={item.label}
+                  className={`relative flex h-10 w-10 items-center justify-center rounded-[11px] transition-colors ${
                     isActive
                       ? 'bg-[var(--accent-primary-soft)] text-[var(--accent-primary)]'
-                      : 'text-[var(--text-secondary)] hover:bg-[var(--surface-muted)] hover:text-[var(--text-primary)]'
+                      : 'text-[var(--text-tertiary)] hover:bg-[var(--surface-muted)] hover:text-[var(--text-secondary)]'
                   }`}
                 >
+                  {isActive ? (
+                    <span
+                      className="absolute -left-[11px] h-4 w-[2.5px] rounded-full"
+                      style={{ background: 'var(--accent-primary)' }}
+                    />
+                  ) : null}
                   <Icon size={17} />
-                  {item.label}
                 </NavLink>
               );
             })}
           </nav>
 
-          <div className="shrink-0 border-t p-3" style={{ borderTopColor: 'var(--border-subtle)' }}>
-            <NavLink
-              to={href('/settings')}
-              className="mb-2 flex items-center gap-3 rounded-[var(--radius-md)] p-2 hover:bg-[var(--surface-muted)]"
+          <div className="flex-1" />
+
+          <div className="flex flex-col items-center gap-2">
+            <button
+              type="button"
+              onClick={() => void signOut()}
+              title={`Sign out (${userName})`}
+              className="flex h-10 w-10 items-center justify-center rounded-[11px] text-[var(--text-tertiary)] transition-colors hover:bg-[var(--error-soft)] hover:text-[var(--error)]"
             >
-              <div className="flex h-9 w-9 items-center justify-center rounded-full bg-[var(--surface-card-hover)] text-xs font-semibold text-[var(--text-primary)]">
-                {initials}
-              </div>
-              <div className="min-w-0 flex-1">
-                <p className="truncate text-sm font-medium text-[var(--text-primary)]">{userName}</p>
-                <p className="truncate text-xs text-[var(--text-tertiary)]">{userEmail}</p>
-              </div>
-            </NavLink>
-            <div className="grid grid-cols-2 gap-2">
-              <NavLink
-                to={href('/settings')}
-                className="inline-flex h-9 items-center justify-center gap-2 rounded-[var(--radius-md)] border text-xs font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
-                style={{ borderColor: 'var(--border-subtle)' }}
-              >
-                <Settings size={14} />
-                Settings
-              </NavLink>
-              <button
-                type="button"
-                onClick={() => void signOut()}
-                className="inline-flex h-9 items-center justify-center gap-2 rounded-[var(--radius-md)] border text-xs font-medium text-[var(--error)] hover:bg-[var(--error-soft)]"
-                style={{ borderColor: 'var(--error-soft)' }}
-              >
-                <LogOut size={14} />
-                Sign out
-              </button>
+              <LogOut size={16} />
+            </button>
+            <div
+              title={userEmail}
+              className="flex h-[30px] w-[30px] items-center justify-center rounded-full text-[11px] font-bold"
+              style={{ background: 'linear-gradient(135deg, var(--accent-primary), var(--accent-secondary))', color: 'var(--accent-on)' }}
+            >
+              {initials}
             </div>
           </div>
         </aside>
 
         <div className="relative z-10 flex min-h-screen min-w-0 flex-1 flex-col overflow-hidden">
           <header
-            className="hidden h-[58px] shrink-0 items-center border-b px-5 md:flex"
+            className="hidden h-[46px] shrink-0 items-center border-b px-5 md:flex"
             style={{
               background: 'var(--bg-base)',
               borderBottomColor: 'var(--border-subtle)',
+              fontFamily: "'JetBrains Mono', monospace",
+              fontSize: '11px',
             }}
           >
-            <NavLink to={href('/projects')} className="mr-4 flex items-center gap-2 text-[var(--text-primary)]">
-              <div className="flex h-8 w-8 items-center justify-center rounded-[var(--radius-md)] border border-[var(--border-subtle)]">
-                <Container size={15} />
-              </div>
-              <span className="text-sm font-semibold">Containr</span>
+            <NavLink to={href('/projects')} className="mr-5 text-sm font-extrabold tracking-tight text-[var(--text-primary)]" style={{ fontFamily: 'Inter, sans-serif' }}>
+              contain<span style={{ color: 'var(--accent-primary)' }}>r</span>
             </NavLink>
 
-            <div className="search-box max-w-[420px]">
-              <Search size={14} />
-              <input type="text" placeholder="Search projects, builds, logs..." />
+            <div className="flex items-center gap-5">
+              <span className="v-tick"><i className="sig" /><b>{isDemoMode ? 'demo' : 'nominal'}</b></span>
+              <span className="v-tick"><i className="sig" style={{ background: 'var(--text-tertiary)' }} />node <b>local</b></span>
             </div>
 
-            <div className="ml-auto flex items-center gap-2">
+            <div className="search-box ml-6 max-w-[300px]" style={{ height: 30 }}>
+              <Search size={13} />
+              <input type="text" placeholder="search…" className="v-mono" style={{ fontSize: 11.5 }} />
+            </div>
+
+            <div className="ml-auto flex items-center gap-4">
+              <span className="v-env">env:production</span>
               <button
                 type="button"
                 onClick={() => setTheme((current) => (current === 'dark' ? 'light' : 'dark'))}
@@ -240,8 +229,8 @@ export function PlatformShell() {
                 type="button"
                 onClick={() => pullMutation.mutate()}
                 disabled={isDemoMode || pullMutation.isPending || !upgradeQuery.data?.imageRef}
-                className="inline-flex h-8 items-center gap-2 rounded-[var(--radius-md)] px-3 text-xs font-semibold text-white disabled:cursor-not-allowed disabled:opacity-50"
-                style={{ background: '#e8316a' }}
+                className="inline-flex h-8 items-center gap-2 rounded-[var(--radius-md)] px-3 text-xs font-semibold text-[var(--accent-on)] disabled:cursor-not-allowed disabled:opacity-50"
+                style={{ background: 'var(--accent-primary)' }}
                 title={upgradeQuery.data?.message || 'Pull latest configured image'}
               >
                 {pullMutation.isPending ? <RefreshCw size={14} className="animate-spin" /> : <UploadCloud size={14} />}
@@ -305,7 +294,7 @@ export function PlatformShell() {
           <header className="md:hidden sticky top-0 z-50 border-b border-[var(--border-subtle)] bg-[var(--bg-base)]/85 backdrop-blur-2xl">
             <div className="flex items-center justify-between p-4">
               <NavLink to={href('/projects')} className="flex items-center gap-3">
-                <div className="flex h-9 w-9 items-center justify-center rounded-[var(--radius-md)] bg-[var(--accent-primary)] text-white">
+                <div className="flex h-9 w-9 items-center justify-center rounded-[var(--radius-md)] bg-[var(--accent-primary)] text-[var(--accent-on)]">
                   <Container size={16} />
                 </div>
                 <span className="font-headline font-semibold text-[var(--text-primary)]">Containr</span>
diff --git a/app/frontend/src/features/auth/pages.tsx b/app/frontend/src/features/auth/pages.tsx
index e83467e..3f71c17 100644
--- a/app/frontend/src/features/auth/pages.tsx
+++ b/app/frontend/src/features/auth/pages.tsx
@@ -69,7 +69,7 @@ function AuthLayout({ children }: { children: React.ReactNode }) {
       <div className="ambient-glow" />
       <div
         className="absolute left-1/2 top-0 h-[420px] w-[720px] -translate-x-1/2 -translate-y-1/2 rounded-full"
-        style={{ background: 'radial-gradient(ellipse at center, rgba(232,49,106,0.16) 0%, transparent 65%)' }}
+        style={{ background: 'radial-gradient(ellipse at center, rgba(180,227,74,0.10) 0%, transparent 65%)' }}
       />
       <div className="relative flex min-h-screen flex-col items-center justify-center px-5 py-10">
         <div className="mb-8 flex flex-col items-center">
@@ -203,8 +203,8 @@ export function SignInPage() {
           <button
             type="submit"
             disabled={isSubmitting || sessionQuery.isPending}
-            className="mt-1 inline-flex h-10 w-full items-center justify-center gap-2 rounded-[var(--radius-md)] text-sm font-semibold text-white shadow-lg transition-all disabled:cursor-not-allowed disabled:opacity-60"
-            style={{ background: '#e8316a' }}
+            className="mt-1 inline-flex h-10 w-full items-center justify-center gap-2 rounded-[var(--radius-md)] text-sm font-semibold text-[var(--accent-on)] shadow-lg transition-all disabled:cursor-not-allowed disabled:opacity-60"
+            style={{ background: 'var(--accent-primary)' }}
           >
             {isSubmitting ? <Loader2 size={15} className="animate-spin" /> : <Mail size={15} />}
             Continue
@@ -336,8 +336,8 @@ export function SignUpPage() {
           <button
             type="submit"
             disabled={isSubmitting || sessionQuery.isPending}
-            className="mt-1 inline-flex h-10 w-full items-center justify-center gap-2 rounded-[var(--radius-md)] text-sm font-semibold text-white shadow-lg transition-all disabled:cursor-not-allowed disabled:opacity-60"
-            style={{ background: '#e8316a' }}
+            className="mt-1 inline-flex h-10 w-full items-center justify-center gap-2 rounded-[var(--radius-md)] text-sm font-semibold text-[var(--accent-on)] shadow-lg transition-all disabled:cursor-not-allowed disabled:opacity-60"
+            style={{ background: 'var(--accent-primary)' }}
           >
             {isSubmitting ? <Loader2 size={15} className="animate-spin" /> : <User2 size={15} />}
             Create Account
diff --git a/app/frontend/src/features/builds/pages/BuildsPage.tsx b/app/frontend/src/features/builds/pages/BuildsPage.tsx
index 27570f5..44c1a56 100644
--- a/app/frontend/src/features/builds/pages/BuildsPage.tsx
+++ b/app/frontend/src/features/builds/pages/BuildsPage.tsx
@@ -164,10 +164,10 @@ export function BuildsPage() {
     <div className="min-h-screen">
       {/* Header */}
       <div className="border-b border-[var(--border-subtle)] bg-[var(--bg-base)]/50 backdrop-blur-sm">
-        <div className="mx-auto w-full max-w-[1400px] px-6 py-4">
+        <div className="w-full px-8 py-4">
           <div className="flex items-center justify-between gap-4">
             <div>
-              <h1 className="text-xl font-semibold text-[var(--text-primary)]">Build Pipeline</h1>
+              <h1 className="v-title">Build Pipeline<span className="v-cursor">_</span></h1>
               <p className="text-sm text-[var(--text-secondary)]">Monitor build progress and manage jobs</p>
             </div>
 
@@ -192,7 +192,7 @@ export function BuildsPage() {
 
       {/* Demo Mode Banner */}
       {isDemoMode && (
-        <div className="mx-auto w-full max-w-[1400px] px-6 py-4">
+        <div className="w-full px-8 py-4">
           <div className="px-4 py-3 rounded-[var(--radius-md)] border border-[var(--warning-soft)] bg-[var(--warning-soft)]/50">
             <div className="flex items-center gap-2 text-sm text-[var(--warning)]">
               <Sparkles size={16} />
@@ -203,7 +203,7 @@ export function BuildsPage() {
       )}
 
       {/* Stats Overview */}
-      <div className="mx-auto w-full max-w-[1400px] px-6 py-6">
+      <div className="w-full px-8 py-6">
         <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
           <div className="panel p-4">
             <div className="flex items-center justify-between mb-3">
@@ -245,7 +245,7 @@ export function BuildsPage() {
       </div>
 
       {/* Filters */}
-      <div className="mx-auto w-full max-w-[1400px] px-6">
+      <div className="w-full px-8">
         <div className="panel p-4">
           <div className="flex items-center gap-2 mb-4">
             <Filter size={16} className="text-[var(--text-tertiary)]" />
@@ -307,7 +307,7 @@ export function BuildsPage() {
       </div>
 
       {/* Build Table */}
-      <div className="mx-auto w-full max-w-[1400px] px-6 py-6">
+      <div className="w-full px-8 py-6">
         <div className="panel overflow-hidden">
           {!isDemoMode && buildsQuery.isLoading ? (
             <div className="p-12 text-center">
@@ -397,7 +397,7 @@ export function BuildsPage() {
                         <div className="h-2 rounded-full bg-[var(--surface-muted)] overflow-hidden">
                           <div
                             className="h-full rounded-full transition-all duration-300"
-                            style={{ width: `${Math.max(0, Math.min(100, build.progress))}%`, background: '#e8316a' }}
+                            style={{ width: `${Math.max(0, Math.min(100, build.progress))}%`, background: 'var(--accent-primary)' }}
                           />
                         </div>
                       </div>
diff --git a/app/frontend/src/features/projects/pages/ProjectsPage.tsx b/app/frontend/src/features/projects/pages/ProjectsPage.tsx
index 5246730..387f796 100644
--- a/app/frontend/src/features/projects/pages/ProjectsPage.tsx
+++ b/app/frontend/src/features/projects/pages/ProjectsPage.tsx
@@ -1,39 +1,46 @@
 import { useMemo, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { createProject, listProjects, type ProjectEntity, type ProjectStats } from '@/lib/api-client';
-import { 
-  Plus, 
-  Search, 
-  ArrowRight, 
-  Layers, 
-  Clock,
-  Sparkles,
+import {
+  createProject,
+  getHostMonitoring,
+  listBuilds,
+  listProjects,
+  type ProjectEntity,
+  type ProjectStats,
+} from '@/lib/api-client';
+import {
+  Search,
   FolderOpen,
   X,
-  Check,
-  AlertTriangle
 } from 'lucide-react';
 
 const demoProjects: ProjectEntity[] = [
   {
     id: 'project-demo',
-    name: 'Demo Project',
+    name: 'core-services',
     description: 'Sample project with mock services for UI preview.',
     createdAt: new Date(Date.now() - 14 * 86_400_000).toISOString(),
     updatedAt: new Date().toISOString(),
-    stats: { service_count: 3, deployment_count: 12, running_services: 2 },
+    stats: { service_count: 5, deployment_count: 12, running_services: 5 },
   },
   {
     id: 'project-staging',
-    name: 'Staging Environment',
+    name: 'ml-pipeline',
     description: 'Pre-production environment for testing new releases.',
     createdAt: new Date(Date.now() - 7 * 86_400_000).toISOString(),
     updatedAt: new Date(Date.now() - 2 * 86_400_000).toISOString(),
-    stats: { service_count: 1, deployment_count: 5, running_services: 1 },
+    stats: { service_count: 2, deployment_count: 5, running_services: 1 },
   },
 ];
 
+const demoDeploys = [
+  { id: 'd1', name: 'api-gateway', project: 'core-services', status: 'DEPLOYED', when: '4m' },
+  { id: 'd2', name: 'web-frontend', project: 'core-services', status: 'BUILDING', when: '6m' },
+  { id: 'd3', name: 'worker', project: 'ml-pipeline', status: 'FAILED', when: '1h' },
+  { id: 'd4', name: 'site', project: 'growth-site', status: 'DEPLOYED', when: '2h' },
+];
+
 function getHealthStatus(stats: ProjectStats): 'healthy' | 'degraded' | 'critical' {
   if (stats.service_count === 0) return 'healthy';
   if (stats.running_services === stats.service_count) return 'healthy';
@@ -41,145 +48,85 @@ function getHealthStatus(stats: ProjectStats): 'healthy' | 'degraded' | 'critica
   return 'critical';
 }
 
-function healthConfig(health: ReturnType<typeof getHealthStatus>) {
+function healthBadge(health: ReturnType<typeof getHealthStatus>) {
   switch (health) {
     case 'healthy':
-      return { 
-        label: 'Operational', 
-        color: 'var(--success)', 
-        bg: 'var(--success-soft)',
-        Icon: Check
-      };
+      return { label: 'RUNNING', cls: 'v-st-ok' };
     case 'degraded':
-      return { 
-        label: 'Degraded', 
-        color: 'var(--warning)', 
-        bg: 'var(--warning-soft)',
-        Icon: AlertTriangle
-      };
+      return { label: 'DEGRADED', cls: 'v-st-warn' };
     case 'critical':
-      return { 
-        label: 'Critical', 
-        color: 'var(--error)', 
-        bg: 'var(--error-soft)',
-        Icon: X
-      };
+      return { label: 'DOWN', cls: 'v-st-fail' };
   }
 }
 
 function formatRelative(date?: string): string {
   if (!date) return '—';
-  const now = Date.now();
-  const then = new Date(date).getTime();
-  const diff = now - then;
-
+  const diff = Date.now() - new Date(date).getTime();
   if (diff < 60_000) return 'just now';
   if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;
   if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`;
   return `${Math.floor(diff / 86_400_000)}d ago`;
 }
 
+function MiniCanvas({ project }: { project: ProjectEntity }) {
+  const count = project.stats.service_count;
+  const running = project.stats.running_services;
+  const shown = Math.min(count, 4);
+  const extra = count - shown;
+  const positions = [
+    { left: 14, top: 22 },
+    { left: 96, top: 22 },
+    { left: 14, top: 62 },
+    { left: 96, top: 62 },
+  ];
+  return (
+    <div className="v-mini">
+      {count >= 2 ? <div className="v-edge" style={{ left: 46, top: 38, width: 50 }} /> : null}
+      {count >= 4 ? <div className="v-edge" style={{ left: 46, top: 78, width: 50 }} /> : null}
+      {Array.from({ length: shown }).map((_, i) => (
+        <div key={i} className="v-node" style={positions[i]}>
+          <b className={`v-nd ${i < running ? '' : 'r'}`} />
+          svc{i + 1}
+        </div>
+      ))}
+      {extra > 0 ? (
+        <div className="v-more" style={{ left: 178, top: 22 }}>+{extra}</div>
+      ) : null}
+    </div>
+  );
+}
+
 function ProjectCard({ project, href }: { project: ProjectEntity; href: string }) {
   const navigate = useNavigate();
   const health = getHealthStatus(project.stats);
-  const config = healthConfig(health);
-  const Icon = config.Icon;
-  const healthPercent = project.stats.service_count === 0 
-    ? 100 
-    : Math.round((project.stats.running_services / project.stats.service_count) * 100);
+  const badge = healthBadge(health);
+  const envOk = health === 'healthy';
 
   return (
-    <article 
-      className="group panel p-0 overflow-hidden cursor-pointer transition-all duration-300 hover:shadow-[var(--shadow-lg)] hover:border-[var(--border-default)]"
+    <article
+      className="group panel p-4 cursor-pointer transition-all duration-200 hover:-translate-y-0.5 hover:border-[var(--border-strong)]"
       onClick={() => navigate(href)}
     >
-      {/* Header with solid accent */}
-      <div className="relative px-5 pt-5 pb-4">
-        <div className="absolute inset-0 h-28 bg-[#e8316a]/10" />
-        <div className="relative flex items-start justify-between gap-3">
-          <div className="flex-1 min-w-0">
-            <h3 className="font-headline text-lg font-semibold tracking-tight text-[var(--text-primary)] truncate group-hover:text-[var(--accent-primary)] transition-colors">
-              {project.name}
-            </h3>
-            <p className="mt-1.5 text-sm text-[var(--text-secondary)] line-clamp-2 leading-relaxed">
-              {project.description || 'No description provided'}
-            </p>
-          </div>
-          <div 
-            className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-full text-xs font-medium ring-1 ring-inset"
-            style={{ background: config.bg, color: config.color, borderColor: `${config.color}30` }}
-          >
-            <Icon size={12} />
-            {config.label}
-          </div>
-        </div>
+      <div className="mb-3 flex items-center gap-2">
+        <h3 className="truncate text-[14.5px] font-bold tracking-tight text-[var(--text-primary)]">
+          {project.name}
+        </h3>
+        <span className={`v-st ml-auto ${badge.cls}`}>{badge.label}</span>
       </div>
-
-      {/* Service Topology Preview */}
-      <div className="px-5 py-3 border-y border-[var(--border-subtle)] bg-[var(--surface-muted)]/30">
-        <div className="flex items-center gap-2">
-          <div className="flex items-center gap-1">
-            {Array.from({ length: Math.min(project.stats.service_count, 5) }).map((_, i) => (
-              <div 
-                key={i}
-                className="w-8 h-8 rounded-lg bg-[var(--surface-card)] border border-[var(--border-subtle)] flex items-center justify-center transition-colors group-hover:border-[var(--border-default)]"
-              >
-                <Layers size={14} className="text-[var(--text-tertiary)]" />
-              </div>
-            ))}
-            {project.stats.service_count > 5 && (
-              <div className="w-8 h-8 rounded-lg bg-[var(--surface-muted)] border border-[var(--border-subtle)] flex items-center justify-center text-xs text-[var(--text-tertiary)] font-medium">
-                +{project.stats.service_count - 5}
-              </div>
-            )}
-          </div>
-          <span className="text-xs text-[var(--text-tertiary)] font-medium">
-            {project.stats.service_count} service{project.stats.service_count !== 1 ? 's' : ''}
-          </span>
-        </div>
-      </div>
-
-      {/* Stats Grid */}
-      <div className="p-5">
-        <div className="grid grid-cols-3 gap-4">
-          <div>
-            <p className="text-[10px] uppercase tracking-wider text-[var(--text-muted)] font-medium">Services</p>
-            <p className="mt-1.5 text-xl font-semibold text-[var(--text-primary)]">{project.stats.service_count}</p>
-          </div>
-          <div>
-            <p className="text-[10px] uppercase tracking-wider text-[var(--text-muted)] font-medium">Running</p>
-            <p className="mt-1.5 text-xl font-semibold text-[var(--success)]">{project.stats.running_services}</p>
-          </div>
-          <div>
-            <p className="text-[10px] uppercase tracking-wider text-[var(--text-muted)] font-medium">Health</p>
-            <p className="mt-1.5 text-xl font-semibold text-[var(--text-primary)]">{healthPercent}%</p>
-          </div>
-        </div>
-
-        {/* Health Progress Bar */}
-        <div className="mt-4">
-          <div className="h-1.5 rounded-full bg-[var(--surface-muted)] overflow-hidden">
-            <div 
-              className="h-full rounded-full transition-all duration-500"
-              style={{ 
-                width: `${healthPercent}%`,
-                background: config.color
-              }}
-            />
-          </div>
-        </div>
-
-        {/* Footer */}
-        <div className="mt-4 flex items-center justify-between">
-          <div className="flex items-center gap-1.5 text-xs text-[var(--text-tertiary)]">
-            <Clock size={12} />
-            <span>Updated {formatRelative(project.updatedAt)}</span>
-          </div>
-          <div className="flex items-center gap-1 text-xs font-medium text-[var(--accent-primary)] opacity-0 group-hover:opacity-100 transition-all duration-200 translate-x-2 group-hover:translate-x-0">
-            <span>Open</span>
-            <ArrowRight size={12} />
-          </div>
-        </div>
+      <MiniCanvas project={project} />
+      <div className="v-mono mt-3 flex items-center gap-2 text-[10.5px] text-[var(--text-tertiary)]">
+        <i
+          className="inline-block h-1.5 w-1.5 rounded-full"
+          style={{ background: envOk ? 'var(--success)' : 'var(--warning)' }}
+        />
+        <span className="text-[var(--text-secondary)]">
+          {envOk ? 'production' : 'degraded'}
+        </span>
+        <span>·</span>
+        <span>
+          {project.stats.running_services}/{project.stats.service_count} online
+        </span>
+        <span className="ml-auto">{formatRelative(project.updatedAt)}</span>
       </div>
     </article>
   );
@@ -194,8 +141,8 @@ export function ProjectsPage() {
   const [search, setSearch] = useState('');
   const [isCreateOpen, setCreateOpen] = useState(false);
   const [form, setForm] = useState({ name: '', description: '' });
-  
-  const projectHref = (projectId: string) => 
+
+  const projectHref = (projectId: string) =>
     isDemoMode ? `/projects/${projectId}?demo=1` : `/projects/${projectId}`;
 
   const projectsQuery = useQuery({
@@ -203,6 +150,18 @@ export function ProjectsPage() {
     enabled: !isDemoMode,
     queryFn: listProjects,
   });
+  const hostQuery = useQuery({
+    queryKey: ['host-monitoring'],
+    enabled: !isDemoMode,
+    queryFn: getHostMonitoring,
+    refetchInterval: 30_000,
+  });
+  const buildsQuery = useQuery({
+    queryKey: ['recent-deploys'],
+    enabled: !isDemoMode,
+    queryFn: () => listBuilds({ page: 1, limit: 5 }),
+    refetchInterval: 30_000,
+  });
 
   const createProjectMutation = useMutation({
     mutationFn: () => createProject({ name: form.name.trim(), description: form.description.trim() || undefined }),
@@ -218,88 +177,125 @@ export function ProjectsPage() {
     const source = isDemoMode ? demoProjects : projectsQuery.data ?? [];
     if (!search.trim()) return source;
     const needle = search.toLowerCase();
-    return source.filter((project) => 
-      project.name.toLowerCase().includes(needle) || 
+    return source.filter((project) =>
+      project.name.toLowerCase().includes(needle) ||
       project.description?.toLowerCase().includes(needle)
     );
   }, [isDemoMode, projectsQuery.data, search]);
 
+  const projects = isDemoMode ? demoProjects : projectsQuery.data ?? [];
+  const totalServices = projects.reduce((sum, p) => sum + p.stats.service_count, 0);
+  const runningServices = projects.reduce((sum, p) => sum + p.stats.running_services, 0);
+  const host = hostQuery.data;
+  const cpuPct = isDemoMode ? 14 : host && host.cpu.cores > 0
+    ? Math.min(100, Math.round((host.load.load1m / host.cpu.cores) * 100))
+    : null;
+  const memPct = isDemoMode ? 72 : host ? Math.round(host.memory.usagePercent) : null;
+  const diskPct = isDemoMode ? 73 : host ? Math.round(host.storage.usagePercent) : null;
+  const fmtGB = (v: number) => `${(v / (1024 * 1024 * 1024)).toFixed(0)}G`;
+  const builds = isDemoMode ? [] : buildsQuery.data?.builds ?? [];
+  const deployCount = buildsQuery.data?.total ?? builds.length;
+  const feed = isDemoMode
+    ? demoDeploys
+    : builds.map((b) => ({
+        id: b.id,
+        name: b.imageName || b.serviceId || b.id,
+        project: '',
+        status: (b.status || 'queued').toUpperCase(),
+        when: formatRelative(b.startedAt ?? b.completedAt),
+      }));
+
+  const statusClass = (status: string) =>
+    status === 'DEPLOYED' || status === 'SUCCESS' || status === 'SUCCEEDED'
+      ? 'v-st-ok'
+      : status === 'BUILDING' || status === 'RUNNING' || status === 'QUEUED'
+        ? 'v-st-run'
+        : status === 'FAILED' || status === 'CANCELLED'
+          ? 'v-st-fail'
+          : 'v-st-off';
+
   return (
-    <div className="min-h-screen relative">
-      {/* Header */}
-      <div className="border-b border-[var(--border-subtle)]">
-        <div className="mx-auto w-full max-w-[1400px] px-6 py-5 flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <div
-              className="flex items-center justify-center rounded-[var(--radius-md)]"
-              style={{ width: '36px', height: '36px', background: '#e8316a' }}
-            >
-              <FolderOpen size={17} className="text-white" />
-            </div>
-            <div>
-              <h1 className="font-headline text-xl font-semibold tracking-tight text-[var(--text-primary)]">
-                Projects
-              </h1>
-              <p className="text-xs text-[var(--text-tertiary)]">
-                Deploy, manage, and monitor containerized services
-              </p>
-            </div>
+    <div className="min-h-screen">
+      <div className="w-full px-8 py-6">
+        {/* Page head */}
+        <div className="mb-6 flex items-center justify-between gap-5">
+          <div>
+            <h1 className="v-title">Projects<span className="v-cursor">_</span></h1>
+            <p className="v-mono mt-1.5 text-[11px] text-[var(--text-tertiary)]">
+              <b className="text-[var(--text-secondary)]">{String(projects.length).padStart(2, '0')}</b> projects ·{' '}
+              <b className="text-[var(--text-secondary)]">{String(totalServices).padStart(2, '0')}</b> services ·{' '}
+              <b className="text-[var(--text-secondary)]">{runningServices}</b> online
+            </p>
           </div>
-          <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-[var(--surface-muted)] border border-[var(--border-subtle)]">
-            <div className="w-1.5 h-1.5 rounded-full bg-[var(--success)] live-pulse" />
-            <span className="text-[10px] font-semibold uppercase tracking-widest text-[var(--text-tertiary)]">
-              Workspace
-            </span>
+          <div className="flex items-center gap-2.5">
+            <div className="search-box" style={{ width: 240 }}>
+              <Search size={13} />
+              <input
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                placeholder="search projects…"
+                className="v-mono"
+                style={{ fontSize: 11.5 }}
+              />
+            </div>
+            <button onClick={() => setCreateOpen(true)} className="v-btn">
+              + new project
+            </button>
           </div>
         </div>
-      </div>
 
-      {/* Main Content */}
-      <div className="mx-auto w-full max-w-[1400px] px-6 py-6">
-        {/* Toolbar */}
-        <div className="flex flex-col sm:flex-row gap-4 mb-8">
-          <div className="relative flex-1">
-            <Search size={16} className="absolute left-4 top-1/2 -translate-y-1/2 text-[var(--text-tertiary)]" />
-            <input
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              placeholder="Search projects by name or description..."
-              className="w-full h-11 pl-11 pr-4 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-card)] text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)] transition-all"
-            />
-          </div>
-          <button
-            onClick={() => setCreateOpen(true)}
-            className="flex items-center justify-center gap-2 h-11 px-5 rounded-[var(--radius-md)] text-white font-medium text-sm shadow-lg hover:shadow-xl transition-all duration-300"
-            style={{ background: '#e8316a' }}
-          >
-            <Plus size={16} />
-            <span>New Project</span>
-          </button>
-        </div>
-
-        {/* Demo Mode Banner */}
-        {isDemoMode && (
-          <div className="mb-6 px-4 py-3 rounded-[var(--radius-md)] border border-[var(--warning-soft)] bg-[var(--warning-soft)]/50">
-            <div className="flex items-center gap-2 text-sm text-[var(--warning)]">
-              <Sparkles size={16} />
-              <span>Demo mode active — using sample data for preview</span>
+        {/* Host stat row */}
+        <div className="mb-7 grid grid-cols-2 gap-3 lg:grid-cols-4">
+          <div className="v-stat">
+            <div className="v-k"><span>HOST.CPU</span><span className="v-live" /></div>
+            <div className="v-v">{cpuPct ?? '—'}<span>%</span></div>
+            {isDemoMode ? (
+              <div className="v-spark">
+                {[28, 44, 36, 58, 42, 66, 50, 34, 56, 40, 30, 20].map((h, i) => (
+                  <i key={i} style={{ height: `${h}%` }} />
+                ))}
+              </div>
+            ) : null}
+            <div className="v-d">
+              {isDemoMode || host ? (
+                <><b style={{ color: 'var(--success)' }}>healthy</b> · {host?.cpu.cores ?? 16} cores</>
+              ) : 'no telemetry'}
             </div>
           </div>
-        )}
+          <div className="v-stat">
+            <div className="v-k"><span>HOST.MEM</span><span className="v-live" /></div>
+            <div className="v-v">{memPct ?? '—'}<span>%</span></div>
+            <div className="v-meter"><i className={memPct !== null && memPct > 85 ? 'r' : 'y'} style={{ width: `${memPct ?? 0}%` }} /></div>
+            <div className="v-d">{isDemoMode ? '9.8G / 13G' : host ? `${fmtGB(host.memory.used)} / ${fmtGB(host.memory.total)}` : 'no telemetry'}</div>
+          </div>
+          <div className="v-stat">
+            <div className="v-k"><span>HOST.DISK</span><span className="v-live" /></div>
+            <div className="v-v">{diskPct ?? '—'}<span>%</span></div>
+            <div className="v-meter"><i className="r" style={{ width: `${diskPct ?? 0}%` }} /></div>
+            <div className="v-d">{isDemoMode ? '338G of 465G · high' : host ? `${fmtGB(host.storage.used)} of ${fmtGB(host.storage.total)}` : 'no telemetry'}</div>
+          </div>
+          <div className="v-stat">
+            <div className="v-k"><span>DEPLOYS</span></div>
+            <div className="v-v">{isDemoMode ? 18 : deployCount}</div>
+            <div className="v-meter"><i style={{ width: '94%' }} /></div>
+            <div className="v-d"><b style={{ color: 'var(--success)' }}>{isDemoMode ? '17 ok' : `${builds.filter((b) => (b.status ?? '').toLowerCase() !== 'failed').length} recent`}</b></div>
+          </div>
+        </div>
+
+        {/* Projects grid */}
+        <p className="v-sect">PROJECTS <span className="v-sect-r">{filteredProjects.length} records</span></p>
 
-        {/* Loading State */}
         {!isDemoMode && projectsQuery.isLoading && (
-          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
+          <div className="grid grid-cols-1 gap-3.5 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
             {Array.from({ length: 6 }).map((_, i) => (
-              <div key={i} className="panel h-[320px] animate-pulse bg-[var(--surface-card)]" />
+              <div key={i} className="panel h-[210px] animate-pulse" />
             ))}
           </div>
         )}
 
-        {/* Error State */}
         {!isDemoMode && projectsQuery.isError && (
           <div className="panel p-8 text-center">
-            <div className="w-12 h-12 mx-auto mb-4 rounded-full bg-[var(--error-soft)] flex items-center justify-center">
+            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-[var(--error-soft)]">
               <X size={24} className="text-[var(--error)]" />
             </div>
             <p className="text-lg font-medium text-[var(--text-primary)]">Failed to load projects</p>
@@ -307,34 +303,49 @@ export function ProjectsPage() {
           </div>
         )}
 
-        {/* Empty State */}
-        {((isDemoMode && filteredProjects.length === 0) || (!isDemoMode && !projectsQuery.isLoading && !projectsQuery.isError && filteredProjects.length === 0)) && (
+        {filteredProjects.length === 0 && !projectsQuery.isLoading && !projectsQuery.isError ? (
           <div className="panel p-12 text-center">
-            <div className="w-16 h-16 mx-auto mb-6 rounded-full bg-[var(--accent-primary-soft)] flex items-center justify-center">
+            <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-[var(--accent-primary-soft)]">
               <FolderOpen size={28} className="text-[var(--accent-primary)]" />
             </div>
             <p className="text-xl font-semibold text-[var(--text-primary)]">No projects yet</p>
-            <p className="mt-2 text-[var(--text-secondary)] max-w-md mx-auto">
+            <p className="mx-auto mt-2 max-w-md text-[var(--text-secondary)]">
               Create your first project to start deploying services with visual topology management.
             </p>
-            <button
-              onClick={() => setCreateOpen(true)}
-              className="mt-6 inline-flex items-center gap-2 px-5 py-2.5 rounded-[var(--radius-md)] border border-[var(--accent-primary)] text-[var(--accent-primary)] font-medium text-sm hover:bg-[var(--accent-primary-soft)] transition-colors"
-            >
-              <Plus size={16} />
-              Create Project
+            <button onClick={() => setCreateOpen(true)} className="v-btn mt-6">
+              + create project
             </button>
           </div>
-        )}
+        ) : null}
 
-        {/* Project Grid */}
-        {((isDemoMode && filteredProjects.length > 0) || (!isDemoMode && !projectsQuery.isLoading && !projectsQuery.isError && filteredProjects.length > 0)) && (
-          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
+        {filteredProjects.length > 0 && (
+          <div className="grid grid-cols-1 gap-3.5 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
             {filteredProjects.map((project) => (
               <ProjectCard key={project.id} project={project} href={projectHref(project.id)} />
             ))}
           </div>
         )}
+
+        {/* Deploy feed */}
+        <p className="v-sect mt-7">RECENT DEPLOYMENTS <span className="v-sect-r">latest</span></p>
+        <div className="v-tbl">
+          <table>
+            <thead>
+              <tr><th>SERVICE</th><th>STATUS</th><th style={{ textAlign: 'right' }}>WHEN</th></tr>
+            </thead>
+            <tbody>
+              {feed.length === 0 ? (
+                <tr><td colSpan={3} className="text-center" style={{ color: 'var(--text-tertiary)' }}>no deployments yet</td></tr>
+              ) : feed.map((d) => (
+                <tr key={d.id}>
+                  <td className="v-lead">{d.name}{d.project ? <span className="v-mono ml-2 text-[10.5px] font-normal text-[var(--text-tertiary)]">{d.project}</span> : null}</td>
+                  <td><span className={`v-st ${statusClass(d.status)}`}>{d.status}</span></td>
+                  <td style={{ textAlign: 'right' }}>{d.when}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
       </div>
 
       {/* Create Modal */}
@@ -349,18 +360,18 @@ export function ProjectsPage() {
 
             <div className="mt-6 space-y-4">
               <div>
-                <label className="block text-xs font-medium uppercase tracking-wider text-[var(--text-tertiary)] mb-2">
+                <label className="mb-2 block text-xs font-medium uppercase tracking-wider text-[var(--text-tertiary)]">
                   Project Name
                 </label>
                 <input
                   value={form.name}
                   onChange={(e) => setForm((p) => ({ ...p, name: e.target.value }))}
                   placeholder="my-awesome-project"
-                  className="w-full h-11 px-4 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)] transition-all"
+                  className="h-11 w-full rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] px-4 text-[var(--text-primary)] transition-all placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)]"
                 />
               </div>
               <div>
-                <label className="block text-xs font-medium uppercase tracking-wider text-[var(--text-tertiary)] mb-2">
+                <label className="mb-2 block text-xs font-medium uppercase tracking-wider text-[var(--text-tertiary)]">
                   Description <span className="normal-case text-[var(--text-muted)]">(optional)</span>
                 </label>
                 <textarea
@@ -368,29 +379,25 @@ export function ProjectsPage() {
                   onChange={(e) => setForm((p) => ({ ...p, description: e.target.value }))}
                   placeholder="Describe your project..."
                   rows={3}
-                  className="w-full px-4 py-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)] transition-all resize-none"
+                  className="w-full resize-none rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] px-4 py-3 text-[var(--text-primary)] transition-all placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)]"
                 />
               </div>
             </div>
 
             {createProjectMutation.isError && (
-              <div className="mt-4 px-4 py-3 rounded-[var(--radius-md)] bg-[var(--error-soft)] text-sm text-[var(--error)]">
+              <div className="mt-4 rounded-[var(--radius-md)] bg-[var(--error-soft)] px-4 py-3 text-sm text-[var(--error)]">
                 {(createProjectMutation.error as Error).message}
               </div>
             )}
 
             <div className="mt-6 flex justify-end gap-3">
-              <button
-                onClick={() => setCreateOpen(false)}
-                className="px-4 py-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-[var(--text-secondary)] text-sm font-medium hover:text-[var(--text-primary)] hover:border-[var(--border-default)] transition-colors"
-              >
+              <button onClick={() => setCreateOpen(false)} className="v-btn-ghost">
                 Cancel
               </button>
               <button
                 onClick={() => createProjectMutation.mutate()}
                 disabled={!form.name.trim() || createProjectMutation.isPending}
-                className="px-5 py-2 rounded-[var(--radius-md)] text-white text-sm font-medium shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
-                style={{ background: '#e8316a' }}
+                className="v-btn"
               >
                 {createProjectMutation.isPending ? 'Creating...' : 'Create Project'}
               </button>
diff --git a/app/frontend/src/features/secondary/pages.tsx b/app/frontend/src/features/secondary/pages.tsx
index d5dcbed..0d38231 100644
--- a/app/frontend/src/features/secondary/pages.tsx
+++ b/app/frontend/src/features/secondary/pages.tsx
@@ -54,10 +54,10 @@ import {
 
 function SecondaryPageHeader({ title, description }: { title: string; description: string }) {
   return (
-    <div className="border-b border-[var(--border-subtle)] bg-[var(--bg-base)]/50 backdrop-blur-sm">
-      <div className="mx-auto w-full max-w-[1400px] px-6 py-4">
-        <h1 className="text-xl font-semibold text-[var(--text-primary)]">{title}</h1>
-        <p className="text-sm text-[var(--text-secondary)] mt-1">{description}</p>
+    <div className="border-b border-[var(--border-subtle)]">
+      <div className="w-full px-8 py-5">
+        <h1 className="v-title">{title}<span className="v-cursor">_</span></h1>
+        <p className="v-mono mt-1.5 text-[11px] text-[var(--text-tertiary)]">{description}</p>
       </div>
     </div>
   );
@@ -302,7 +302,7 @@ containr-agent`;
         title="Usage"
         description="Platform usage metrics and operational summaries"
       />
-      <div className="mx-auto w-full max-w-[1400px] px-6 py-6">
+      <div className="w-full px-8 py-6">
         <div className="flex items-center gap-2 mb-6">
           <div className={`w-2 h-2 rounded-full ${liveStatus === 'live' ? 'bg-[var(--success)] animate-pulse' : 'bg-[var(--text-muted)]'}`} />
           <span className={`text-sm ${liveStatus === 'live' ? 'text-[var(--success)]' : 'text-[var(--text-muted)]'}`}>
@@ -340,7 +340,7 @@ containr-agent`;
                 statusText={failedBuilds > 0 ? `${failedBuilds} failed` : 'Healthy'}
                 subtitle={buildActivityBody}
                 icon={<Activity size={18} />}
-                chart={<BarChart data={buildsPerDay} color="#e8316a" height={72} gap={3} />}
+                chart={<BarChart data={buildsPerDay} color="var(--accent-primary)" height={72} gap={3} />}
               />
               <EnhancedMetricCard
                 title="Capacity"
@@ -392,7 +392,7 @@ containr-agent`;
                     status={hostStatus(hostLoadPercent)}
                     statusText={host ? { good: 'Good', average: 'Average', warning: 'High' }[hostStatus(hostLoadPercent)] : ''}
                     subtitle={host ? `${host.cpu.cores} cores · 5m ${host.load.load5m.toFixed(2)} · 15m ${host.load.load15m.toFixed(2)}` : 'Loading CPU telemetry.'}
-                    chart={<LineAreaChart data={loadHistory.length > 0 ? loadHistory : [0]} color="#ff7043" height={72} />}
+                    chart={<LineAreaChart data={loadHistory.length > 0 ? loadHistory : [0]} color="#b4e34a" height={72} />}
                   />
                   <EnhancedMetricCard
                     title="Memory"
@@ -403,7 +403,7 @@ containr-agent`;
                     subtitle={host ? `${formatBytes(host.memory.available)} free` : 'Loading memory telemetry.'}
                     chart={
                       <div className="relative mx-auto" style={{ width: 150 }}>
-                        <DonutChart percentage={host?.memory.usagePercent ?? 0} color="#9c7ef0" size={150} thickness={14} />
+                        <DonutChart percentage={host?.memory.usagePercent ?? 0} color="#f2c94c" size={150} thickness={14} />
                         <div className="absolute inset-x-0 bottom-0 text-center">
                           <div className="text-[10px] uppercase tracking-wide text-[#6b6e7d]">Used</div>
                           <div className="text-sm font-bold text-[#e8e9f0]">
@@ -600,7 +600,7 @@ export function PeoplePage() {
         title="People"
         description="Team management and access control"
       />
-      <div className="mx-auto w-full max-w-[1400px] px-6 py-6">
+      <div className="w-full px-8 py-6">
         {profileQuery.isLoading ? (
           <div className="py-16 text-center">
             <Loader2 size={24} className="animate-spin mx-auto text-[var(--text-tertiary)]" />
@@ -677,8 +677,8 @@ export function PeoplePage() {
                 <button
                   type="submit"
                   disabled={createUserMutation.isPending}
-                  className="inline-flex h-10 items-center justify-center gap-2 rounded-[var(--radius-md)] px-4 text-sm font-semibold text-white disabled:opacity-60"
-                  style={{ background: '#e8316a' }}
+                  className="inline-flex h-10 items-center justify-center gap-2 rounded-[var(--radius-md)] px-4 text-sm font-semibold text-[var(--accent-on)] disabled:opacity-60"
+                  style={{ background: 'var(--accent-primary)' }}
                 >
                   {createUserMutation.isPending ? <Loader2 size={14} className="animate-spin" /> : <UserPlus size={14} />}
                   Create
@@ -764,8 +764,8 @@ function GitProvidersSection() {
         </div>
         <button
           onClick={() => setFormOpen((open) => !open)}
-          className="flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-white text-sm font-medium shadow-lg transition-all"
-          style={{ background: '#e8316a' }}
+          className="flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-[var(--accent-on)] text-sm font-medium shadow-lg transition-all"
+          style={{ background: 'var(--accent-primary)' }}
         >
           <Link2 size={14} />
           {formOpen ? 'Close' : 'Connect'}
@@ -880,8 +880,8 @@ function GitProvidersSection() {
             <button
               onClick={() => createMutation.mutate()}
               disabled={!form.accessToken.trim() || createMutation.isPending}
-              className="flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-white text-sm font-medium shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
-              style={{ background: '#e8316a' }}
+              className="flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-[var(--accent-on)] text-sm font-medium shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
+              style={{ background: 'var(--accent-primary)' }}
             >
               {createMutation.isPending ? <Loader2 size={14} className="animate-spin" /> : <Check size={14} />}
               Connect Provider
@@ -964,7 +964,7 @@ export function SettingsPage() {
         title="Settings"
         description="Manage account profile and local configuration"
       />
-      <div className="mx-auto w-full max-w-[1400px] px-6 py-6">
+      <div className="w-full px-8 py-6">
         <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
           {/* Profile Section */}
           <section className="panel p-6">
@@ -1015,8 +1015,8 @@ export function SettingsPage() {
                   <button
                     onClick={() => updateProfileMutation.mutate()}
                     disabled={!hasProfileChanges || updateProfileMutation.isPending}
-                    className="flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-white text-sm font-medium shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
-                    style={{ background: '#e8316a' }}
+                    className="flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-[var(--accent-on)] text-sm font-medium shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
+                    style={{ background: 'var(--accent-primary)' }}
                   >
                     {updateProfileMutation.isPending ? (
                       <>
@@ -1185,7 +1185,7 @@ export function DocsPage() {
         title="Docs"
         description="Operational references and API documentation"
       />
-      <div className="mx-auto w-full max-w-[1400px] px-6 py-6">
+      <div className="w-full px-8 py-6">
         {/* API Status Grid */}
         <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
           <div className="panel p-4">
diff --git a/app/frontend/src/features/secondary/pages/ComponentShowcase.tsx b/app/frontend/src/features/secondary/pages/ComponentShowcase.tsx
index 4207800..9697b7d 100644
--- a/app/frontend/src/features/secondary/pages/ComponentShowcase.tsx
+++ b/app/frontend/src/features/secondary/pages/ComponentShowcase.tsx
@@ -37,15 +37,15 @@ export function ComponentShowcase() {
     <div className="min-h-screen p-8" style={{ background: '#16171c' }}>
       <div className="ambient-glow" />
       
-      <div className="max-w-7xl mx-auto relative z-10">
+      <div className="w-full relative z-10">
         {/* Header */}
         <div className="mb-8">
           <div className="flex items-center gap-3 mb-4">
             <div 
               className="w-12 h-12 rounded-xl flex items-center justify-center"
-              style={{ background: '#e8316a' }}
+              style={{ background: 'var(--accent-primary)' }}
             >
-              <Activity size={24} className="text-white" />
+              <Activity size={24} className="text-[var(--accent-on)]" />
             </div>
             <div>
               <h1 className="text-3xl font-bold text-[var(--text-primary)]">
@@ -97,7 +97,7 @@ export function ComponentShowcase() {
                   </h3>
                   <LineChart 
                     data={sampleLineData} 
-                    color="#ff7043" 
+                    color="#b4e34a" 
                     height={120}
                     showDots={true}
                     smooth={true}
@@ -109,7 +109,7 @@ export function ComponentShowcase() {
                   </h3>
                   <LineChart 
                     data={sampleLineData} 
-                    color="#6c8ef0" 
+                    color="#7ab8ff" 
                     height={120}
                     showDots={false}
                     smooth={true}
@@ -129,7 +129,7 @@ export function ComponentShowcase() {
                   </h3>
                   <LineAreaChart 
                     data={sampleAreaData} 
-                    color="#e8316a"
+                    color="var(--accent-primary)"
                     fillOpacity={0.15}
                     height={150}
                   />
@@ -140,7 +140,7 @@ export function ComponentShowcase() {
                   </h3>
                   <LineAreaChart 
                     data={sampleAreaData} 
-                    color="#3dd68c"
+                    color="#5ee6a0"
                     fillOpacity={0.2}
                     height={150}
                   />
@@ -159,8 +159,8 @@ export function ComponentShowcase() {
                   </h3>
                   <MultiLineChart 
                     datasets={[
-                      { data: sampleLineData.map(v => v + 10), color: '#6c8ef0', fillOpacity: 0.15 },
-                      { data: sampleLineData, color: '#9c7ef0', fillOpacity: 0.15 }
+                      { data: sampleLineData.map(v => v + 10), color: '#7ab8ff', fillOpacity: 0.15 },
+                      { data: sampleLineData, color: '#f2c94c', fillOpacity: 0.15 }
                     ]}
                     height={120}
                   />
@@ -171,7 +171,7 @@ export function ComponentShowcase() {
                   </h3>
                   <BarChart 
                     data={sampleBarData} 
-                    color="#3dd68c"
+                    color="#5ee6a0"
                     height={120}
                     gap={2}
                   />
@@ -188,19 +188,19 @@ export function ComponentShowcase() {
                   <h3 className="text-sm font-medium text-[var(--text-secondary)] mb-4">
                     RAM Usage (65%)
                   </h3>
-                  <DonutChart percentage={65} color="#9c7ef0" size={160} />
+                  <DonutChart percentage={65} color="#f2c94c" size={160} />
                 </div>
                 <div className="panel p-6 flex flex-col items-center">
                   <h3 className="text-sm font-medium text-[var(--text-secondary)] mb-4">
                     Disk Usage (82%)
                   </h3>
-                  <DonutChart percentage={82} color="#ff7043" size={160} />
+                  <DonutChart percentage={82} color="#b4e34a" size={160} />
                 </div>
                 <div className="panel p-6 flex flex-col items-center">
                   <h3 className="text-sm font-medium text-[var(--text-secondary)] mb-4">
                     Network (45%)
                   </h3>
-                  <DonutChart percentage={45} color="#6c8ef0" size={160} />
+                  <DonutChart percentage={45} color="#7ab8ff" size={160} />
                 </div>
               </div>
             </section>
@@ -222,7 +222,7 @@ export function ComponentShowcase() {
                   status="good"
                   statusText="Good"
                   icon={<Cpu size={16} />}
-                  chart={<LineChart data={sampleLineData} color="#ff7043" height={76} />}
+                  chart={<LineChart data={sampleLineData} color="#b4e34a" height={76} />}
                   onClick={() => handleCardClick('CPU Usage')}
                   animationDelay={0.04}
                 />
@@ -233,7 +233,7 @@ export function ComponentShowcase() {
                   status="average"
                   statusText="Average"
                   icon={<MemoryStick size={16} />}
-                  chart={<LineChart data={sampleLineData.map(v => v + 20)} color="#9c7ef0" height={76} />}
+                  chart={<LineChart data={sampleLineData.map(v => v + 20)} color="#f2c94c" height={76} />}
                   onClick={() => handleCardClick('Memory')}
                   animationDelay={0.09}
                 />
@@ -242,7 +242,7 @@ export function ComponentShowcase() {
                   value="2.4K"
                   subtitle="Last 60 minutes"
                   icon={<Zap size={16} />}
-                  chart={<BarChart data={sampleBarData} color="#3dd68c" height={76} gap={2} />}
+                  chart={<BarChart data={sampleBarData} color="#5ee6a0" height={76} gap={2} />}
                   onClick={() => handleCardClick('Requests')}
                   animationDelay={0.14}
                 />
@@ -259,7 +259,7 @@ export function ComponentShowcase() {
                   value="475 K"
                   subtitle="Users active right now"
                   icon={<Users size={16} />}
-                  chart={<LineAreaChart data={sampleAreaData} color="#e8316a" height={130} />}
+                  chart={<LineAreaChart data={sampleAreaData} color="var(--accent-primary)" height={130} />}
                   details={
                     <div className="flex items-center gap-1.5 flex-wrap">
                       {['🇨🇳', '🇮🇩', '🇲🇲', '🇲🇾', '🇯🇵', '🇮🇳', '🇰🇷', '🇵🇭'].map((flag, i) => (
@@ -276,7 +276,7 @@ export function ComponentShowcase() {
                   value="12.5K"
                   subtitle="Queries per minute"
                   icon={<Database size={16} />}
-                  chart={<LineAreaChart data={sampleAreaData.map(v => v + 10)} color="#6c8ef0" height={130} />}
+                  chart={<LineAreaChart data={sampleAreaData.map(v => v + 10)} color="#7ab8ff" height={130} />}
                   details={
                     <div className="flex items-center gap-3 text-xs">
                       <div className="flex items-center gap-1.5">
@@ -313,8 +313,8 @@ export function ComponentShowcase() {
                   upSpeed={10.4}
                   downSpeed={5.2}
                   datasets={[
-                    { data: sampleLineData.map(v => v + 20), color: '#6c8ef0', fillOpacity: 0.15 },
-                    { data: sampleLineData.map(v => v + 10), color: '#9c7ef0', fillOpacity: 0.15 }
+                    { data: sampleLineData.map(v => v + 20), color: '#7ab8ff', fillOpacity: 0.15 },
+                    { data: sampleLineData.map(v => v + 10), color: '#f2c94c', fillOpacity: 0.15 }
                   ]}
                   onClick={() => handleCardClick('Performance')}
                   animationDelay={0.09}
diff --git a/app/frontend/src/features/service/pages/ServiceDetailPage.tsx b/app/frontend/src/features/service/pages/ServiceDetailPage.tsx
index 825c32e..f941f90 100644
--- a/app/frontend/src/features/service/pages/ServiceDetailPage.tsx
+++ b/app/frontend/src/features/service/pages/ServiceDetailPage.tsx
@@ -302,7 +302,7 @@ export function ServiceDetailPage() {
           style={{ 
             width: '46px', 
             height: '46px', 
-            background: '#e8316a',
+            background: 'var(--accent-primary)',
             marginRight: '14px'
           }}
         >
@@ -379,7 +379,7 @@ export function ServiceDetailPage() {
 
       {/* Demo Mode Banner */}
       {isDemoMode && (
-        <div className="mx-auto w-full max-w-[1400px] px-6 py-4">
+        <div className="w-full px-8 py-4">
           <div className="px-4 py-3 rounded-[var(--radius-md)] border border-[var(--warning-soft)] bg-[var(--warning-soft)]/50">
             <div className="flex items-center gap-2 text-sm text-[var(--warning)]">
               <Sparkles size={16} />
@@ -390,7 +390,7 @@ export function ServiceDetailPage() {
       )}
 
       {/* Metrics Overview */}
-      <div className="mx-auto w-full max-w-[1400px] px-6 py-6">
+      <div className="w-full px-8 py-6">
         <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
           <EnhancedMetricCard
             title="CPU Usage"
@@ -404,7 +404,7 @@ export function ServiceDetailPage() {
                 data={isDemoMode
                   ? Array.from({ length: 24 }, (_, i) => seededMetric(`${service.id}:cpu:${i}`, 8, 80))
                   : metricHistory.cpu.length > 0 ? metricHistory.cpu : [0]}
-                color="#ff7043"
+                color="#b4e34a"
                 height={72}
               />
             }
@@ -418,7 +418,7 @@ export function ServiceDetailPage() {
             subtitle={isDemoMode ? 'Container footprint' : hasLiveTelemetry ? `${formatBytes(liveMetrics!.memory_usage_bytes)} used` : 'No running containers'}
             chart={
               <div className="relative mx-auto" style={{ width: 150 }}>
-                <DonutChart percentage={isDemoMode ? metricSet?.memory ?? 0 : memoryPercent} color="#9c7ef0" size={150} thickness={14} />
+                <DonutChart percentage={isDemoMode ? metricSet?.memory ?? 0 : memoryPercent} color="#f2c94c" size={150} thickness={14} />
                 <div className="absolute inset-x-0 bottom-0 text-center">
                   <div className="text-[10px] uppercase tracking-wide text-[#6b6e7d]">Used</div>
                   <div className="text-sm font-bold text-[#e8e9f0]">
@@ -444,7 +444,7 @@ export function ServiceDetailPage() {
                 data={isDemoMode
                   ? Array.from({ length: 24 }, (_, i) => seededMetric(`${service.id}:net:${i}`, 15, 70))
                   : metricHistory.net.length > 0 ? metricHistory.net : [0]}
-                color="#6c8ef0"
+                color="#7ab8ff"
                 height={72}
               />
             }
@@ -555,7 +555,7 @@ export function ServiceDetailPage() {
                           <div
                             key={i}
                             className="flex-1 rounded-[var(--radius-xs)] transition-all hover:opacity-80 cursor-pointer"
-                            style={{ height: `${value}%`, background: '#ff7043' }}
+                            style={{ height: `${value}%`, background: '#b4e34a' }}
                             title={`${value}%`}
                           />
                         );
@@ -564,7 +564,7 @@ export function ServiceDetailPage() {
                         <div
                           key={i}
                           className="flex-1 rounded-[var(--radius-xs)] transition-all hover:opacity-80"
-                          style={{ height: `${Math.max(3, value)}%`, background: '#ff7043' }}
+                          style={{ height: `${Math.max(3, value)}%`, background: '#b4e34a' }}
                           title={`${value.toFixed(1)}%`}
                         />
                       ))}
@@ -596,7 +596,7 @@ export function ServiceDetailPage() {
                           <div
                             key={i}
                             className="flex-1 rounded-[var(--radius-xs)] transition-all hover:opacity-80 cursor-pointer"
-                            style={{ height: `${value}%`, background: '#3dd68c' }}
+                            style={{ height: `${value}%`, background: '#5ee6a0' }}
                             title={`${value}%`}
                           />
                         );
@@ -605,7 +605,7 @@ export function ServiceDetailPage() {
                         <div
                           key={i}
                           className="flex-1 rounded-[var(--radius-xs)] transition-all hover:opacity-80"
-                          style={{ height: `${Math.max(3, value)}%`, background: '#3dd68c' }}
+                          style={{ height: `${Math.max(3, value)}%`, background: '#5ee6a0' }}
                           title={`${value.toFixed(1)}%`}
                         />
                       ))}
diff --git a/app/frontend/src/features/service/pages/ServiceMetricsDashboard.tsx b/app/frontend/src/features/service/pages/ServiceMetricsDashboard.tsx
index 6a16486..59d8a4c 100644
--- a/app/frontend/src/features/service/pages/ServiceMetricsDashboard.tsx
+++ b/app/frontend/src/features/service/pages/ServiceMetricsDashboard.tsx
@@ -78,8 +78,8 @@ export function ServiceMetricsDashboard() {
       userData,
       perf: perfPercent,
       perfData: [
-        { data: perfData1, color: '#6c8ef0', fillOpacity: 0.15 },
-        { data: perfData2, color: '#9c7ef0', fillOpacity: 0.15 }
+        { data: perfData1, color: '#7ab8ff', fillOpacity: 0.15 },
+        { data: perfData2, color: '#f2c94c', fillOpacity: 0.15 }
       ],
       upSpeed: seededRandom(`${serviceId}:upspeed`, 8, 13).toFixed(1),
       downSpeed: seededRandom(`${serviceId}:downspeed`, 4, 7).toFixed(1),
@@ -129,7 +129,7 @@ export function ServiceMetricsDashboard() {
             style={{ 
               width: '38px', 
               height: '38px', 
-              background: '#e8316a',
+              background: 'var(--accent-primary)',
               marginBottom: '14px'
             }}
           >
@@ -270,7 +270,7 @@ export function ServiceMetricsDashboard() {
                 style={{ 
                   width: '46px', 
                   height: '46px', 
-                  background: '#e8316a',
+                  background: 'var(--accent-primary)',
                   marginRight: '14px'
                 }}
               >
@@ -408,7 +408,7 @@ export function ServiceMetricsDashboard() {
                 status="good"
                 statusText="Good"
                 icon={<Cpu size={16} />}
-                chart={<LineChart data={metrics.cpuData} color="#ff7043" height={76} />}
+                chart={<LineChart data={metrics.cpuData} color="#b4e34a" height={76} />}
                 animationDelay={0.04}
               />
 
@@ -424,10 +424,10 @@ export function ServiceMetricsDashboard() {
                   {metrics.ram}%
                 </div>
                 <div style={{ fontSize: 12, color: '#6b6e7d', marginTop: 4 }}>
-                  <span style={{ color: '#f0a040', fontWeight: 700 }}>Average</span> Daily usage
+                  <span style={{ color: '#f2c94c', fontWeight: 700 }}>Average</span> Daily usage
                 </div>
                 <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', margin: '10px 0 4px', position: 'relative' }}>
-                  <DonutChart percentage={metrics.ram} color="#9c7ef0" />
+                  <DonutChart percentage={metrics.ram} color="#f2c94c" />
                   <div style={{ position: 'absolute', bottom: 14, textAlign: 'center' }}>
                     <div style={{ fontSize: 10.5, color: '#6b6e7d', marginBottom: 1 }}>Used</div>
                     <div style={{ fontSize: 12.5, fontWeight: 700, color: '#e8e9f0' }}>{metrics.ramUsedGB} GB / 8GB</div>
@@ -460,7 +460,7 @@ export function ServiceMetricsDashboard() {
                 value={`${metrics.users} K`}
                 subtitle="User active right now"
                 icon={<Users size={16} />}
-                chart={<LineAreaChart data={metrics.userData} color="#e8316a" height={130} />}
+                chart={<LineAreaChart data={metrics.userData} color="var(--accent-primary)" height={130} />}
                 details={
                   <div className="flex items-center gap-1.5 flex-wrap">
                     {['🇨🇳', '🇮🇩', '🇲🇲', '🇲🇾', '🇯🇵', '🇮🇳', '🇰🇷', '🇵🇭'].map((flag, i) => (
diff --git a/app/frontend/src/features/templates/pages/TemplatesPage.tsx b/app/frontend/src/features/templates/pages/TemplatesPage.tsx
index 46c4c01..4821955 100644
--- a/app/frontend/src/features/templates/pages/TemplatesPage.tsx
+++ b/app/frontend/src/features/templates/pages/TemplatesPage.tsx
@@ -557,10 +557,10 @@ export function TemplatesPage() {
     <div className="min-h-screen">
       {/* Header */}
       <div className="border-b border-[var(--border-subtle)] bg-[var(--bg-base)]/50 backdrop-blur-sm">
-        <div className="mx-auto w-full max-w-[1400px] px-6 py-4">
+        <div className="w-full px-8 py-4">
           <div className="flex items-center justify-between gap-4">
             <div>
-              <h1 className="text-xl font-semibold text-[var(--text-primary)]">Template Catalog</h1>
+              <h1 className="v-title">Template Catalog<span className="v-cursor">_</span></h1>
               <p className="text-sm text-[var(--text-secondary)]">Deploy services from pre-configured templates</p>
             </div>
             <div className="flex items-center gap-2 text-sm text-[var(--text-tertiary)]">
@@ -573,7 +573,7 @@ export function TemplatesPage() {
 
       {/* Demo Mode Banner */}
       {isDemoMode && (
-        <div className="mx-auto w-full max-w-[1400px] px-6 py-4">
+        <div className="w-full px-8 py-4">
           <div className="px-4 py-3 rounded-[var(--radius-md)] border border-[var(--warning-soft)] bg-[var(--warning-soft)]/50">
             <div className="flex items-center gap-2 text-sm text-[var(--warning)]">
               <Sparkles size={16} />
@@ -584,7 +584,7 @@ export function TemplatesPage() {
       )}
 
       {/* Main Content */}
-      <div className="mx-auto w-full max-w-[1400px] px-6 py-6">
+      <div className="w-full px-8 py-6">
         <div className="grid grid-cols-1 xl:grid-cols-[380px_1fr] gap-6">
           {/* Template List */}
           <section className="panel overflow-hidden">
@@ -657,7 +657,7 @@ export function TemplatesPage() {
                   {filteredTemplates.map((template) => {
                     const selected = template.id === selectedTemplateId;
                     const Icon = categoryIcon(template.category);
-                    const categoryColor = template.category === 'database' ? '#9c7ef0' : template.category === 'frontend' ? '#6c8ef0' : template.category === 'web' ? '#e8316a' : '#9295a4';
+                    const categoryColor = template.category === 'database' ? '#7ab8ff' : template.category === 'frontend' ? '#f2c94c' : template.category === 'web' ? 'var(--accent-primary)' : '#9295a4';
                     return (
                       <button
                         key={template.id}
@@ -935,8 +935,8 @@ export function TemplatesPage() {
                     <button
                       onClick={() => deployMutation.mutate()}
                       disabled={isDeployDisabled}
-                      className="flex items-center gap-2 h-11 px-6 rounded-[var(--radius-md)] text-white text-sm font-medium shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
-                      style={{ background: '#e8316a' }}
+                      className="flex items-center gap-2 h-11 px-6 rounded-[var(--radius-md)] text-[var(--accent-on)] text-sm font-medium shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
+                      style={{ background: 'var(--accent-primary)' }}
                     >
                       {deployMutation.isPending ? (
                         <>
diff --git a/app/frontend/src/features/workspace/canvas/ProjectCanvas.tsx b/app/frontend/src/features/workspace/canvas/ProjectCanvas.tsx
index de4f7be..8585891 100644
--- a/app/frontend/src/features/workspace/canvas/ProjectCanvas.tsx
+++ b/app/frontend/src/features/workspace/canvas/ProjectCanvas.tsx
@@ -107,7 +107,7 @@ function toFlowEdges(links: ReturnType<typeof inferAutoConnections>): CanvasEdge
       height: 14,
     },
     style: {
-      stroke: '#e8316a',
+      stroke: 'var(--accent-primary)',
       strokeWidth: 2,
     },
     className: 'edge-premium',
@@ -362,8 +362,8 @@ function CanvasInner({ projectId, services, variablesByService, onAddService, on
         <button
           type="button"
           onClick={onAddService}
-          className="flex items-center gap-2 h-9 px-4 rounded-lg text-white text-sm font-medium shadow-lg hover:shadow-xl transition-all duration-200"
-          style={{ background: '#e8316a' }}
+          className="flex items-center gap-2 h-9 px-4 rounded-lg text-[var(--accent-on)] text-sm font-medium shadow-lg hover:shadow-xl transition-all duration-200"
+          style={{ background: 'var(--accent-primary)' }}
         >
           <Plus size={15} />
           Add Service
diff --git a/app/frontend/src/features/workspace/canvas/nodes.tsx b/app/frontend/src/features/workspace/canvas/nodes.tsx
index cc89a6e..b72bd06 100644
--- a/app/frontend/src/features/workspace/canvas/nodes.tsx
+++ b/app/frontend/src/features/workspace/canvas/nodes.tsx
@@ -33,11 +33,11 @@ function serviceTypeIcon(type: string): typeof Box {
 function serviceTypeColor(type: string): string {
   switch (type) {
     case 'web':
-      return '#6c8ef0'; // Blue
+      return '#7ab8ff'; // Blue
     case 'database':
-      return '#9c7ef0'; // Purple
+      return '#b4e34a'; // Purple
     case 'worker':
-      return '#e8316a'; // Pink
+      return 'var(--accent-primary)'; // Pink
     default:
       return '#9295a4'; // Gray
   }
@@ -124,7 +124,7 @@ export function ServiceNode({ data }: NodeProps<ServiceNodeType>) {
             onClick={() => onOpen(service.id)}
             className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-semibold transition-all duration-200 ${
               selected
-                ? 'bg-[var(--accent-primary)] text-white shadow-lg shadow-[var(--accent-primary-glow)]'
+                ? 'bg-[var(--accent-primary)] text-[var(--accent-on)] shadow-lg shadow-[var(--accent-primary-glow)]'
                 : 'border border-[var(--border-subtle)] text-[var(--text-secondary)] hover:border-[var(--accent-primary)] hover:text-[var(--accent-primary)]'
             }`}
           >
diff --git a/app/frontend/src/features/workspace/components/MetricsDashboard.tsx b/app/frontend/src/features/workspace/components/MetricsDashboard.tsx
index 7347a61..0008f68 100644
--- a/app/frontend/src/features/workspace/components/MetricsDashboard.tsx
+++ b/app/frontend/src/features/workspace/components/MetricsDashboard.tsx
@@ -131,13 +131,13 @@ export function MetricsDashboard({
           </div>
           <div style={{ fontSize: '38px', fontWeight: 900, letterSpacing: '-1.5px', lineHeight: 1, color: '#e8e9f0' }}>{currentCpu}%</div>
           <div style={{ fontSize: '12px', color: '#6b6e7d', marginTop: '4px' }}>
-            <span style={{ color: currentCpu < 50 ? '#3dd68c' : currentCpu < 75 ? '#f0a040' : '#ff7043', fontWeight: 700 }}>
+            <span style={{ color: currentCpu < 50 ? '#5ee6a0' : currentCpu < 75 ? '#f2c94c' : '#b4e34a', fontWeight: 700 }}>
               {currentCpu < 50 ? 'Good' : currentCpu < 75 ? 'Average' : 'High'}
             </span>{' '}
             Daily usage
           </div>
           <div style={{ height: 76, margin: '12px 0 6px' }}>
-            <LineMetricChart data={data.cpu} color="#ff7043" height={76} />
+            <LineMetricChart data={data.cpu} color="#b4e34a" height={76} />
           </div>
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: '4px' }}>
             <span style={{ fontSize: '13px', color: '#6b6e7d', fontWeight: 500, cursor: 'pointer' }}>Details</span>
@@ -155,13 +155,13 @@ export function MetricsDashboard({
           </div>
           <div style={{ fontSize: '38px', fontWeight: 900, letterSpacing: '-1.5px', lineHeight: 1, color: '#e8e9f0' }}>{data.ram}%</div>
           <div style={{ fontSize: '12px', color: '#6b6e7d', marginTop: '4px' }}>
-            <span style={{ color: data.ram < 60 ? '#3dd68c' : '#f0a040', fontWeight: 700 }}>
+            <span style={{ color: data.ram < 60 ? '#5ee6a0' : '#f2c94c', fontWeight: 700 }}>
               {data.ram < 60 ? 'Good' : 'Average'}
             </span>{' '}
             Daily usage
           </div>
           <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', margin: '10px 0 4px', position: 'relative' }}>
-            <DonutChart percent={data.ram} color="#9c7ef0" size={160} thickness={16} />
+            <DonutChart percent={data.ram} color="#f2c94c" size={160} thickness={16} />
             <div style={{ position: 'absolute', bottom: 14, textAlign: 'center' }}>
               <div style={{ fontSize: '10.5px', color: '#6b6e7d', marginBottom: 1 }}>Used</div>
               <div style={{ fontSize: '12.5px', fontWeight: 700, color: '#e8e9f0' }}>{data.ramUsed} / 8GB</div>
@@ -183,7 +183,7 @@ export function MetricsDashboard({
           </div>
           <div style={{ fontSize: '38px', fontWeight: 900, letterSpacing: '-1.5px', lineHeight: 1, color: '#e8e9f0' }}>{data.cache} MB</div>
           <div style={{ fontSize: '12px', color: '#6b6e7d', marginTop: '4px' }}>
-            <span style={{ color: '#f0a040', fontWeight: 700 }}>220MB Average</span>{' '}
+            <span style={{ color: '#f2c94c', fontWeight: 700 }}>220MB Average</span>{' '}
             cached images and files
           </div>
 
@@ -257,7 +257,7 @@ export function MetricsDashboard({
             </div>
           </div>
           <div style={{ width: '50%', padding: '16px 14px 46px 0', display: 'flex', alignItems: 'flex-end' }}>
-            <LineMetricChart data={data.users} color="#e8316a" fillOpacity={0.15} showArea height={130} />
+            <LineMetricChart data={data.users} color="var(--accent-primary)" fillOpacity={0.15} showArea height={130} />
           </div>
         </div>
 
@@ -271,7 +271,7 @@ export function MetricsDashboard({
             <div style={{ flex: 1 }}>
               <div style={{ fontSize: '36px', fontWeight: 900, letterSpacing: '-1.5px', lineHeight: 1, color: '#e8e9f0' }}>{currentPerf}%</div>
               <div style={{ fontSize: '12px', color: '#6b6e7d', marginTop: '4px' }}>
-                <span style={{ color: currentPerf > 85 ? '#3dd68c' : '#f0a040', fontWeight: 700 }}>
+                <span style={{ color: currentPerf > 85 ? '#5ee6a0' : '#f2c94c', fontWeight: 700 }}>
                   {currentPerf > 85 ? 'Good' : 'Average'}
                 </span>{' '}
                 Last scan
@@ -282,11 +282,11 @@ export function MetricsDashboard({
                 <DualLineChart data1={data.performance} data2={data.performanceAlt} height={58} />
               </div>
               <div style={{ display: 'flex', flexDirection: 'column', gap: '4px', alignItems: 'flex-end' }}>
-                <div className="speed-row" style={{ color: '#6c8ef0' }}>
+                <div className="speed-row" style={{ color: '#7ab8ff' }}>
                   <svg viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 19 19 12"/></svg>
                   <span>{data.upSpeed}</span> Mbps
                 </div>
-                <div className="speed-row" style={{ color: '#e8316a' }}>
+                <div className="speed-row" style={{ color: 'var(--accent-primary)' }}>
                   <svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 5 5 12"/></svg>
                   <span>{data.downSpeed}</span> Mbps
                 </div>
diff --git a/app/frontend/src/features/workspace/pages/ProjectWorkspacePage.tsx b/app/frontend/src/features/workspace/pages/ProjectWorkspacePage.tsx
index 069aafe..c395f6c 100644
--- a/app/frontend/src/features/workspace/pages/ProjectWorkspacePage.tsx
+++ b/app/frontend/src/features/workspace/pages/ProjectWorkspacePage.tsx
@@ -367,8 +367,8 @@ function ServiceCreateDialog(props: {
                 build_path: source === 'git' ? form.build_path?.trim() : '',
               })
             }
-            className="px-5 py-2 rounded-[var(--radius-md)] text-white text-sm font-medium shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
-            style={{ background: '#e8316a' }}
+            className="px-5 py-2 rounded-[var(--radius-md)] text-[var(--accent-on)] text-sm font-medium shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
+            style={{ background: 'var(--accent-primary)' }}
           >
             {props.loading ? 'Creating...' : 'Create Service'}
           </button>
@@ -526,7 +526,7 @@ export function ProjectWorkspacePage() {
     <div className="min-h-screen">
       {/* Header */}
       <div className="border-b border-[var(--border-subtle)] bg-[var(--bg-base)]/50 backdrop-blur-sm">
-        <div className="mx-auto w-full max-w-[1400px] px-6 py-4">
+        <div className="w-full px-8 py-4">
           <div className="flex items-center justify-between gap-4">
             <div className="flex items-center gap-4">
               <button
@@ -538,7 +538,7 @@ export function ProjectWorkspacePage() {
               </button>
               <div className="w-px h-5 bg-[var(--border-subtle)]" />
               <div>
-                <h1 className="text-xl font-semibold text-[var(--text-primary)]">{project.name}</h1>
+                <h1 className="v-title">{project.name}<span className="v-cursor">_</span></h1>
                 <p className="text-sm text-[var(--text-secondary)]">{project.description || 'No description'}</p>
               </div>
             </div>
@@ -577,8 +577,8 @@ export function ProjectWorkspacePage() {
               {!isDemoMode && (
                 <button
                   onClick={() => setCreateOpen(true)}
-                  className="flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-white text-sm font-medium shadow-lg hover:shadow-xl transition-all"
-                  style={{ background: '#e8316a' }}
+                  className="flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-[var(--accent-on)] text-sm font-medium shadow-lg hover:shadow-xl transition-all"
+                  style={{ background: 'var(--accent-primary)' }}
                 >
                   <Plus size={16} />
                   <span className="hidden sm:inline">Add Service</span>
@@ -591,7 +591,7 @@ export function ProjectWorkspacePage() {
 
       {/* Demo Mode Banner */}
       {isDemoMode && (
-        <div className="mx-auto w-full max-w-[1400px] px-6 py-4">
+        <div className="w-full px-8 py-4">
           <div className="px-4 py-3 rounded-[var(--radius-md)] border border-[var(--warning-soft)] bg-[var(--warning-soft)]/50">
             <div className="flex items-center gap-2 text-sm text-[var(--warning)]">
               <Sparkles size={16} />
@@ -602,7 +602,7 @@ export function ProjectWorkspacePage() {
       )}
 
       {/* Main Content */}
-      <div className="mx-auto w-full max-w-[1400px] px-6 py-6">
+      <div className="w-full px-8 py-6">
         <div className="grid grid-cols-1 lg:grid-cols-[200px_1fr] gap-6">
           {/* Sidebar Navigation */}
           <aside className="lg:sticky lg:top-6 lg:h-fit">
diff --git a/app/frontend/src/index.css b/app/frontend/src/index.css
index e4eff3c..67d09df 100644
--- a/app/frontend/src/index.css
+++ b/app/frontend/src/index.css
@@ -2,56 +2,55 @@
 
 /* Inter font - exact match from self.html */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');
 
 :root {
-  /* Exact colors from self.html */
-  --bg-void: #16171c;
-  --bg-base: #111217;
-  --bg-surface: #0f1017;
-  --bg-elevated: #1c1d24;
-  --bg-overlay: #1a1b26;
-  
-  /* Surface cards - matching self.html card */
-  --surface-card: #1c1d24;
-  --surface-card-hover: #22233a;
+  /* Vertice palette — near-black gray, lime accent */
+  --bg-void: #0c0d0f;
+  --bg-base: #0e0f12;
+  --bg-surface: #101214;
+  --bg-elevated: #131518;
+  --bg-overlay: #16181d;
+
+  --surface-card: #131518;
+  --surface-card-hover: #1a1d22;
   --surface-muted: rgba(255, 255, 255, 0.05);
-  --surface-glass: rgba(20, 22, 32, 0.6);
-  --surface-base: #1c1d24;
-  
-  /* Text hierarchy - matching self.html */
-  --text-primary: #e8e9f0;
-  --text-secondary: #9295a4;
-  --text-tertiary: #6b6e7d;
-  --text-muted: #6b6e7d;
-  
-  /* Accent colors - exact from self.html */
-  --accent-primary: #e8316a;
-  --accent-primary-soft: rgba(232, 49, 106, 0.15);
-  --accent-primary-glow: rgba(232, 49, 106, 0.4);
-  --accent-secondary: #9c7ef0;
-  --accent-tertiary: #6c8ef0;
-  
-  /* Status colors - exact from self.html */
-  --success: #3dd68c;
-  --success-soft: rgba(61, 214, 140, 0.15);
-  --success-glow: rgba(61, 214, 140, 0.3);
-  
-  --warning: #ff7043;
-  --warning-soft: rgba(255, 112, 67, 0.15);
-  --warning-glow: rgba(255, 112, 67, 0.3);
-  
-  --error: #ff6b5b;
-  --error-soft: rgba(255, 107, 91, 0.15);
-  --error-glow: rgba(255, 107, 91, 0.3);
-  
-  --info: #6c8ef0;
-  --info-soft: rgba(108, 142, 240, 0.15);
-  
-  /* Border system - matching self.html */
-  --border-subtle: rgba(255, 255, 255, 0.08);
-  --border-default: rgba(255, 255, 255, 0.14);
-  --border-strong: rgba(232, 49, 106, 0.4);
-  --border-glow: rgba(232, 49, 106, 0.6);
+  --surface-glass: rgba(16, 18, 21, 0.7);
+  --surface-base: #131518;
+
+  --text-primary: #ecedf0;
+  --text-secondary: #8b919e;
+  --text-tertiary: #575d68;
+  --text-muted: #575d68;
+
+  /* Lime accent + subtle yellow secondary */
+  --accent-primary: #b4e34a;
+  --accent-primary-soft: rgba(180, 227, 74, 0.1);
+  --accent-primary-glow: rgba(180, 227, 74, 0.35);
+  --accent-on: #131507;
+  --accent-secondary: #f2c94c;
+  --accent-tertiary: #7ab8ff;
+
+  --success: #5ee6a0;
+  --success-soft: rgba(94, 230, 160, 0.1);
+  --success-glow: rgba(94, 230, 160, 0.3);
+
+  --warning: #f2c94c;
+  --warning-soft: rgba(242, 201, 76, 0.1);
+  --warning-glow: rgba(242, 201, 76, 0.3);
+
+  --error: #ff6f5c;
+  --error-soft: rgba(255, 111, 92, 0.1);
+  --error-glow: rgba(255, 111, 92, 0.3);
+
+  --info: #7ab8ff;
+  --info-soft: rgba(122, 184, 255, 0.12);
+
+  /* Border system */
+  --border-subtle: rgba(255, 255, 255, 0.065);
+  --border-default: rgba(255, 255, 255, 0.13);
+  --border-strong: rgba(180, 227, 74, 0.35);
+  --border-glow: rgba(180, 227, 74, 0.55);
   
   /* Shadows */
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
@@ -105,10 +104,11 @@
   --text-tertiary: #7b8498;
   --text-muted: #7b8498;
 
-  --accent-primary: #d92d64;
-  --accent-primary-soft: rgba(217, 45, 100, 0.12);
-  --accent-primary-glow: rgba(217, 45, 100, 0.22);
-  --accent-secondary: #7357d8;
+  --accent-primary: #7ba91e;
+  --accent-primary-soft: rgba(123, 169, 30, 0.14);
+  --accent-primary-glow: rgba(123, 169, 30, 0.28);
+  --accent-on: #ffffff;
+  --accent-secondary: #b8860b;
   --accent-tertiary: #2f67d8;
 
   --success: #168a55;
@@ -128,8 +128,8 @@
 
   --border-subtle: rgba(21, 24, 33, 0.1);
   --border-default: rgba(21, 24, 33, 0.16);
-  --border-strong: rgba(217, 45, 100, 0.35);
-  --border-glow: rgba(217, 45, 100, 0.45);
+  --border-strong: rgba(123, 169, 30, 0.4);
+  --border-glow: rgba(123, 169, 30, 0.5);
 
   --shadow-sm: 0 1px 2px rgba(17, 18, 23, 0.08);
   --shadow-md: 0 4px 12px rgba(17, 18, 23, 0.1);
@@ -199,10 +199,10 @@ body {
   content: '';
   position: fixed;
   top: -20%;
-  left: -10%;
-  width: 50%;
-  height: 50%;
-  background: radial-gradient(ellipse at center, rgba(232, 49, 106, 0.08) 0%, transparent 70%);
+  right: -5%;
+  width: 45%;
+  height: 45%;
+  background: radial-gradient(ellipse at center, rgba(180, 227, 74, 0.05) 0%, transparent 70%);
   filter: blur(60px);
 }
 
@@ -210,10 +210,10 @@ body {
   content: '';
   position: fixed;
   bottom: -30%;
-  right: -10%;
-  width: 60%;
-  height: 60%;
-  background: radial-gradient(ellipse at center, rgba(156, 126, 240, 0.06) 0%, transparent 70%);
+  left: -10%;
+  width: 55%;
+  height: 55%;
+  background: radial-gradient(ellipse at center, rgba(242, 201, 76, 0.03) 0%, transparent 70%);
   filter: blur(80px);
 }
 
@@ -292,9 +292,9 @@ textarea {
 
 /* Card - self.html exact match */
 .card {
-  background: #1c1d24;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 20px;
+  background: var(--surface-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: 13px;
   padding: 20px;
   display: flex;
   flex-direction: column;
@@ -314,9 +314,9 @@ textarea {
 
 /* Panel - alias for card for backwards compatibility */
 .panel {
-  background: #1c1d24;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 20px;
+  background: var(--surface-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: 13px;
   padding: 20px;
   transition: border-color 0.2s, box-shadow 0.2s;
 }
@@ -645,14 +645,14 @@ textarea {
 
 /* Distinctive headline styles */
 .headline-display {
-  font-family: 'Space Grotesk', system-ui, sans-serif;
+  font-family: 'Inter', system-ui, sans-serif;
   font-weight: 700;
   letter-spacing: -0.04em;
   line-height: 1.1;
 }
 
 .headline-section {
-  font-family: 'Space Grotesk', system-ui, sans-serif;
+  font-family: 'Inter', system-ui, sans-serif;
   font-weight: 600;
   letter-spacing: -0.02em;
   line-height: 1.3;
@@ -702,9 +702,9 @@ textarea {
 /* Gradient mesh background */
 .gradient-mesh {
   background: 
-    radial-gradient(ellipse at 20% 30%, rgba(232, 49, 106, 0.08) 0%, transparent 50%),
-    radial-gradient(ellipse at 80% 70%, rgba(156, 126, 240, 0.06) 0%, transparent 50%),
-    radial-gradient(ellipse at 50% 50%, rgba(108, 142, 240, 0.04) 0%, transparent 50%);
+    radial-gradient(ellipse at 20% 30%, rgba(180, 227, 74, 0.06) 0%, transparent 50%),
+    radial-gradient(ellipse at 80% 70%, rgba(122, 184, 255, 0.05) 0%, transparent 50%),
+    radial-gradient(ellipse at 50% 50%, rgba(242, 201, 76, 0.03) 0%, transparent 50%);
 }
 
 /* Spotlight effect on hover */
@@ -739,9 +739,9 @@ textarea {
    ============================================ */
 
 /* Service type color coding */
-.service-web { --service-color: #6c8ef0; }
-.service-database { --service-color: #9c7ef0; }
-.service-worker { --service-color: #e8316a; }
+.service-web { --service-color: #7ab8ff; }
+.service-database { --service-color: #f2c94c; }
+.service-worker { --service-color: var(--accent-primary); }
 
 /* Status bar animation */
 @keyframes status-pulse {
@@ -909,7 +909,7 @@ textarea {
 
 .tab.active {
   color: #e8e9f0;
-  border-bottom-color: #e8316a;
+  border-bottom-color: var(--accent-primary);
 }
 
 .tab svg {
@@ -972,7 +972,7 @@ textarea {
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.7px;
-  color: #3dd68c;
+  color: #5ee6a0;
   text-transform: uppercase;
   display: inline-flex;
   align-items: center;
@@ -1018,7 +1018,7 @@ textarea {
   width: 30px;
   height: 30px;
   border-radius: 9px;
-  background: #e8316a;
+  background: var(--accent-primary);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1034,7 +1034,7 @@ textarea {
 .arrow-btn svg {
   width: 13px;
   height: 13px;
-  stroke: white;
+  stroke: var(--accent-on);
   fill: none;
   stroke-width: 2.5;
   stroke-linecap: round;
@@ -1133,7 +1133,7 @@ textarea {
   border-radius: 11px;
   border: none;
   background: var(--accent-primary);
-  color: white;
+  color: var(--accent-on);
   font-size: 13.5px;
   font-weight: 700;
   font-family: inherit;
@@ -1145,7 +1145,7 @@ textarea {
 }
 
 .btn-restart:hover {
-  background: #d12960;
+  background: #cdf06f;
 }
 
 .btn-restart.disabled {
@@ -1379,3 +1379,189 @@ textarea {
   animation: counter-flip 0.3s ease-out;
   transform-origin: bottom;
 }
+
+/* ============================================
+   VERTICE SYSTEM — lime-on-graphite primitives
+   ============================================ */
+
+.v-mono {
+  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Section header: `// LABEL` */
+.v-sect {
+  display: flex;
+  align-items: center;
+  font: 600 10px 'JetBrains Mono', monospace;
+  letter-spacing: 0.22em;
+  color: var(--text-tertiary);
+  margin-bottom: 13px;
+}
+.v-sect::before {
+  content: '//';
+  color: var(--accent-primary);
+  font-weight: 700;
+  margin-right: 8px;
+}
+.v-sect .v-sect-r {
+  margin-left: auto;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+  font-weight: 500;
+  text-transform: none;
+}
+
+/* Page heading with lime cursor */
+.v-title {
+  font-size: 24px;
+  font-weight: 800;
+  letter-spacing: -0.8px;
+  color: var(--text-primary);
+}
+.v-title .v-cursor { color: var(--accent-primary); font-weight: 400; }
+
+/* Pulsing live dot (lime) */
+.v-live {
+  width: 5.5px;
+  height: 5.5px;
+  border-radius: 50%;
+  background: var(--accent-primary);
+  box-shadow: 0 0 7px rgba(180, 227, 74, 0.8);
+  animation: v-pulse 2.4s infinite;
+  flex-shrink: 0;
+}
+@keyframes v-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
+
+/* Stat card: mono label + big tabular value + meter/spark */
+.v-stat {
+  background: var(--surface-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: 13px;
+  padding: 14px 17px 12px;
+  transition: border-color 0.15s;
+}
+.v-stat:hover { border-color: rgba(180, 227, 74, 0.2); }
+.v-stat .v-k {
+  display: flex; align-items: center; justify-content: space-between;
+  font: 600 9.5px 'JetBrains Mono', monospace; letter-spacing: 0.16em;
+  color: var(--text-tertiary);
+}
+.v-stat .v-v {
+  font: 500 28px/1.1 'JetBrains Mono', monospace;
+  letter-spacing: -1.2px; margin-top: 8px;
+  font-variant-numeric: tabular-nums; color: var(--text-primary);
+}
+.v-stat .v-v span { font-size: 13px; color: var(--text-tertiary); }
+.v-stat .v-d { font: 10.5px 'JetBrains Mono', monospace; color: var(--text-tertiary); margin-top: 2px; }
+.v-stat .v-d b { font-weight: 600; }
+
+/* Thin meter */
+.v-meter {
+  height: 4px; background: rgba(255,255,255,0.07); border-radius: 2px;
+  margin: 12px 0 7px; overflow: hidden;
+}
+.v-meter i { display: block; height: 100%; border-radius: 2px; background: var(--accent-primary); }
+.v-meter i.y { background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); }
+.v-meter i.r { background: linear-gradient(90deg, var(--accent-secondary), var(--error)); }
+
+/* Bar sparkline */
+.v-spark { display: flex; gap: 3px; align-items: flex-end; height: 22px; margin: 10px 0 6px; }
+.v-spark i {
+  flex: 1; border-radius: 1.5px;
+  background: linear-gradient(180deg, var(--accent-primary), rgba(180,227,74,0.1));
+  opacity: 0.7;
+}
+
+/* Project mini-canvas (dot grid + service tiles) */
+.v-mini {
+  position: relative; height: 104px; border-radius: 10px; overflow: hidden;
+  background: #0e1013; border: 1px solid rgba(255,255,255,0.04);
+  background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1.5px);
+  background-size: 14px 14px;
+}
+.v-mini .v-node {
+  position: absolute; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 9px;
+  background: var(--surface-card-hover); border: 1px solid rgba(255,255,255,0.09);
+  display: flex; align-items: center; justify-content: center; gap: 5px;
+  font: 700 9px 'JetBrains Mono', monospace; color: var(--text-secondary);
+}
+.v-mini .v-node .v-nd {
+  position: absolute; top: -2px; right: -2px; width: 7px; height: 7px;
+  border-radius: 50%; background: var(--success); border: 2px solid #0e1013;
+}
+.v-mini .v-node .v-nd.r { background: var(--error); }
+.v-mini .v-node .v-nd.y { background: var(--accent-secondary); }
+.v-mini .v-node .v-nd.off { background: var(--text-tertiary); }
+.v-mini .v-more {
+  position: absolute; width: 32px; height: 32px; border-radius: 9px;
+  border: 1px dashed rgba(255,255,255,0.16);
+  display: flex; align-items: center; justify-content: center;
+  font: 600 9px 'JetBrains Mono', monospace; color: var(--text-tertiary);
+}
+.v-mini .v-edge { position: absolute; height: 1px; background: rgba(255,255,255,0.12); }
+
+/* Lime primary button */
+.v-btn {
+  background: var(--accent-primary); color: var(--accent-on);
+  border: none; border-radius: 8px; padding: 9px 17px;
+  font: 700 12px 'JetBrains Mono', monospace; cursor: pointer;
+  transition: background 0.15s, transform 0.15s;
+  box-shadow: 0 2px 12px rgba(180, 227, 74, 0.22);
+}
+.v-btn:hover { background: var(--accent-primary); filter: brightness(1.1); transform: translateY(-1px); }
+.v-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+
+/* Ghost button */
+.v-btn-ghost {
+  background: var(--surface-card); color: var(--text-secondary);
+  border: 1px solid var(--border-subtle); border-radius: 8px; padding: 8px 16px;
+  font: 600 12px 'JetBrains Mono', monospace; cursor: pointer; transition: 0.15s;
+}
+.v-btn-ghost:hover { color: var(--text-primary); border-color: var(--border-default); }
+
+/* Env pill */
+.v-env {
+  font: 10px 'JetBrains Mono', monospace; letter-spacing: 0.1em;
+  color: var(--accent-primary); display: inline-flex; align-items: center; gap: 8px;
+}
+.v-env::before { content: ''; width: 5px; height: 5px; background: var(--accent-primary); }
+
+/* Table — mono body, quiet rows */
+.v-tbl {
+  background: var(--surface-card); border: 1px solid var(--border-subtle);
+  border-radius: 14px; overflow: hidden;
+}
+.v-tbl table { width: 100%; border-collapse: collapse; }
+.v-tbl th {
+  text-align: left; font: 600 9px 'JetBrains Mono', monospace; letter-spacing: 0.2em;
+  color: var(--text-tertiary); padding: 11px 18px; border-bottom: 1px solid var(--border-subtle);
+}
+.v-tbl td {
+  padding: 11.5px 18px; border-bottom: 1px solid rgba(255,255,255,0.035);
+  font: 11.5px 'JetBrains Mono', monospace; color: var(--text-secondary);
+}
+.v-tbl tbody tr:last-child td { border-bottom: none; }
+.v-tbl tbody tr { transition: background 0.12s; }
+.v-tbl tbody tr:hover td { background: rgba(180,227,74,0.025); }
+.v-tbl td.v-lead { color: var(--text-primary); font: 600 12.5px 'Inter', sans-serif; }
+
+/* Status pill */
+.v-st {
+  font: 600 9.5px 'JetBrains Mono', monospace; letter-spacing: 0.1em;
+  padding: 3px 9px; border-radius: 5px; display: inline-block;
+}
+.v-st-ok { background: var(--success-soft); color: var(--success); }
+.v-st-run { background: var(--info-soft); color: var(--info); }
+.v-st-warn { background: var(--warning-soft); color: var(--warning); }
+.v-st-fail { background: var(--error-soft); color: var(--error); }
+.v-st-off { background: rgba(255,255,255,0.06); color: var(--text-tertiary); }
+
+/* Ticker segments */
+.v-tick { display: flex; align-items: center; gap: 7px; color: var(--text-tertiary); }
+.v-tick b { color: var(--text-secondary); font-weight: 500; }
+.v-tick .sig { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
+.v-tick .sig.y { background: var(--accent-secondary); }
+.v-tick .sig.r { background: var(--error); }
+
+/* Rail active indicator handled via .nav-item.active::before */
diff --git a/app/frontend/src/shared/components/Button.tsx b/app/frontend/src/shared/components/Button.tsx
index 9f6f90f..643fea3 100644
--- a/app/frontend/src/shared/components/Button.tsx
+++ b/app/frontend/src/shared/components/Button.tsx
@@ -13,7 +13,7 @@ type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
 };
 
 const variantStyles: Record<ButtonVariant, string> = {
-  primary: 'text-white shadow-lg hover:shadow-xl hover:scale-[1.02] active:scale-[0.98]',
+  primary: 'text-[var(--accent-on)] shadow-lg hover:shadow-xl hover:scale-[1.02] active:scale-[0.98]',
   secondary: 'border border-[var(--border-subtle)] bg-[var(--surface-card)] text-[var(--text-primary)] hover:border-[var(--border-default)] hover:bg-[var(--surface-card-hover)] active:scale-[0.98]',
   ghost: 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--surface-muted)] active:scale-[0.98]',
   danger: 'border border-[var(--error-soft)] text-[var(--error)] hover:bg-[var(--error-soft)] hover:shadow-lg hover:shadow-[var(--error-glow)] active:scale-[0.98]',
@@ -56,7 +56,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           ${sizeStyles[size]}
           ${className}
         `}
-        style={variant === 'primary' ? { background: '#e8316a' } : undefined}
+        style={variant === 'primary' ? { background: 'var(--accent-primary)' } : undefined}
         {...props}
       >
         {loading ? (
diff --git a/app/frontend/src/shared/components/Charts.tsx b/app/frontend/src/shared/components/Charts.tsx
index db47f35..7f7a793 100644
--- a/app/frontend/src/shared/components/Charts.tsx
+++ b/app/frontend/src/shared/components/Charts.tsx
@@ -68,7 +68,7 @@ function gradientId(prefix: string, color: string, index = 0) {
 
 export function LineChart({
   data,
-  color = '#ff7043',
+  color = '#b4e34a',
   fillColor = 'transparent',
   height = 76,
   showDots = true,
@@ -96,7 +96,7 @@ export function LineChart({
 
 export function LineAreaChart({
   data,
-  color = '#e8316a',
+  color = 'var(--accent-primary)',
   fillOpacity = 0.15,
   height = 130,
 }: LineAreaChartProps) {
@@ -181,7 +181,7 @@ export function MultiLineChart({
 
 export function LineMetricChart({
   data,
-  color = '#ff7043',
+  color = '#b4e34a',
   fillOpacity = 0.15,
   height = 76,
   showArea = false,
@@ -204,8 +204,8 @@ export function DualLineChart({
   data1,
   data2,
   height = 58,
-  color1 = '#6c8ef0',
-  color2 = '#9c7ef0',
+  color1 = '#7ab8ff',
+  color2 = '#f2c94c',
   fillOpacity1 = 0.15,
   fillOpacity2 = 0.15,
 }: DualLineChartProps) {
@@ -222,7 +222,7 @@ export function DualLineChart({
 
 export function BarChart({
   data,
-  color = '#3dd68c',
+  color = '#5ee6a0',
   height = 128,
   gap = 4,
 }: BarChartProps) {
diff --git a/app/frontend/src/shared/components/DonutChart.tsx b/app/frontend/src/shared/components/DonutChart.tsx
index 21e61af..55d2039 100644
--- a/app/frontend/src/shared/components/DonutChart.tsx
+++ b/app/frontend/src/shared/components/DonutChart.tsx
@@ -17,7 +17,7 @@ export function DonutChart({
   percentage,
   size = 160,
   thickness = 16,
-  color = '#9c7ef0',
+  color = '#b4e34a',
   trackColor = 'rgba(255, 255, 255, 0.07)',
   segments = 28,
   gap = 0.048,
diff --git a/app/frontend/src/shared/components/EnhancedMetricCard.tsx b/app/frontend/src/shared/components/EnhancedMetricCard.tsx
index a502eb1..bbbd90e 100644
--- a/app/frontend/src/shared/components/EnhancedMetricCard.tsx
+++ b/app/frontend/src/shared/components/EnhancedMetricCard.tsx
@@ -30,9 +30,9 @@ export function EnhancedMetricCard({
   horizontal = false,
 }: EnhancedMetricCardProps) {
   const statusColors: Record<string, string> = {
-    good: '#3dd68c',
-    average: '#f0a040',
-    warning: '#ff7043',
+    good: '#5ee6a0',
+    average: '#f2c94c',
+    warning: '#f2c94c',
   };
 
   // Horizontal layout for cards like Active User
@@ -216,7 +216,7 @@ export function CacheMetricCard({
       </div>
 
       <div style={{ fontSize: 12, color: '#6b6e7d', marginTop: 4 }}>
-        <span style={{ color: '#f0a040', fontWeight: 700 }}>{Math.round(totalMB * 0.625)}MB Average</span> cached images and files
+        <span style={{ color: '#f2c94c', fontWeight: 700 }}>{Math.round(totalMB * 0.625)}MB Average</span> cached images and files
       </div>
 
       {/* Segmented Bar */}
@@ -319,7 +319,7 @@ export function PerformanceMetricCard({
   animationDelay = 0,
 }: PerformanceMetricCardProps) {
   const status = percentage >= 85 ? 'Good' : percentage >= 70 ? 'Average' : 'Warning';
-  const statusColor = percentage >= 85 ? '#3dd68c' : percentage >= 70 ? '#f0a040' : '#ff7043';
+  const statusColor = percentage >= 85 ? '#5ee6a0' : percentage >= 70 ? '#f2c94c' : '#ff6f5c';
 
   return (
     <div
@@ -363,14 +363,14 @@ export function PerformanceMetricCard({
           <div style={{ width: 134, height: 58, background: 'rgba(255,255,255,0.03)', borderRadius: 8 }} />
           
           <div style={{ display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'flex-end' }}>
-            <div className="speed-row" style={{ color: '#6c8ef0' }}>
+            <div className="speed-row" style={{ color: '#7ab8ff' }}>
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
                 <line x1="12" y1="19" x2="12" y2="5"/>
                 <polyline points="5 12 12 19 19 12"/>
               </svg>
               <span>{upSpeed}</span> Mbps
             </div>
-            <div className="speed-row" style={{ color: '#e8316a' }}>
+            <div className="speed-row" style={{ color: 'var(--accent-primary)' }}>
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
                 <line x1="12" y1="5" x2="12" y2="19"/>
                 <polyline points="19 12 12 5 5 12"/>
diff --git a/app/frontend/src/shared/components/MetricCard.tsx b/app/frontend/src/shared/components/MetricCard.tsx
index 56e8413..88bcc58 100644
--- a/app/frontend/src/shared/components/MetricCard.tsx
+++ b/app/frontend/src/shared/components/MetricCard.tsx
@@ -50,9 +50,9 @@ export function MetricCard({
   }, [animationDelay]);
 
   const statusColors: Record<string, string> = {
-    good: '#3dd68c',
-    average: '#f0a040',
-    warning: '#ff7043',
+    good: '#5ee6a0',
+    average: '#f2c94c',
+    warning: '#f2c94c',
   };
 
   // Horizontal layout for cards like Active User
diff --git a/containr.svg b/containr.svg
index e872de2..256a12a 100644
--- a/containr.svg
+++ b/containr.svg
@@ -1,12 +1,12 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
   <defs>
     <linearGradient id="bg" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#f4497f"/>
-      <stop offset="1" stop-color="#cf1d5b"/>
+      <stop offset="0" stop-color="#cdf06f"/>
+      <stop offset="1" stop-color="#7fb524"/>
     </linearGradient>
   </defs>
   <rect width="64" height="64" rx="15" fill="url(#bg)"/>
-  <g fill="none" stroke="#ffffff" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round">
+  <g fill="none" stroke="#131507" stroke-width="4.2" stroke-linecap="round" stroke-linejoin="round">
     <rect x="15" y="18" width="34" height="26" rx="4"/>
     <path d="M23 18v26M31 18v26M39 18v26"/>
     <path d="M20 51h24"/>
diff --git a/docs/design/explorations/01-midnight-ops.html b/docs/design/explorations/01-midnight-ops.html
new file mode 100644
index 0000000..491f8e3
--- /dev/null
+++ b/docs/design/explorations/01-midnight-ops.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8"><title>01 — Midnight Ops</title>
+<style>
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body { font-family:'Inter',system-ui,sans-serif; background:#0d0e12; color:#e8e9f0; display:flex; min-height:100vh; }
+  .rail { width:64px; border-right:1px solid rgba(255,255,255,.06); background:#101116; display:flex; flex-direction:column; align-items:center; padding:18px 0; gap:22px; }
+  .rail .mark { width:38px; height:38px; border-radius:11px; background:linear-gradient(135deg,#f4497f,#cf1d5b); display:flex; align-items:center; justify-content:center; }
+  .rail .ic { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#5c5f6e; }
+  .rail .ic.on { background:rgba(232,49,106,.14); color:#e8316a; }
+  main { flex:1; }
+  .topbar { display:flex; align-items:center; gap:14px; padding:12px 24px; border-bottom:1px solid rgba(255,255,255,.06); }
+  .search { background:#17181e; border:1px solid rgba(255,255,255,.06); border-radius:9px; padding:7px 14px; color:#6b6e7d; font-size:13px; width:280px; }
+  .btn-upgrade { margin-left:auto; background:#e8316a; color:#fff; border:none; border-radius:9px; padding:8px 18px; font-size:13px; font-weight:600; }
+  .crumb { padding:14px 24px 10px; font-size:13px; color:#6b6e7d; }
+  .crumb b { color:#9295a4; font-weight:500; }
+  .svc { display:flex; align-items:center; padding:0 24px 18px; gap:14px; }
+  .avatar { width:46px; height:46px; border-radius:13px; background:#e8316a; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; }
+  .svc h1 { font-size:20px; font-weight:800; letter-spacing:-.5px; }
+  .badge { display:inline-flex; align-items:center; gap:5px; background:rgba(61,214,140,.12); color:#3dd68c; font-size:10px; font-weight:700; padding:3px 9px; border-radius:20px; letter-spacing:.05em; }
+  .badge i { width:5px; height:5px; border-radius:50%; background:#3dd68c; }
+  .sub { font-size:12.5px; color:#6b6e7d; margin-top:4px; }
+  .acts { margin-left:auto; display:flex; gap:10px; }
+  .btn-stop { background:#f5f6f8; color:#0d0e12; border:none; border-radius:11px; padding:10px 20px; font-weight:700; font-size:13px; letter-spacing:.02em; }
+  .btn-restart { background:#e8316a; color:#fff; border:none; border-radius:11px; padding:10px 20px; font-weight:700; font-size:13px; }
+  .tabs { display:flex; gap:26px; padding:0 24px; border-bottom:1px solid rgba(255,255,255,.07); font-size:13.5px; }
+  .tab { padding:11px 2px; color:#6b6e7d; }
+  .tab.on { color:#e8e9f0; font-weight:600; border-bottom:2px solid #e8316a; }
+  .grid { padding:20px 24px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
+  .card { background:#17181e; border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:20px; display:flex; flex-direction:column; }
+  .card .hd { display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:14px; font-weight:600; }
+  .cicon { width:34px; height:34px; border-radius:9px; background:#1e1f27; border:1px solid rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center; color:#9295a4; font-size:15px; }
+  .big { font-size:38px; font-weight:900; letter-spacing:-1.5px; line-height:1; }
+  .meta { font-size:12px; color:#6b6e7d; margin-top:5px; }
+  .meta b { font-weight:700; } .g{color:#3dd68c}.a{color:#f0a040}
+  .segbar { display:flex; gap:5px; height:34px; margin-top:14px; }
+  .segbar div { border-radius:6px; }
+  .foot { margin-top:auto; padding-top:16px; display:flex; justify-content:space-between; align-items:center; }
+  .foot span { font-size:13px; color:#6b6e7d; font-weight:500; }
+  .arrow { width:30px; height:30px; border-radius:9px; background:#e8316a; display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; }
+  .legend { display:flex; gap:26px; margin-top:12px; font-size:12px; color:#6b6e7d; }
+  .legend i { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; }
+  .wide { grid-column:span 1; }
+  .bars { display:flex; align-items:flex-end; gap:6px; height:80px; margin-top:8px; }
+  .bars div { flex:1; background:linear-gradient(180deg,#e8316a,#e8316a33); border-radius:4px 4px 0 0; }
+  .speed { font-size:12px; color:#6b6e7d; display:flex; gap:6px; align-items:center; }
+</style></head><body>
+<nav class="rail">
+  <div class="mark"><svg width="20" height="20" viewBox="0 0 64 64"><g fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="5"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
+  <div class="ic">⌗</div><div class="ic">▦</div><div class="ic on">▤</div><div class="ic">◉</div><div class="ic">⚙</div>
+</nav>
+<main>
+  <div class="topbar"><div class="search">⌕ Search projects, builds, logs</div><button class="btn-upgrade">Upgrade</button></div>
+  <div class="crumb">‹ Servers / <b>api-gateway</b></div>
+  <div class="svc">
+    <div class="avatar">⏸</div>
+    <div><h1>api-gateway <span class="badge"><i></i>ACTIVE</span></h1><div class="sub">https://api.containr.dev ↗ &nbsp;·&nbsp; Project Information ›</div></div>
+    <div class="acts"><button class="btn-stop">◉ STOP</button><button class="btn-restart">↻ RESTART</button></div>
+  </div>
+  <div class="tabs"><div class="tab on">◮ Metrics</div><div class="tab">↧ Requests</div><div class="tab">⑃ APIs</div><div class="tab">⚙ Config</div></div>
+  <div class="grid">
+    <div class="card"><div class="hd"><div class="cicon">▣</div>CPU Usage</div><div class="big">12%</div><div class="meta"><b class="g">Good</b> Daily usage</div>
+      <svg viewBox="0 0 200 60" style="margin-top:14px;width:100%"><path d="M0 45 L18 42 L36 47 L54 40 L72 44 L90 36 L108 40 L126 30 L144 35 L162 22 L180 26 L200 14" fill="none" stroke="#ff8a5c" stroke-width="2"/><path d="M0 45 L18 42 L36 47 L54 40 L72 44 L90 36 L108 40 L126 30 L144 35 L162 22 L180 26 L200 14 V60 H0 Z" fill="url(#gg)" opacity=".6"/><defs><linearGradient id="gg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ff8a5c" stop-opacity=".25"/><stop offset="1" stop-color="#ff8a5c" stop-opacity="0"/></linearGradient></defs></svg>
+      <div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
+    <div class="card"><div class="hd"><div class="cicon">▤</div>RAM Usage</div><div class="big">65%</div><div class="meta"><b class="a">Average</b> Daily usage</div>
+      <svg viewBox="0 0 160 88" style="margin:10px auto 0;display:block"><path d="M14 80 A 66 66 0 0 1 146 80" fill="none" stroke="rgba(255,255,255,.07)" stroke-width="13"/><path d="M14 80 A 66 66 0 0 1 118 34" fill="none" stroke="#9c7ef0" stroke-width="13" stroke-dasharray="5 4" stroke-linecap="round"/><text x="80" y="66" text-anchor="middle" fill="#6b6e7d" font-size="9">USED</text><text x="80" y="80" text-anchor="middle" fill="#e8e9f0" font-size="12" font-weight="800">5.4 GB / 8GB</text></svg>
+      <div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
+    <div class="card"><div class="hd"><div class="cicon">🗑</div>Cache</div><div class="big">352 MB</div><div class="meta"><b style="color:#ff8a5c">220MB Average</b> cached images and files</div>
+      <div class="segbar"><div style="width:48%;background:#ff8a5c"></div><div style="width:20%;background:#9c7ef0"></div><div style="width:32%;background:rgba(255,255,255,.07)"></div></div>
+      <div class="legend"><span><i style="background:#ff8a5c"></i>Cache <b style="color:#e8e9f0">212 MB</b> 12%</span><span><i style="background:#9c7ef0"></i>Non-Cache <b style="color:#e8e9f0">85 MB</b> 4%</span><span><i style="background:#444"></i>Total <b style="color:#e8e9f0">1.75 GB</b></span></div>
+      <div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
+    <div class="card" style="grid-column:span 2"><div class="hd"><div class="cicon">⚇</div>Active Users</div><div class="big">475 K</div><div class="meta">User active right now</div>
+      <div class="bars"><div style="height:80%"></div><div style="height:55%"></div><div style="height:90%"></div><div style="height:62%"></div><div style="height:75%"></div><div style="height:40%"></div><div style="height:68%"></div><div style="height:85%"></div><div style="height:58%"></div><div style="height:72%"></div><div style="height:48%"></div><div style="height:66%"></div><div style="height:78%"></div><div style="height:52%"></div></div>
+      <div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
+    <div class="card"><div class="hd"><div class="cicon">✦</div>Performance</div><div class="big">89%</div><div class="meta"><b class="g">Good</b> Last scan today</div>
+      <div style="display:flex;flex-direction:column;gap:8px;margin-top:14px"><div class="speed"><span style="color:#6c8ef0">↓</span> 10.4 Mbps down</div><div class="speed"><span style="color:#e8316a">↑</span> 5.2 Mbps up</div></div>
+      <div class="foot"><span>Check Speed</span><div class="arrow">›</div></div></div>
+  </div>
+</main></body></html>
diff --git a/docs/design/explorations/02-terminal.html b/docs/design/explorations/02-terminal.html
new file mode 100644
index 0000000..66ab51d
--- /dev/null
+++ b/docs/design/explorations/02-terminal.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8"><title>02 — Terminal</title>
+<style>
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body { font-family:'JetBrains Mono','SF Mono',monospace; background:#0a0a0a; color:#d4d4d4; display:flex; min-height:100vh; font-size:13px; }
+  .rail { width:56px; border-right:1px solid #1f1f1f; display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:18px; }
+  .rail .mark { width:32px; height:32px; border:1px solid #4ade80; color:#4ade80; display:flex; align-items:center; justify-content:center; font-weight:700; }
+  .rail .ic { color:#404040; font-size:14px; } .rail .ic.on { color:#4ade80; }
+  main { flex:1; }
+  .topbar { display:flex; align-items:center; gap:14px; padding:10px 24px; border-bottom:1px solid #1f1f1f; }
+  .search { border:1px solid #262626; padding:6px 12px; color:#525252; width:300px; font-size:12px; }
+  .search::before { content:'$ '; color:#4ade80; }
+  .btn-upgrade { margin-left:auto; background:#4ade80; color:#0a0a0a; border:none; padding:7px 16px; font-family:inherit; font-size:12px; font-weight:700; }
+  .crumb { padding:12px 24px 8px; font-size:12px; color:#525252; }
+  .crumb b { color:#a3a3a3; font-weight:400; }
+  .svc { display:flex; align-items:center; padding:0 24px 16px; gap:14px; }
+  .avatar { width:42px; height:42px; border:1px solid #4ade80; color:#4ade80; display:flex; align-items:center; justify-content:center; font-weight:700; }
+  .svc h1 { font-size:17px; font-weight:700; }
+  .badge { color:#4ade80; font-size:11px; border:1px solid #4ade8033; padding:2px 8px; }
+  .badge::before { content:'● '; }
+  .sub { font-size:11px; color:#525252; margin-top:4px; }
+  .acts { margin-left:auto; display:flex; gap:8px; }
+  .btn-stop { background:transparent; color:#d4d4d4; border:1px solid #404040; padding:9px 18px; font-family:inherit; font-size:12px; font-weight:700; }
+  .btn-restart { background:#4ade80; color:#0a0a0a; border:none; padding:9px 18px; font-family:inherit; font-size:12px; font-weight:700; }
+  .tabs { display:flex; gap:22px; padding:0 24px; border-bottom:1px solid #1f1f1f; font-size:12px; }
+  .tab { padding:10px 2px; color:#525252; }
+  .tab.on { color:#4ade80; border-bottom:1px solid #4ade80; }
+  .grid { padding:18px 24px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
+  .card { border:1px solid #1f1f1f; padding:18px; display:flex; flex-direction:column; background:#0e0e0e; }
+  .card .hd { display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:12px; color:#a3a3a3; }
+  .card .hd::before { content:'▣'; color:#4ade80; font-size:11px; }
+  .big { font-size:30px; font-weight:700; color:#e5e5e5; }
+  .meta { font-size:11px; color:#525252; margin-top:4px; }
+  .g{color:#4ade80}.a{color:#fbbf24}
+  .segbar { display:flex; gap:3px; height:26px; margin-top:14px; }
+  .legend { display:flex; gap:20px; margin-top:12px; font-size:11px; color:#525252; }
+  .legend b { color:#d4d4d4; font-weight:400; }
+  .foot { margin-top:auto; padding-top:14px; display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#525252; }
+  .foot .arrow { color:#4ade80; }
+  .bars { display:flex; align-items:flex-end; gap:4px; height:70px; margin-top:10px; }
+  .bars div { flex:1; background:#4ade80; opacity:.85; }
+  .speed { font-size:11px; color:#525252; display:flex; gap:6px; }
+</style></head><body>
+<nav class="rail"><div class="mark">C</div><div class="ic">~</div><div class="ic">▦</div><div class="ic on">▤</div><div class="ic">◉</div><div class="ic">⚙</div></nav>
+<main>
+  <div class="topbar"><div class="search">search projects, builds, logs_</div><button class="btn-upgrade">upgrade --pro</button></div>
+  <div class="crumb">~/servers/<b>api-gateway</b></div>
+  <div class="svc">
+    <div class="avatar">AG</div>
+    <div><h1>api-gateway <span class="badge">ACTIVE</span></h1><div class="sub">→ https://api.containr.dev &nbsp;·&nbsp; ./project-info</div></div>
+    <div class="acts"><button class="btn-stop">[ stop ]</button><button class="btn-restart">[ restart ]</button></div>
+  </div>
+  <div class="tabs"><div class="tab on">metrics</div><div class="tab">requests</div><div class="tab">apis</div><div class="tab">config</div></div>
+  <div class="grid">
+    <div class="card"><div class="hd">cpu_usage</div><div class="big">12%</div><div class="meta"><span class="g">[OK]</span> daily usage</div>
+      <svg viewBox="0 0 200 55" style="margin-top:12px;width:100%"><path d="M0 42 L18 40 L36 44 L54 38 L72 41 L90 33 L108 37 L126 28 L144 32 L162 20 L180 24 L200 12" fill="none" stroke="#4ade80" stroke-width="1.5"/></svg>
+      <div class="foot"><span>[ details ]</span><span class="arrow">→</span></div></div>
+    <div class="card"><div class="hd">ram_usage</div><div class="big">65%</div><div class="meta"><span class="a">[WARN]</span> daily usage</div>
+      <svg viewBox="0 0 160 80" style="margin:8px auto 0;display:block"><path d="M14 72 A 62 62 0 0 1 146 72" fill="none" stroke="#262626" stroke-width="10"/><path d="M14 72 A 62 62 0 0 1 115 32" fill="none" stroke="#fbbf24" stroke-width="10" stroke-dasharray="4 3"/><text x="80" y="58" text-anchor="middle" fill="#525252" font-size="8">USED</text><text x="80" y="72" text-anchor="middle" fill="#d4d4d4" font-size="11" font-weight="700">5.4G/8G</text></svg>
+      <div class="foot"><span>[ details ]</span><span class="arrow">→</span></div></div>
+    <div class="card"><div class="hd">cache</div><div class="big">352M</div><div class="meta"><span class="a">220M avg</span> cached images/files</div>
+      <div class="segbar"><div style="width:48%;background:#4ade80"></div><div style="width:20%;background:#fbbf24"></div><div style="width:32%;background:#1f1f1f"></div></div>
+      <div class="legend"><span>cache <b>212M</b></span><span>other <b>85M</b></span><span>total <b>1.75G</b></span></div>
+      <div class="foot"><span>[ details ]</span><span class="arrow">→</span></div></div>
+    <div class="card" style="grid-column:span 2"><div class="hd">active_users</div><div class="big">475,231</div><div class="meta">users online right now</div>
+      <div class="bars"><div style="height:80%"></div><div style="height:55%"></div><div style="height:90%"></div><div style="height:62%"></div><div style="height:75%"></div><div style="height:40%"></div><div style="height:68%"></div><div style="height:85%"></div><div style="height:58%"></div><div style="height:72%"></div><div style="height:48%"></div><div style="height:66%"></div><div style="height:78%"></div><div style="height:52%"></div></div>
+      <div class="foot"><span>[ details ]</span><span class="arrow">→</span></div></div>
+    <div class="card"><div class="hd">performance</div><div class="big">89%</div><div class="meta"><span class="g">[OK]</span> last scan today</div>
+      <div style="display:flex;flex-direction:column;gap:6px;margin-top:12px"><div class="speed">↓ 10.4 Mbps</div><div class="speed">↑ 5.2 Mbps</div></div>
+      <div class="foot"><span>[ check speed ]</span><span class="arrow">→</span></div></div>
+  </div>
+</main></body></html>
diff --git a/docs/design/explorations/03-aurora-glass.html b/docs/design/explorations/03-aurora-glass.html
new file mode 100644
index 0000000..e0b93cd
--- /dev/null
+++ b/docs/design/explorations/03-aurora-glass.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8"><title>03 — Aurora Glass</title>
+<style>
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body { font-family:'Inter',system-ui,sans-serif; color:#eef0ff; display:flex; min-height:100vh;
+    background:radial-gradient(1200px 800px at 15% -10%, #3b2a6e 0%, transparent 55%),
+               radial-gradient(1000px 700px at 90% 10%, #6e1f4a 0%, transparent 55%),
+               radial-gradient(900px 900px at 50% 110%, #1f3a5e 0%, transparent 55%), #0b0d18; }
+  .rail { width:68px; display:flex; flex-direction:column; align-items:center; padding:18px 0; gap:20px; }
+  .rail .mark { width:40px; height:40px; border-radius:14px; background:linear-gradient(135deg,#ff5c8a,#a06cff); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 24px rgba(255,92,138,.4); }
+  .rail .ic { width:40px; height:40px; border-radius:13px; display:flex; align-items:center; justify-content:center; color:rgba(238,240,255,.35); background:rgba(255,255,255,.04); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.07); }
+  .rail .ic.on { background:linear-gradient(135deg,rgba(255,92,138,.25),rgba(160,108,255,.25)); color:#fff; border-color:rgba(255,140,180,.3); }
+  main { flex:1; padding:0 8px; }
+  .topbar { display:flex; align-items:center; gap:14px; padding:16px 24px 4px; }
+  .search { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09); border-radius:14px; padding:9px 16px; color:rgba(238,240,255,.5); font-size:13px; width:280px; backdrop-filter:blur(12px); }
+  .btn-upgrade { margin-left:auto; background:linear-gradient(135deg,#ff5c8a,#a06cff); color:#fff; border:none; border-radius:13px; padding:9px 20px; font-size:13px; font-weight:600; box-shadow:0 4px 20px rgba(200,80,160,.35); }
+  .crumb { padding:14px 24px 8px; font-size:13px; color:rgba(238,240,255,.45); }
+  .crumb b { color:rgba(238,240,255,.8); font-weight:500; }
+  .svc { display:flex; align-items:center; padding:0 24px 20px; gap:14px; }
+  .avatar { width:50px; height:50px; border-radius:16px; background:linear-gradient(135deg,#ff5c8a,#a06cff); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:19px; box-shadow:0 6px 24px rgba(255,92,138,.35); }
+  .svc h1 { font-size:21px; font-weight:700; letter-spacing:-.4px; }
+  .badge { display:inline-flex; align-items:center; gap:5px; background:rgba(80,227,194,.14); color:#50e3c2; font-size:10px; font-weight:700; padding:3px 10px; border-radius:20px; }
+  .badge i { width:5px; height:5px; border-radius:50%; background:#50e3c2; box-shadow:0 0 8px #50e3c2; }
+  .sub { font-size:12.5px; color:rgba(238,240,255,.45); margin-top:4px; }
+  .acts { margin-left:auto; display:flex; gap:10px; }
+  .btn-stop { background:rgba(255,255,255,.09); color:#eef0ff; border:1px solid rgba(255,255,255,.12); border-radius:13px; padding:10px 20px; font-weight:600; font-size:13px; backdrop-filter:blur(10px); }
+  .btn-restart { background:linear-gradient(135deg,#ff5c8a,#a06cff); color:#fff; border:none; border-radius:13px; padding:10px 20px; font-weight:700; font-size:13px; box-shadow:0 4px 20px rgba(200,80,160,.35); }
+  .tabs { display:flex; gap:8px; padding:0 24px 18px; font-size:13px; }
+  .tab { padding:8px 16px; color:rgba(238,240,255,.5); border-radius:11px; }
+  .tab.on { color:#fff; font-weight:600; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); }
+  .grid { padding:0 24px 24px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
+  .card { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:20px; padding:20px; display:flex; flex-direction:column; backdrop-filter:blur(18px); box-shadow:0 8px 32px rgba(0,0,0,.25); }
+  .card .hd { display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:13.5px; font-weight:600; }
+  .cicon { width:34px; height:34px; border-radius:11px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.09); display:flex; align-items:center; justify-content:center; font-size:14px; }
+  .big { font-size:36px; font-weight:800; letter-spacing:-1.2px; line-height:1; }
+  .meta { font-size:12px; color:rgba(238,240,255,.45); margin-top:5px; }
+  .meta b { font-weight:600; } .g{color:#50e3c2}.a{color:#fbbf24}
+  .segbar { display:flex; gap:5px; height:32px; margin-top:14px; }
+  .segbar div { border-radius:9px; }
+  .foot { margin-top:auto; padding-top:16px; display:flex; justify-content:space-between; align-items:center; }
+  .foot span { font-size:13px; color:rgba(238,240,255,.5); font-weight:500; }
+  .arrow { width:30px; height:30px; border-radius:10px; background:linear-gradient(135deg,#ff5c8a,#a06cff); display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; box-shadow:0 3px 14px rgba(200,80,160,.4); }
+  .legend { display:flex; gap:24px; margin-top:12px; font-size:12px; color:rgba(238,240,255,.5); }
+  .legend i { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; }
+  .legend b { color:#eef0ff; font-weight:600; }
+  .bars { display:flex; align-items:flex-end; gap:6px; height:76px; margin-top:10px; }
+  .bars div { flex:1; background:linear-gradient(180deg,#ff5c8a,#a06cff88); border-radius:5px 5px 0 0; }
+  .speed { font-size:12px; color:rgba(238,240,255,.5); display:flex; gap:6px; align-items:center; }
+</style></head><body>
+<nav class="rail">
+  <div class="mark"><svg width="20" height="20" viewBox="0 0 64 64"><g fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="6"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
+  <div class="ic">⌗</div><div class="ic">▦</div><div class="ic on">▤</div><div class="ic">◉</div><div class="ic">⚙</div>
+</nav>
+<main>
+  <div class="topbar"><div class="search">⌕ Search projects, builds, logs</div><button class="btn-upgrade">Upgrade</button></div>
+  <div class="crumb">‹ Servers / <b>api-gateway</b></div>
+  <div class="svc">
+    <div class="avatar">⏸</div>
+    <div><h1>api-gateway <span class="badge"><i></i>ACTIVE</span></h1><div class="sub">https://api.containr.dev ↗ &nbsp;·&nbsp; Project Information ›</div></div>
+    <div class="acts"><button class="btn-stop">◉ STOP</button><button class="btn-restart">↻ RESTART</button></div>
+  </div>
+  <div class="tabs"><div class="tab on">Metrics</div><div class="tab">Requests</div><div class="tab">APIs</div><div class="tab">Config</div></div>
+  <div class="grid">
+    <div class="card"><div class="hd"><div class="cicon">▣</div>CPU Usage</div><div class="big">12%</div><div class="meta"><b class="g">Good</b> · Daily usage</div>
+      <svg viewBox="0 0 200 60" style="margin-top:14px;width:100%"><path d="M0 45 L18 42 L36 47 L54 40 L72 44 L90 36 L108 40 L126 30 L144 35 L162 22 L180 26 L200 14" fill="none" stroke="#ff9a6c" stroke-width="2.5" stroke-linecap="round"/><path d="M0 45 L18 42 L36 47 L54 40 L72 44 L90 36 L108 40 L126 30 L144 35 L162 22 L180 26 L200 14 V60 H0 Z" fill="url(#gg)"/><defs><linearGradient id="gg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ff9a6c" stop-opacity=".3"/><stop offset="1" stop-color="#ff9a6c" stop-opacity="0"/></linearGradient></defs></svg>
+      <div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
+    <div class="card"><div class="hd"><div class="cicon">▤</div>RAM Usage</div><div class="big">65%</div><div class="meta"><b class="a">Average</b> · Daily usage</div>
+      <svg viewBox="0 0 160 88" style="margin:10px auto 0;display:block"><defs><linearGradient id="ram" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#a06cff"/><stop offset="1" stop-color="#ff5c8a"/></linearGradient></defs><path d="M14 80 A 66 66 0 0 1 146 80" fill="none" stroke="rgba(255,255,255,.08)" stroke-width="13"/><path d="M14 80 A 66 66 0 0 1 118 34" fill="none" stroke="url(#ram)" stroke-width="13" stroke-dasharray="5 4" stroke-linecap="round"/><text x="80" y="66" text-anchor="middle" fill="rgba(238,240,255,.45)" font-size="9">USED</text><text x="80" y="80" text-anchor="middle" fill="#eef0ff" font-size="12" font-weight="800">5.4 GB / 8GB</text></svg>
+      <div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
+    <div class="card"><div class="hd"><div class="cicon">🗑</div>Cache</div><div class="big">352 MB</div><div class="meta"><b style="color:#ff9a6c">220MB Average</b> · cached images and files</div>
+      <div class="segbar"><div style="width:48%;background:linear-gradient(135deg,#ff9a6c,#ff5c8a)"></div><div style="width:20%;background:linear-gradient(135deg,#a06cff,#6c8ef0)"></div><div style="width:32%;background:rgba(255,255,255,.08)"></div></div>
+      <div class="legend"><span><i style="background:#ff9a6c"></i>Cache <b>212 MB</b> 12%</span><span><i style="background:#a06cff"></i>Non-Cache <b>85 MB</b> 4%</span><span><i style="background:rgba(255,255,255,.25)"></i>Total <b>1.75 GB</b></span></div>
+      <div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
+    <div class="card" style="grid-column:span 2"><div class="hd"><div class="cicon">⚇</div>Active Users</div><div class="big">475 K</div><div class="meta">User active right now</div>
+      <div class="bars"><div style="height:80%"></div><div style="height:55%"></div><div style="height:90%"></div><div style="height:62%"></div><div style="height:75%"></div><div style="height:40%"></div><div style="height:68%"></div><div style="height:85%"></div><div style="height:58%"></div><div style="height:72%"></div><div style="height:48%"></div><div style="height:66%"></div><div style="height:78%"></div><div style="height:52%"></div></div>
+      <div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
+    <div class="card"><div class="hd"><div class="cicon">✦</div>Performance</div><div class="big">89%</div><div class="meta"><b class="g">Good</b> · Last scan today</div>
+      <div style="display:flex;flex-direction:column;gap:8px;margin-top:14px"><div class="speed"><span style="color:#6c8ef0">↓</span> 10.4 Mbps down</div><div class="speed"><span style="color:#ff5c8a">↑</span> 5.2 Mbps up</div></div>
+      <div class="foot"><span>Check Speed</span><div class="arrow">›</div></div></div>
+  </div>
+</main></body></html>
diff --git a/docs/design/explorations/04-paper-ops.html b/docs/design/explorations/04-paper-ops.html
new file mode 100644
index 0000000..55ec4aa
--- /dev/null
+++ b/docs/design/explorations/04-paper-ops.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8"><title>04 — Paper Ops (Light)</title>
+<style>
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body { font-family:'Inter',system-ui,sans-serif; background:#f2f0ea; color:#17171c; display:flex; min-height:100vh; }
+  .rail { width:64px; border-right:1.5px solid #17171c; background:#faf9f6; display:flex; flex-direction:column; align-items:center; padding:18px 0; gap:20px; }
+  .rail .mark { width:38px; height:38px; border-radius:11px; background:#e8316a; border:1.5px solid #17171c; box-shadow:3px 3px 0 #17171c; display:flex; align-items:center; justify-content:center; }
+  .rail .ic { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#8a8a92; }
+  .rail .ic.on { background:#fff; color:#e8316a; border:1.5px solid #17171c; box-shadow:3px 3px 0 #17171c; }
+  main { flex:1; }
+  .topbar { display:flex; align-items:center; gap:14px; padding:12px 24px; border-bottom:1.5px solid #17171c; background:#faf9f6; }
+  .search { background:#fff; border:1.5px solid #17171c; border-radius:9px; padding:7px 14px; color:#8a8a92; font-size:13px; width:280px; }
+  .btn-upgrade { margin-left:auto; background:#e8316a; color:#fff; border:1.5px solid #17171c; border-radius:9px; padding:8px 18px; font-size:13px; font-weight:700; box-shadow:3px 3px 0 #17171c; }
+  .crumb { padding:14px 24px 10px; font-size:13px; color:#8a8a92; }
+  .crumb b { color:#17171c; font-weight:600; }
+  .svc { display:flex; align-items:center; padding:0 24px 18px; gap:14px; }
+  .avatar { width:46px; height:46px; border-radius:13px; background:#e8316a; border:1.5px solid #17171c; box-shadow:3px 3px 0 #17171c; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; color:#fff; }
+  .svc h1 { font-size:20px; font-weight:800; letter-spacing:-.5px; }
+  .badge { display:inline-flex; align-items:center; gap:5px; background:#d9f5e5; color:#0d7a45; font-size:10px; font-weight:800; padding:3px 9px; border-radius:4px; border:1.5px solid #17171c; letter-spacing:.05em; }
+  .sub { font-size:12.5px; color:#8a8a92; margin-top:4px; }
+  .sub a { color:#17171c; }
+  .acts { margin-left:auto; display:flex; gap:10px; }
+  .btn-stop { background:#fff; color:#17171c; border:1.5px solid #17171c; border-radius:11px; padding:10px 20px; font-weight:800; font-size:13px; box-shadow:3px 3px 0 #17171c; }
+  .btn-restart { background:#e8316a; color:#fff; border:1.5px solid #17171c; border-radius:11px; padding:10px 20px; font-weight:800; font-size:13px; box-shadow:3px 3px 0 #17171c; }
+  .tabs { display:flex; gap:24px; padding:0 24px; border-bottom:1.5px solid #17171c; font-size:13.5px; }
+  .tab { padding:11px 2px; color:#8a8a92; font-weight:600; }
+  .tab.on { color:#17171c; border-bottom:3px solid #e8316a; }
+  .grid { padding:20px 24px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
+  .card { background:#fff; border:1.5px solid #17171c; border-radius:14px; padding:20px; display:flex; flex-direction:column; box-shadow:4px 4px 0 rgba(23,23,28,.9); }
+  .card .hd { display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:14px; font-weight:700; }
+  .cicon { width:34px; height:34px; border-radius:9px; background:#f2f0ea; border:1.5px solid #17171c; display:flex; align-items:center; justify-content:center; font-size:15px; }
+  .big { font-size:38px; font-weight:900; letter-spacing:-1.5px; line-height:1; }
+  .meta { font-size:12px; color:#8a8a92; margin-top:5px; }
+  .meta b { font-weight:800; } .g{color:#0d7a45}.a{color:#c47a00}
+  .segbar { display:flex; gap:5px; height:34px; margin-top:14px; }
+  .segbar div { border:1.5px solid #17171c; border-radius:6px; }
+  .foot { margin-top:auto; padding-top:16px; display:flex; justify-content:space-between; align-items:center; }
+  .foot span { font-size:13px; color:#8a8a92; font-weight:600; }
+  .arrow { width:30px; height:30px; border-radius:9px; background:#e8316a; border:1.5px solid #17171c; display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; font-weight:800; box-shadow:2px 2px 0 #17171c; }
+  .legend { display:flex; gap:26px; margin-top:12px; font-size:12px; color:#8a8a92; }
+  .legend i { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:6px; border:1.5px solid #17171c; }
+  .legend b { color:#17171c; }
+  .bars { display:flex; align-items:flex-end; gap:6px; height:80px; margin-top:8px; }
+  .bars div { flex:1; background:#e8316a; border:1.5px solid #17171c; border-radius:3px 3px 0 0; }
+  .speed { font-size:12px; color:#8a8a92; display:flex; gap:6px; align-items:center; font-weight:600; }
+</style></head><body>
+<nav class="rail">
+  <div class="mark"><svg width="20" height="20" viewBox="0 0 64 64"><g fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="5"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
+  <div class="ic">⌗</div><div class="ic">▦</div><div class="ic on">▤</div><div class="ic">◉</div><div class="ic">⚙</div>
+</nav>
+<main>
+  <div class="topbar"><div class="search">⌕ Search projects, builds, logs</div><button class="btn-upgrade">Upgrade</button></div>
+  <div class="crumb">‹ Servers / <b>api-gateway</b></div>
+  <div class="svc">
+    <div class="avatar">⏸</div>
+    <div><h1>api-gateway <span class="badge">● ACTIVE</span></h1><div class="sub"><a href="#">https://api.containr.dev ↗</a> &nbsp;·&nbsp; Project Information ›</div></div>
+    <div class="acts"><button class="btn-stop">◉ STOP</button><button class="btn-restart">↻ RESTART</button></div>
+  </div>
+  <div class="tabs"><div class="tab on">◮ Metrics</div><div class="tab">↧ Requests</div><div class="tab">⑃ APIs</div><div class="tab">⚙ Config</div></div>
+  <div class="grid">
+    <div class="card"><div class="hd"><div class="cicon">▣</div>CPU Usage</div><div class="big">12%</div><div class="meta"><b class="g">Good</b> · Daily usage</div>
+      <svg viewBox="0 0 200 60" style="margin-top:14px;width:100%"><path d="M0 45 L18 42 L36 47 L54 40 L72 44 L90 36 L108 40 L126 30 L144 35 L162 22 L180 26 L200 14" fill="none" stroke="#ff8a5c" stroke-width="2.5"/><path d="M0 45 L18 42 L36 47 L54 40 L72 44 L90 36 L108 40 L126 30 L144 35 L162 22 L180 26 L200 14 V60 H0 Z" fill="#ff8a5c" opacity=".12"/></svg>
+      <div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
+    <div class="card"><div class="hd"><div class="cicon">▤</div>RAM Usage</div><div class="big">65%</div><div class="meta"><b class="a">Average</b> · Daily usage</div>
+      <svg viewBox="0 0 160 88" style="margin:10px auto 0;display:block"><path d="M14 80 A 66 66 0 0 1 146 80" fill="none" stroke="#e3e0d8" stroke-width="13"/><path d="M14 80 A 66 66 0 0 1 118 34" fill="none" stroke="#9c7ef0" stroke-width="13" stroke-dasharray="5 4" stroke-linecap="round"/><text x="80" y="66" text-anchor="middle" fill="#8a8a92" font-size="9">USED</text><text x="80" y="80" text-anchor="middle" fill="#17171c" font-size="12" font-weight="800">5.4 GB / 8GB</text></svg>
+      <div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
+    <div class="card"><div class="hd"><div class="cicon">🗑</div>Cache</div><div class="big">352 MB</div><div class="meta"><b style="color:#ff6a3c">220MB Average</b> cached images and files</div>
+      <div class="segbar"><div style="width:48%;background:#ff8a5c"></div><div style="width:20%;background:#9c7ef0"></div><div style="width:32%;background:#e3e0d8"></div></div>
+      <div class="legend"><span><i style="background:#ff8a5c"></i>Cache <b>212 MB</b> 12%</span><span><i style="background:#9c7ef0"></i>Non-Cache <b>85 MB</b> 4%</span><span><i style="background:#e3e0d8"></i>Total <b>1.75 GB</b></span></div>
+      <div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
+    <div class="card" style="grid-column:span 2"><div class="hd"><div class="cicon">⚇</div>Active Users</div><div class="big">475 K</div><div class="meta">User active right now</div>
+      <div class="bars"><div style="height:80%"></div><div style="height:55%"></div><div style="height:90%"></div><div style="height:62%"></div><div style="height:75%"></div><div style="height:40%"></div><div style="height:68%"></div><div style="height:85%"></div><div style="height:58%"></div><div style="height:72%"></div><div style="height:48%"></div><div style="height:66%"></div><div style="height:78%"></div><div style="height:52%"></div></div>
+      <div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
+    <div class="card"><div class="hd"><div class="cicon">✦</div>Performance</div><div class="big">89%</div><div class="meta"><b class="g">Good</b> · Last scan today</div>
+      <div style="display:flex;flex-direction:column;gap:8px;margin-top:14px"><div class="speed"><span style="color:#6c8ef0">↓</span> 10.4 Mbps down</div><div class="speed"><span style="color:#e8316a">↑</span> 5.2 Mbps up</div></div>
+      <div class="foot"><span>Check Speed</span><div class="arrow">›</div></div></div>
+  </div>
+</main></body></html>
diff --git a/docs/design/explorations/05-orbit-slate.html b/docs/design/explorations/05-orbit-slate.html
new file mode 100644
index 0000000..d6155db
--- /dev/null
+++ b/docs/design/explorations/05-orbit-slate.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8"><title>05 — Orbit Slate</title>
+<style>
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body { font-family:'Inter',system-ui,sans-serif; background:#0f1420; color:#e2e8f2; display:flex; min-height:100vh; }
+  .rail { width:66px; border-right:1px solid rgba(148,163,184,.1); background:#0c101a; display:flex; flex-direction:column; align-items:center; padding:18px 0; gap:20px; }
+  .rail .mark { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#22d3ee,#6366f1); display:flex; align-items:center; justify-content:center; box-shadow:0 0 20px rgba(34,211,238,.35); }
+  .rail .ic { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#475569; font-size:15px; }
+  .rail .ic.on { color:#22d3ee; background:rgba(34,211,238,.1); }
+  main { flex:1; }
+  .topbar { display:flex; align-items:center; gap:14px; padding:12px 24px; border-bottom:1px solid rgba(148,163,184,.1); }
+  .search { background:#151b2a; border:1px solid rgba(148,163,184,.12); border-radius:999px; padding:7px 16px; color:#64748b; font-size:13px; width:300px; }
+  .btn-upgrade { margin-left:auto; background:transparent; color:#22d3ee; border:1px solid rgba(34,211,238,.4); border-radius:999px; padding:7px 18px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
+  .crumb { padding:14px 24px 10px; font-size:11px; color:#64748b; letter-spacing:.14em; text-transform:uppercase; }
+  .crumb b { color:#94a3b8; font-weight:600; }
+  .svc { display:flex; align-items:center; padding:0 24px 18px; gap:14px; }
+  .avatar { width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,#22d3ee,#6366f1); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px; box-shadow:0 0 22px rgba(34,211,238,.3); }
+  .svc h1 { font-size:19px; font-weight:700; letter-spacing:-.3px; }
+  .badge { display:inline-flex; align-items:center; gap:5px; background:rgba(52,211,153,.1); color:#34d399; font-size:9px; font-weight:700; padding:3px 10px; border-radius:999px; letter-spacing:.12em; border:1px solid rgba(52,211,153,.25); }
+  .badge i { width:5px; height:5px; border-radius:50%; background:#34d399; box-shadow:0 0 6px #34d399; }
+  .sub { font-size:12px; color:#64748b; margin-top:4px; }
+  .acts { margin-left:auto; display:flex; gap:10px; }
+  .btn-stop { background:transparent; color:#e2e8f2; border:1px solid rgba(148,163,184,.3); border-radius:999px; padding:9px 20px; font-weight:600; font-size:12px; letter-spacing:.08em; }
+  .btn-restart { background:linear-gradient(135deg,#22d3ee,#6366f1); color:#fff; border:none; border-radius:999px; padding:9px 20px; font-weight:700; font-size:12px; letter-spacing:.08em; box-shadow:0 0 18px rgba(34,211,238,.3); }
+  .tabs { display:flex; gap:26px; padding:0 24px; border-bottom:1px solid rgba(148,163,184,.1); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
+  .tab { padding:11px 2px; color:#64748b; }
+  .tab.on { color:#22d3ee; font-weight:700; border-bottom:2px solid #22d3ee; }
+  .grid { padding:20px 24px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
+  .card { background:#131a29; border:1px solid rgba(148,163,184,.1); border-radius:14px; padding:20px; display:flex; flex-direction:column; }
+  .card .hd { display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#94a3b8; }
+  .cicon { width:32px; height:32px; border-radius:50%; background:rgba(34,211,238,.08); border:1px solid rgba(34,211,238,.18); display:flex; align-items:center; justify-content:center; color:#22d3ee; font-size:13px; }
+  .big { font-size:36px; font-weight:800; letter-spacing:-1.2px; line-height:1; }
+  .meta { font-size:11px; color:#64748b; margin-top:5px; letter-spacing:.04em; }
+  .meta b { font-weight:700; } .g{color:#34d399}.a{color:#fbbf24}
+  .segbar { display:flex; gap:4px; height:30px; margin-top:14px; }
+  .segbar div { border-radius:999px; }
+  .foot { margin-top:auto; padding-top:16px; display:flex; justify-content:space-between; align-items:center; }
+  .foot span { font-size:12px; color:#64748b; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
+  .arrow { width:28px; height:28px; border-radius:50%; border:1px solid rgba(34,211,238,.4); display:flex; align-items:center; justify-content:center; color:#22d3ee; font-size:14px; }
+  .legend { display:flex; gap:24px; margin-top:12px; font-size:11px; color:#64748b; }
+  .legend i { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; }
+  .legend b { color:#e2e8f2; font-weight:600; }
+  .bars { display:flex; align-items:flex-end; gap:5px; height:76px; margin-top:10px; }
+  .bars div { flex:1; background:linear-gradient(180deg,#22d3ee,#6366f1); border-radius:3px; opacity:.85; }
+  .speed { font-size:11px; color:#64748b; display:flex; gap:6px; align-items:center; letter-spacing:.05em; }
+</style></head><body>
+<nav class="rail">
+  <div class="mark"><svg width="19" height="19" viewBox="0 0 64 64"><g fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="6"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
+  <div class="ic">⌗</div><div class="ic">▦</div><div class="ic on">▤</div><div class="ic">◉</div><div class="ic">⚙</div>
+</nav>
+<main>
+  <div class="topbar"><div class="search">⌕ Search projects, builds, logs</div><button class="btn-upgrade">Upgrade</button></div>
+  <div class="crumb">Servers / <b>api-gateway</b></div>
+  <div class="svc">
+    <div class="avatar">⏸</div>
+    <div><h1>api-gateway <span class="badge"><i></i>ACTIVE</span></h1><div class="sub">https://api.containr.dev ↗ &nbsp;·&nbsp; Project Information ›</div></div>
+    <div class="acts"><button class="btn-stop">◉ STOP</button><button class="btn-restart">↻ RESTART</button></div>
+  </div>
+  <div class="tabs"><div class="tab on">Metrics</div><div class="tab">Requests</div><div class="tab">APIs</div><div class="tab">Config</div></div>
+  <div class="grid">
+    <div class="card"><div class="hd"><div class="cicon">▣</div>CPU Usage</div><div class="big">12%</div><div class="meta"><b class="g">GOOD</b> · DAILY USAGE</div>
+      <svg viewBox="0 0 200 60" style="margin-top:14px;width:100%"><path d="M0 45 L18 42 L36 47 L54 40 L72 44 L90 36 L108 40 L126 30 L144 35 L162 22 L180 26 L200 14" fill="none" stroke="#22d3ee" stroke-width="2"/><path d="M0 45 L18 42 L36 47 L54 40 L72 44 L90 36 L108 40 L126 30 L144 35 L162 22 L180 26 L200 14 V60 H0 Z" fill="url(#gg)"/><defs><linearGradient id="gg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#22d3ee" stop-opacity=".22"/><stop offset="1" stop-color="#22d3ee" stop-opacity="0"/></linearGradient></defs></svg>
+      <div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
+    <div class="card"><div class="hd"><div class="cicon">▤</div>RAM Usage</div><div class="big">65%</div><div class="meta"><b class="a">AVERAGE</b> · DAILY USAGE</div>
+      <svg viewBox="0 0 160 88" style="margin:10px auto 0;display:block"><defs><linearGradient id="ram" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#22d3ee"/><stop offset="1" stop-color="#6366f1"/></linearGradient></defs><path d="M14 80 A 66 66 0 0 1 146 80" fill="none" stroke="rgba(148,163,184,.12)" stroke-width="13"/><path d="M14 80 A 66 66 0 0 1 118 34" fill="none" stroke="url(#ram)" stroke-width="13" stroke-linecap="round"/><text x="80" y="66" text-anchor="middle" fill="#64748b" font-size="9">USED</text><text x="80" y="80" text-anchor="middle" fill="#e2e8f2" font-size="12" font-weight="800">5.4 GB / 8GB</text></svg>
+      <div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
+    <div class="card"><div class="hd"><div class="cicon">🗑</div>Cache</div><div class="big">352 MB</div><div class="meta"><b style="color:#22d3ee">220MB AVG</b> · CACHED IMAGES AND FILES</div>
+      <div class="segbar"><div style="width:48%;background:#22d3ee"></div><div style="width:20%;background:#6366f1"></div><div style="width:32%;background:rgba(148,163,184,.12)"></div></div>
+      <div class="legend"><span><i style="background:#22d3ee"></i>Cache <b>212 MB</b> 12%</span><span><i style="background:#6366f1"></i>Non-Cache <b>85 MB</b> 4%</span><span><i style="background:#475569"></i>Total <b>1.75 GB</b></span></div>
+      <div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
+    <div class="card" style="grid-column:span 2"><div class="hd"><div class="cicon">⚇</div>Active Users</div><div class="big">475 K</div><div class="meta">USERS ACTIVE RIGHT NOW</div>
+      <div class="bars"><div style="height:80%"></div><div style="height:55%"></div><div style="height:90%"></div><div style="height:62%"></div><div style="height:75%"></div><div style="height:40%"></div><div style="height:68%"></div><div style="height:85%"></div><div style="height:58%"></div><div style="height:72%"></div><div style="height:48%"></div><div style="height:66%"></div><div style="height:78%"></div><div style="height:52%"></div></div>
+      <div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
+    <div class="card"><div class="hd"><div class="cicon">✦</div>Performance</div><div class="big">89%</div><div class="meta"><b class="g">GOOD</b> · LAST SCAN TODAY</div>
+      <div style="display:flex;flex-direction:column;gap:8px;margin-top:14px"><div class="speed"><span style="color:#6c8ef0">↓</span> 10.4 Mbps down</div><div class="speed"><span style="color:#22d3ee">↑</span> 5.2 Mbps up</div></div>
+      <div class="foot"><span>Check Speed</span><div class="arrow">›</div></div></div>
+  </div>
+</main></body></html>
diff --git a/docs/design/explorations/06-midnight-v2.html b/docs/design/explorations/06-midnight-v2.html
new file mode 100644
index 0000000..b932e6b
--- /dev/null
+++ b/docs/design/explorations/06-midnight-v2.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8"><title>06 — Midnight v2 (Dashboard)</title>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body { font-family:'Inter',system-ui,sans-serif; background:#0b0c10; color:#eceef4; display:flex; min-height:100vh; }
+  body::before { content:''; position:fixed; inset:0; background:radial-gradient(900px 500px at 70% -10%, rgba(232,49,106,.07), transparent 60%); pointer-events:none; }
+  .rail { width:62px; border-right:1px solid rgba(255,255,255,.05); background:#0e0f14; display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:8px; }
+  .rail .mark { width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg,#f4497f,#cf1d5b); display:flex; align-items:center; justify-content:center; margin-bottom:14px; box-shadow:0 4px 18px rgba(232,49,106,.35); }
+  .rail .ic { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#565a68; font-size:16px; }
+  .rail .ic.on { background:rgba(232,49,106,.13); color:#f4557f; }
+  .rail .lbl { font-size:8.5px; color:#43465300; }
+  main { flex:1; min-width:0; }
+  .topbar { display:flex; align-items:center; gap:16px; padding:11px 26px; border-bottom:1px solid rgba(255,255,255,.05); }
+  .brand { font-weight:800; font-size:15px; letter-spacing:-.3px; display:flex; align-items:center; gap:10px; }
+  .search { background:#14151b; border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:7px 14px; color:#6b6e7d; font-size:13px; width:300px; display:flex; justify-content:space-between; }
+  .search kbd { font-size:10px; background:#1e1f27; border:1px solid rgba(255,255,255,.08); border-radius:5px; padding:1px 6px; color:#565a68; }
+  .topright { margin-left:auto; display:flex; align-items:center; gap:10px; }
+  .pill { font-size:12px; color:#9a9dab; background:#14151b; border:1px solid rgba(255,255,255,.06); border-radius:999px; padding:6px 14px; }
+  .avatar-t { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#f4497f,#7c5cf0); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
+  .content { padding:26px; max-width:1240px; }
+  .pagehead { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; }
+  .pagehead h1 { font-size:22px; font-weight:800; letter-spacing:-.5px; }
+  .pagehead p { font-size:13px; color:#6b6e7d; margin-top:3px; }
+  .btn-primary { background:#e8316a; color:#fff; border:none; border-radius:10px; padding:9px 18px; font-size:13px; font-weight:700; box-shadow:0 4px 16px rgba(232,49,106,.3); }
+  .statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
+  .stat { background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:16px 18px; position:relative; overflow:hidden; }
+  .stat::after { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--ac,#e8316a); opacity:.85; }
+  .stat .k { font-size:10.5px; color:#6b6e7d; text-transform:uppercase; letter-spacing:.12em; font-weight:700; }
+  .stat .v { font-size:26px; font-weight:800; letter-spacing:-.8px; margin-top:5px; }
+  .stat .d { font-size:11px; color:#565a68; margin-top:3px; }
+  .stat .d b { color:#3dd68c; font-weight:600; }
+  .secttl { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:#565a68; margin:0 0 12px; }
+  .projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; }
+  .proj { background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:18px; transition:.15s; }
+  .proj:hover { border-color:rgba(232,49,106,.35); transform:translateY(-1px); }
+  .proj .top { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
+  .proj .ic { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; color:#fff; }
+  .proj h3 { font-size:14.5px; font-weight:700; letter-spacing:-.2px; }
+  .proj .env { font-size:10.5px; color:#6b6e7d; margin-top:2px; }
+  .badge { margin-left:auto; font-size:9.5px; font-weight:800; letter-spacing:.08em; padding:3px 9px; border-radius:20px; }
+  .b-run { background:rgba(61,214,140,.1); color:#3dd68c; } .b-warn { background:rgba(240,160,64,.1); color:#f0a040; }
+  .svcs { display:flex; gap:6px; margin-bottom:14px; }
+  .svcs span { width:26px; height:26px; border-radius:8px; background:#191b23; border:1px solid rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; font-size:10px; color:#8a8d9c; font-weight:600; }
+  .svcs span.more { color:#565a68; }
+  .proj .ft { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#565a68; border-top:1px solid rgba(255,255,255,.05); padding-top:12px; }
+  .proj .ft .arrow { color:#f4557f; font-size:14px; }
+  table { width:100%; border-collapse:collapse; background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:14px; overflow:hidden; font-size:12.5px; }
+  th { text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:#565a68; font-weight:700; padding:10px 18px; border-bottom:1px solid rgba(255,255,255,.06); }
+  td { padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.04); color:#b6b9c6; }
+  td:first-child { color:#eceef4; font-weight:600; }
+  .st { font-size:10px; font-weight:800; padding:2px 8px; border-radius:20px; letter-spacing:.06em; }
+  .st-ok { background:rgba(61,214,140,.1); color:#3dd68c; } .st-run { background:rgba(108,142,240,.12); color:#6c8ef0; } .st-fail { background:rgba(255,112,67,.12); color:#ff7043; }
+</style></head><body>
+<nav class="rail">
+  <div class="mark"><svg width="20" height="20" viewBox="0 0 64 64"><g fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="5"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
+  <div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⚙</div>
+</nav>
+<main>
+  <div class="topbar">
+    <div class="brand">Containr</div>
+    <div class="search">Search… <kbd>⌘K</kbd></div>
+    <div class="topright"><span class="pill">production</span><div class="avatar-t">TD</div></div>
+  </div>
+  <div class="content">
+    <div class="pagehead">
+      <div><h1>Projects</h1><p>3 projects · 9 services · 1 host</p></div>
+      <button class="btn-primary">+ New Project</button>
+    </div>
+    <div class="statrow">
+      <div class="stat" style="--ac:#3dd68c"><div class="k">Host CPU</div><div class="v">14%</div><div class="d"><b>healthy</b> · 16 cores · load 2.41</div></div>
+      <div class="stat" style="--ac:#9c7ef0"><div class="k">Memory</div><div class="v">72%</div><div class="d">9.8 GB / 13 GB used</div></div>
+      <div class="stat" style="--ac:#ff8a5c"><div class="k">Disk</div><div class="v">73%</div><div class="d">338 GB of 465 GB</div></div>
+      <div class="stat" style="--ac:#e8316a"><div class="k">Deploys · 7d</div><div class="v">18</div><div class="d"><b>17 ok</b> · 1 failed</div></div>
+    </div>
+    <p class="secttl">Projects</p>
+    <div class="projgrid">
+      <div class="proj"><div class="top"><div class="ic" style="background:#e8316a">C</div><div><h3>core-services</h3><div class="env">production · containr.dev</div></div><span class="badge b-run">RUNNING</span></div>
+        <div class="svcs"><span>api</span><span>web</span><span>db</span><span>w</span><span class="more">+1</span></div>
+        <div class="ft"><span>5 services · deployed 4m ago</span><span class="arrow">→</span></div></div>
+      <div class="proj"><div class="top"><div class="ic" style="background:#6c5ce7">G</div><div><h3>growth-site</h3><div class="env">production · growth.app</div></div><span class="badge b-run">RUNNING</span></div>
+        <div class="svcs"><span>site</span><span>api</span><span>rds</span></div>
+        <div class="ft"><span>3 services · deployed 2h ago</span><span class="arrow">→</span></div></div>
+      <div class="proj"><div class="top"><div class="ic" style="background:#ff8a5c">M</div><div><h3>ml-pipeline</h3><div class="env">staging · internal</div></div><span class="badge b-warn">DEGRADED</span></div>
+        <div class="svcs"><span>api</span><span>wrk</span></div>
+        <div class="ft"><span>2 services · 1 failed build</span><span class="arrow">→</span></div></div>
+    </div>
+    <p class="secttl">Recent Deployments</p>
+    <table>
+      <tr><th>Service</th><th>Project</th><th>Status</th><th>Duration</th><th>When</th></tr>
+      <tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">DEPLOYED</span></td><td>48s</td><td>4m ago</td></tr>
+      <tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">BUILDING</span></td><td>—</td><td>6m ago</td></tr>
+      <tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">FAILED</span></td><td>1m 32s</td><td>1h ago</td></tr>
+      <tr><td>site</td><td>growth-site</td><td><span class="st st-ok">DEPLOYED</span></td><td>39s</td><td>2h ago</td></tr>
+    </table>
+  </div>
+</main></body></html>
diff --git a/docs/design/explorations/07-terminal-v2.html b/docs/design/explorations/07-terminal-v2.html
new file mode 100644
index 0000000..5fad498
--- /dev/null
+++ b/docs/design/explorations/07-terminal-v2.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8"><title>07 — Terminal v2 (Dashboard)</title>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&display=swap');
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body { font-family:'JetBrains Mono',monospace; background:#070807; color:#c9d1c9; display:flex; min-height:100vh; font-size:13px; }
+  body::before { content:''; position:fixed; inset:0; background:repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.14) 2px 4px); pointer-events:none; }
+  .rail { width:58px; border-right:1px solid #1c1f1c; display:flex; flex-direction:column; align-items:center; padding:14px 0; gap:14px; }
+  .rail .mark { width:34px; height:34px; border:1px solid #4ade80; color:#4ade80; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; }
+  .rail .ic { color:#3d443d; font-size:14px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; }
+  .rail .ic.on { color:#4ade80; background:#4ade8014; border:1px solid #4ade8030; }
+  main { flex:1; min-width:0; }
+  .topbar { display:flex; align-items:center; gap:16px; padding:10px 24px; border-bottom:1px solid #1c1f1c; font-size:12px; }
+  .brand { color:#4ade80; font-weight:800; }
+  .brand::before { content:'▮ '; }
+  .search { border:1px solid #242824; padding:5px 12px; color:#4a5049; width:320px; font-size:12px; }
+  .search::before { content:'$ '; color:#4ade80; }
+  .topright { margin-left:auto; display:flex; gap:14px; color:#4a5049; font-size:11px; align-items:center; }
+  .topright .env { color:#fbbf24; }
+  .content { padding:22px 26px; max-width:1240px; }
+  .pagehead { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:18px; border-bottom:1px dashed #242824; padding-bottom:14px; }
+  .pagehead h1 { font-size:18px; font-weight:800; color:#e8ede8; }
+  .pagehead h1::before { content:'## '; color:#4ade80; }
+  .pagehead p { font-size:11px; color:#4a5049; margin-top:4px; }
+  .btn-primary { background:#4ade80; color:#070807; border:none; padding:8px 16px; font-family:inherit; font-size:12px; font-weight:800; }
+  .statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
+  .stat { border:1px solid #1c1f1c; padding:14px 16px; background:#0b0d0b; position:relative; }
+  .stat .k { font-size:10px; color:#4a5049; letter-spacing:.1em; }
+  .stat .k::before { content:'● '; color:#4ade80; font-size:8px; }
+  .stat .v { font-size:24px; font-weight:800; color:#e8ede8; margin-top:6px; }
+  .stat .d { font-size:10.5px; color:#4a5049; margin-top:4px; }
+  .stat .d b { color:#4ade80; font-weight:400; }
+  .secttl { font-size:11px; color:#4a5049; margin:0 0 10px; letter-spacing:.12em; }
+  .secttl::before { content:'── '; color:#2a2f2a; } .secttl::after { content:' ──────────'; color:#2a2f2a; }
+  .projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
+  .proj { border:1px solid #1c1f1c; background:#0b0d0b; padding:16px; }
+  .proj:hover { border-color:#4ade80; }
+  .proj .top { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
+  .proj .ic { width:32px; height:32px; border:1px solid #2a2f2a; color:#4ade80; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; }
+  .proj h3 { font-size:13px; font-weight:700; color:#e8ede8; }
+  .proj .env { font-size:10px; color:#4a5049; margin-top:2px; }
+  .badge { margin-left:auto; font-size:9px; font-weight:700; padding:2px 8px; letter-spacing:.08em; }
+  .b-run { border:1px solid #4ade8044; color:#4ade80; } .b-warn { border:1px solid #fbbf2444; color:#fbbf24; }
+  .svcs { font-size:11px; color:#5a6159; margin-bottom:12px; line-height:1.7; }
+  .svcs b { color:#c9d1c9; font-weight:400; }
+  .proj .ft { display:flex; justify-content:space-between; font-size:10.5px; color:#4a5049; border-top:1px dashed #1c1f1c; padding-top:10px; }
+  .proj .ft .arrow { color:#4ade80; }
+  table { width:100%; border-collapse:collapse; border:1px solid #1c1f1c; font-size:12px; background:#0b0d0b; }
+  th { text-align:left; font-size:9.5px; letter-spacing:.14em; color:#4a5049; font-weight:700; padding:9px 16px; border-bottom:1px solid #1c1f1c; }
+  td { padding:9px 16px; border-bottom:1px solid #141714; color:#8a918a; }
+  td:first-child { color:#e8ede8; }
+  .st { font-size:10px; font-weight:700; }
+  .st-ok { color:#4ade80; } .st-run { color:#6c8ef0; } .st-fail { color:#f87171; }
+  .st-ok::before{content:'[OK] '}.st-run::before{content:'[..] '}.st-fail::before{content:'[!!] '}
+</style></head><body>
+<nav class="rail"><div class="mark">C</div><div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⚙</div></nav>
+<main>
+  <div class="topbar">
+    <div class="brand">containr</div>
+    <div class="search">search --projects --builds --logs_</div>
+    <div class="topright"><span class="env">env:production</span><span>tdvorak@containr</span></div>
+  </div>
+  <div class="content">
+    <div class="pagehead">
+      <div><h1>projects</h1><p># 3 projects · 9 services · 1 host · uptime 7h 41m</p></div>
+      <button class="btn-primary">+ new-project</button>
+    </div>
+    <div class="statrow">
+      <div class="stat"><div class="k">HOST.CPU</div><div class="v">14%</div><div class="d"><b>ok</b> · 16 cores · load 2.41</div></div>
+      <div class="stat"><div class="k">HOST.MEM</div><div class="v">72%</div><div class="d">9.8G / 13G used</div></div>
+      <div class="stat"><div class="k">HOST.DISK</div><div class="v">73%</div><div class="d">338G of 465G</div></div>
+      <div class="stat"><div class="k">DEPLOYS.7D</div><div class="v">18</div><div class="d"><b>17 ok</b> · 1 failed</div></div>
+    </div>
+    <p class="secttl">PROJECTS</p>
+    <div class="projgrid">
+      <div class="proj"><div class="top"><div class="ic">CS</div><div><h3>core-services</h3><div class="env">prod · containr.dev</div></div><span class="badge b-run">RUNNING</span></div>
+        <div class="svcs">├─ <b>api</b> · <b>web</b> · <b>db</b> · <b>worker</b><br>└─ 5 services total</div>
+        <div class="ft"><span>deployed 4m ago</span><span class="arrow">→</span></div></div>
+      <div class="proj"><div class="top"><div class="ic">GS</div><div><h3>growth-site</h3><div class="env">prod · growth.app</div></div><span class="badge b-run">RUNNING</span></div>
+        <div class="svcs">├─ <b>site</b> · <b>api</b> · <b>redis</b><br>└─ 3 services total</div>
+        <div class="ft"><span>deployed 2h ago</span><span class="arrow">→</span></div></div>
+      <div class="proj"><div class="top"><div class="ic">ML</div><div><h3>ml-pipeline</h3><div class="env">staging · internal</div></div><span class="badge b-warn">DEGRADED</span></div>
+        <div class="svcs">├─ <b>api</b> · <b>worker</b><br>└─ 2 services · 1 failed</div>
+        <div class="ft"><span>last deploy failed</span><span class="arrow">→</span></div></div>
+    </div>
+    <p class="secttl">RECENT DEPLOYMENTS</p>
+    <table>
+      <tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
+      <tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">deployed</span></td><td>48s</td><td>4m ago</td></tr>
+      <tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">building</span></td><td>—</td><td>6m ago</td></tr>
+      <tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">failed</span></td><td>1m32s</td><td>1h ago</td></tr>
+      <tr><td>site</td><td>growth-site</td><td><span class="st st-ok">deployed</span></td><td>39s</td><td>2h ago</td></tr>
+    </table>
+  </div>
+</main></body></html>
diff --git a/docs/design/explorations/08-midnight-terminal.html b/docs/design/explorations/08-midnight-terminal.html
new file mode 100644
index 0000000..2828531
--- /dev/null
+++ b/docs/design/explorations/08-midnight-terminal.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8"><title>08 — Midnight × Terminal (Dashboard)</title>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600;700&display=swap');
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body { font-family:'Inter',system-ui,sans-serif; background:#0b0c11; color:#eceef4; display:flex; min-height:100vh; }
+  .mono { font-family:'JetBrains Mono',monospace; }
+  body::before { content:''; position:fixed; inset:0; background:radial-gradient(900px 500px at 70% -10%, rgba(232,49,106,.06), transparent 60%); pointer-events:none; }
+  .rail { width:62px; border-right:1px solid rgba(255,255,255,.05); background:#0e0f14; display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:8px; }
+  .rail .mark { width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg,#f4497f,#cf1d5b); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
+  .rail .ic { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#565a68; font-size:16px; }
+  .rail .ic.on { background:rgba(232,49,106,.13); color:#f4557f; }
+  main { flex:1; min-width:0; }
+  .topbar { display:flex; align-items:center; gap:16px; padding:11px 26px; border-bottom:1px solid rgba(255,255,255,.05); }
+  .brand { font-weight:800; font-size:15px; letter-spacing:-.3px; }
+  .brand em { font-style:normal; color:#f4557f; }
+  .search { background:#14151b; border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:7px 14px; color:#6b6e7d; font-size:12px; width:300px; font-family:'JetBrains Mono',monospace; }
+  .search::before { content:'$ '; color:#f4557f; }
+  .topright { margin-left:auto; display:flex; align-items:center; gap:10px; }
+  .pill { font-size:11px; color:#9a9dab; background:#14151b; border:1px solid rgba(255,255,255,.06); border-radius:999px; padding:6px 14px; font-family:'JetBrains Mono',monospace; }
+  .avatar-t { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#f4497f,#7c5cf0); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
+  .content { padding:26px; max-width:1240px; }
+  .pagehead { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; }
+  .pagehead h1 { font-size:22px; font-weight:800; letter-spacing:-.5px; }
+  .pagehead p { font-size:12px; color:#6b6e7d; margin-top:4px; font-family:'JetBrains Mono',monospace; }
+  .btn-primary { background:#e8316a; color:#fff; border:none; border-radius:10px; padding:9px 18px; font-size:13px; font-weight:700; box-shadow:0 4px 16px rgba(232,49,106,.3); }
+  .statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
+  .stat { background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:15px 18px; }
+  .stat .k { font-size:10px; color:#6b6e7d; letter-spacing:.14em; font-weight:700; font-family:'JetBrains Mono',monospace; }
+  .stat .v { font-size:26px; font-weight:800; letter-spacing:-.8px; margin-top:6px; }
+  .stat .d { font-size:11px; color:#565a68; margin-top:4px; font-family:'JetBrains Mono',monospace; }
+  .stat .d b { font-weight:600; }
+  .ok{color:#3dd68c}.warn{color:#f0a040}.pink{color:#f4557f}
+  .secttl { font-size:11px; font-weight:700; letter-spacing:.16em; color:#565a68; margin:0 0 12px; font-family:'JetBrains Mono',monospace; }
+  .secttl::before { content:'// '; color:#f4557f; }
+  .projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; }
+  .proj { background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:18px; transition:.15s; }
+  .proj:hover { border-color:rgba(232,49,106,.4); transform:translateY(-1px); }
+  .proj .top { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
+  .proj .ic { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:#fff; font-family:'JetBrains Mono',monospace; }
+  .proj h3 { font-size:14.5px; font-weight:700; }
+  .proj .env { font-size:10.5px; color:#6b6e7d; margin-top:2px; font-family:'JetBrains Mono',monospace; }
+  .badge { margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.08em; padding:3px 9px; border-radius:4px; font-family:'JetBrains Mono',monospace; }
+  .b-run { background:rgba(61,214,140,.1); color:#3dd68c; } .b-warn { background:rgba(240,160,64,.1); color:#f0a040; }
+  .svcs { display:flex; gap:6px; margin-bottom:14px; }
+  .svcs span { height:26px; padding:0 8px; border-radius:7px; background:#191b23; border:1px solid rgba(255,255,255,.07); display:flex; align-items:center; font-size:10px; color:#8a8d9c; font-weight:600; font-family:'JetBrains Mono',monospace; }
+  .proj .ft { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#565a68; border-top:1px solid rgba(255,255,255,.05); padding-top:12px; font-family:'JetBrains Mono',monospace; }
+  .proj .ft .arrow { color:#f4557f; }
+  table { width:100%; border-collapse:collapse; background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:14px; overflow:hidden; font-size:12.5px; }
+  th { text-align:left; font-size:9.5px; letter-spacing:.16em; color:#565a68; font-weight:700; padding:10px 18px; border-bottom:1px solid rgba(255,255,255,.06); font-family:'JetBrains Mono',monospace; }
+  td { padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.04); color:#b6b9c6; font-family:'JetBrains Mono',monospace; font-size:12px; }
+  td:first-child { color:#eceef4; font-weight:600; font-family:'Inter',sans-serif; }
+  .st { font-size:10px; font-weight:700; padding:2px 8px; border-radius:4px; letter-spacing:.06em; }
+  .st-ok { background:rgba(61,214,140,.1); color:#3dd68c; } .st-run { background:rgba(108,142,240,.12); color:#6c8ef0; } .st-fail { background:rgba(255,112,67,.12); color:#ff7043; }
+</style></head><body>
+<nav class="rail">
+  <div class="mark"><svg width="20" height="20" viewBox="0 0 64 64"><g fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="5"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
+  <div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⚙</div>
+</nav>
+<main>
+  <div class="topbar">
+    <div class="brand">contain<em>r</em></div>
+    <div class="search">search projects, builds, logs…</div>
+    <div class="topright"><span class="pill">env:production</span><div class="avatar-t">TD</div></div>
+  </div>
+  <div class="content">
+    <div class="pagehead">
+      <div><h1>Projects</h1><p>3 projects · 9 services · 1 host</p></div>
+      <button class="btn-primary">+ New Project</button>
+    </div>
+    <div class="statrow">
+      <div class="stat"><div class="k">HOST.CPU</div><div class="v">14%</div><div class="d"><b class="ok">healthy</b> · 16 cores · load 2.41</div></div>
+      <div class="stat"><div class="k">HOST.MEM</div><div class="v">72%</div><div class="d">9.8G / 13G used</div></div>
+      <div class="stat"><div class="k">HOST.DISK</div><div class="v">73%</div><div class="d">338G of 465G</div></div>
+      <div class="stat"><div class="k">DEPLOYS.7D</div><div class="v">18</div><div class="d"><b class="ok">17 ok</b> · <b class="warn">1 failed</b></div></div>
+    </div>
+    <p class="secttl">PROJECTS</p>
+    <div class="projgrid">
+      <div class="proj"><div class="top"><div class="ic" style="background:#e8316a">CS</div><div><h3>core-services</h3><div class="env">prod · containr.dev</div></div><span class="badge b-run">RUNNING</span></div>
+        <div class="svcs"><span>api</span><span>web</span><span>db</span><span>worker</span><span>+1</span></div>
+        <div class="ft"><span>5 svc · deployed 4m ago</span><span class="arrow">→</span></div></div>
+      <div class="proj"><div class="top"><div class="ic" style="background:#6c5ce7">GS</div><div><h3>growth-site</h3><div class="env">prod · growth.app</div></div><span class="badge b-run">RUNNING</span></div>
+        <div class="svcs"><span>site</span><span>api</span><span>redis</span></div>
+        <div class="ft"><span>3 svc · deployed 2h ago</span><span class="arrow">→</span></div></div>
+      <div class="proj"><div class="top"><div class="ic" style="background:#ff8a5c">ML</div><div><h3>ml-pipeline</h3><div class="env">staging · internal</div></div><span class="badge b-warn">DEGRADED</span></div>
+        <div class="svcs"><span>api</span><span>worker</span></div>
+        <div class="ft"><span>2 svc · 1 failed build</span><span class="arrow">→</span></div></div>
+    </div>
+    <p class="secttl">RECENT DEPLOYMENTS</p>
+    <table>
+      <tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
+      <tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">DEPLOYED</span></td><td>48s</td><td>4m ago</td></tr>
+      <tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">BUILDING</span></td><td>—</td><td>6m ago</td></tr>
+      <tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">FAILED</span></td><td>1m32s</td><td>1h ago</td></tr>
+      <tr><td>site</td><td>growth-site</td><td><span class="st st-ok">DEPLOYED</span></td><td>39s</td><td>2h ago</td></tr>
+    </table>
+  </div>
+</main></body></html>
diff --git a/docs/design/explorations/09-ledger.html b/docs/design/explorations/09-ledger.html
new file mode 100644
index 0000000..7a04a06
--- /dev/null
+++ b/docs/design/explorations/09-ledger.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8"><title>09 — Ledger (Dashboard)</title>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body { font-family:'Inter',system-ui,sans-serif; background:#121214; color:#e9e7e2; display:flex; min-height:100vh; }
+  .mono { font-family:'JetBrains Mono',monospace; }
+  .rail { width:60px; border-right:1px solid rgba(233,231,226,.12); display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:18px; }
+  .rail .mark { width:34px; height:34px; border-radius:50%; background:#ff4d2e; display:flex; align-items:center; justify-content:center; font-weight:800; color:#121214; font-family:'JetBrains Mono',monospace; font-size:14px; }
+  .rail .ic { color:#5c5c60; font-size:15px; } .rail .ic.on { color:#ff4d2e; }
+  main { flex:1; min-width:0; }
+  .topbar { display:flex; align-items:baseline; gap:18px; padding:14px 30px; border-bottom:1px solid rgba(233,231,226,.12); }
+  .brand { font-family:'Instrument Serif',serif; font-size:24px; letter-spacing:-.5px; }
+  .brand i { color:#ff4d2e; font-style:normal; }
+  .search { margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:11px; color:#5c5c60; border-bottom:1px solid rgba(233,231,226,.2); padding-bottom:3px; width:260px; }
+  .topright { display:flex; gap:16px; font-family:'JetBrains Mono',monospace; font-size:11px; color:#8a8a8e; }
+  .content { padding:30px; max-width:1240px; }
+  .pagehead { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:8px; }
+  .pagehead h1 { font-family:'Instrument Serif',serif; font-size:56px; font-weight:400; letter-spacing:-1.5px; line-height:1; }
+  .pagehead h1 em { color:#ff4d2e; }
+  .btn-primary { background:#ff4d2e; color:#121214; border:none; border-radius:999px; padding:10px 22px; font-size:12px; font-weight:700; font-family:'JetBrains Mono',monospace; }
+  .rule { border:none; border-top:1px solid rgba(233,231,226,.14); margin:14px 0 24px; }
+  .statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid rgba(233,231,226,.14); border-bottom:1px solid rgba(233,231,226,.14); margin-bottom:30px; }
+  .stat { padding:18px 20px; border-right:1px solid rgba(233,231,226,.14); }
+  .stat:last-child { border-right:none; }
+  .stat .k { font-family:'JetBrains Mono',monospace; font-size:10px; color:#5c5c60; letter-spacing:.16em; }
+  .stat .v { font-family:'Instrument Serif',serif; font-size:44px; font-weight:400; letter-spacing:-1px; margin-top:6px; line-height:1; }
+  .stat .v span { font-size:20px; color:#5c5c60; }
+  .stat .d { font-size:11px; color:#8a8a8e; margin-top:6px; }
+  .stat .d b { color:#ff4d2e; font-weight:500; }
+  .secttl { display:flex; align-items:baseline; gap:12px; margin:0 0 14px; }
+  .secttl .no { font-family:'JetBrains Mono',monospace; font-size:11px; color:#ff4d2e; }
+  .secttl h2 { font-family:'Instrument Serif',serif; font-size:24px; font-weight:400; letter-spacing:-.4px; }
+  .secttl .cnt { margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:10px; color:#5c5c60; }
+  .projlist { margin-bottom:32px; }
+  .proj { display:grid; grid-template-columns:70px 1fr auto auto; align-items:center; gap:20px; padding:18px 4px; border-bottom:1px solid rgba(233,231,226,.12); transition:.15s; }
+  .proj:hover { background:rgba(255,77,46,.04); }
+  .proj .idx { font-family:'JetBrains Mono',monospace; font-size:12px; color:#5c5c60; }
+  .proj h3 { font-family:'Instrument Serif',serif; font-size:26px; font-weight:400; letter-spacing:-.5px; }
+  .proj .env { font-size:11.5px; color:#8a8a8e; margin-top:3px; font-family:'JetBrains Mono',monospace; }
+  .proj .svcs { font-size:11px; color:#8a8a8e; font-family:'JetBrains Mono',monospace; text-align:right; line-height:1.7; }
+  .proj .svcs b { color:#e9e7e2; font-weight:500; }
+  .badge { font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:500; letter-spacing:.12em; padding:5px 12px; border-radius:999px; border:1px solid; }
+  .b-run { border-color:rgba(52,211,153,.4); color:#34d399; }
+  .b-warn { border-color:rgba(251,191,36,.4); color:#fbbf24; }
+  table { width:100%; border-collapse:collapse; font-size:12.5px; }
+  th { text-align:left; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.18em; color:#5c5c60; font-weight:500; padding:8px 4px; border-bottom:1px solid rgba(233,231,226,.18); }
+  td { padding:13px 4px; border-bottom:1px solid rgba(233,231,226,.08); color:#a8a6a0; font-family:'JetBrains Mono',monospace; font-size:11.5px; }
+  td:first-child { color:#e9e7e2; font-family:'Inter',sans-serif; font-weight:600; font-size:13px; }
+  .st { font-size:10px; letter-spacing:.1em; }
+  .st-ok { color:#34d399; } .st-run { color:#8ab4f8; } .st-fail { color:#ff4d2e; }
+  .st::before { content:'■ '; font-size:7px; vertical-align:2px; }
+</style></head><body>
+<nav class="rail"><div class="mark">C</div><div class="ic on">⌗</div><div class="ic">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚙</div></nav>
+<main>
+  <div class="topbar">
+    <div class="brand">Containr<i>.</i></div>
+    <div class="search">search projects, builds, logs</div>
+    <div class="topright"><span>production</span><span>tdvorak</span></div>
+  </div>
+  <div class="content">
+    <div class="pagehead"><h1>Projects<em>.</em></h1><button class="btn-primary">+ new project</button></div>
+    <p class="mono" style="font-size:11px;color:#5c5c60">03 projects — 09 services — 01 host — uptime 7h 41m</p>
+    <hr class="rule">
+    <div class="statrow">
+      <div class="stat"><div class="k">HOST / CPU</div><div class="v">14<span>%</span></div><div class="d">healthy — 16 cores — load 2.41</div></div>
+      <div class="stat"><div class="k">HOST / MEMORY</div><div class="v">72<span>%</span></div><div class="d">9.8 GB of 13 GB used</div></div>
+      <div class="stat"><div class="k">HOST / DISK</div><div class="v">73<span>%</span></div><div class="d">338 GB of 465 GB</div></div>
+      <div class="stat"><div class="k">DEPLOYS / 7D</div><div class="v">18</div><div class="d"><b>17 ok</b> — 1 failed</div></div>
+    </div>
+    <div class="secttl"><span class="no">01</span><h2>Projects</h2><span class="cnt">3 entries</span></div>
+    <div class="projlist">
+      <div class="proj"><span class="idx">01</span><div><h3>core-services</h3><div class="env">production · containr.dev · deployed 4m ago</div></div><div class="svcs"><b>api web db worker cache</b><br>5 services</div><span class="badge b-run">RUNNING</span></div>
+      <div class="proj"><span class="idx">02</span><div><h3>growth-site</h3><div class="env">production · growth.app · deployed 2h ago</div></div><div class="svcs"><b>site api redis</b><br>3 services</div><span class="badge b-run">RUNNING</span></div>
+      <div class="proj"><span class="idx">03</span><div><h3>ml-pipeline</h3><div class="env">staging · internal · last deploy failed</div></div><div class="svcs"><b>api worker</b><br>2 services</div><span class="badge b-warn">DEGRADED</span></div>
+    </div>
+    <div class="secttl"><span class="no">02</span><h2>Recent deployments</h2><span class="cnt">last 24h</span></div>
+    <table>
+      <tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
+      <tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">deployed</span></td><td>48s</td><td>4m ago</td></tr>
+      <tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">building</span></td><td>—</td><td>6m ago</td></tr>
+      <tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">failed</span></td><td>1m32s</td><td>1h ago</td></tr>
+      <tr><td>site</td><td>growth-site</td><td><span class="st st-ok">deployed</span></td><td>39s</td><td>2h ago</td></tr>
+    </table>
+  </div>
+</main></body></html>
diff --git a/docs/design/explorations/10-softcell.html b/docs/design/explorations/10-softcell.html
new file mode 100644
index 0000000..bfe5811
--- /dev/null
+++ b/docs/design/explorations/10-softcell.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8"><title>10 — Softcell (Dashboard)</title>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;600;700;800;900&family=JetBrains+Mono:wght@500;600&display=swap');
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body { font-family:'Nunito',system-ui,sans-serif; background:#1e2028; color:#e8e6f2; display:flex; min-height:100vh; }
+  .mono { font-family:'JetBrains Mono',monospace; }
+  /* soft extruded surface */
+  .cell { background:#262932; border-radius:22px; box-shadow:6px 6px 14px rgba(0,0,0,.45), -3px -3px 10px rgba(255,255,255,.045); }
+  .cell-in { background:#22252e; border-radius:14px; box-shadow:inset 3px 3px 8px rgba(0,0,0,.4), inset -2px -2px 6px rgba(255,255,255,.04); }
+  .rail { width:70px; display:flex; flex-direction:column; align-items:center; padding:18px 0; gap:12px; }
+  .rail .mark { width:42px; height:42px; border-radius:16px; background:linear-gradient(145deg,#ff7ab8,#e8569a); display:flex; align-items:center; justify-content:center; font-weight:900; color:#1e2028; font-size:15px; box-shadow:4px 4px 10px rgba(0,0,0,.4); }
+  .rail .ic { width:44px; height:44px; border-radius:16px; display:flex; align-items:center; justify-content:center; color:#5f6474; font-size:16px; box-shadow:4px 4px 10px rgba(0,0,0,.35), -2px -2px 8px rgba(255,255,255,.04); background:#242730; }
+  .rail .ic.on { color:#ff7ab8; box-shadow:inset 3px 3px 8px rgba(0,0,0,.4); }
+  main { flex:1; min-width:0; padding-right:26px; }
+  .topbar { display:flex; align-items:center; gap:16px; padding:20px 6px 14px; }
+  .brand { font-weight:900; font-size:22px; letter-spacing:-.5px; }
+  .brand em { font-style:normal; color:#ff7ab8; }
+  .search { margin-left:auto; padding:10px 18px; width:300px; font-size:12.5px; color:#8a8ea0; font-family:'JetBrains Mono',monospace; }
+  .topright { display:flex; align-items:center; gap:10px; }
+  .pill { padding:9px 18px; border-radius:999px; font-size:11.5px; font-weight:700; color:#9fa3b5; }
+  .avatar-t { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#7ab8ff,#b07aff); display:flex; align-items:center; justify-content:center; font-weight:900; color:#1e2028; font-size:13px; box-shadow:3px 3px 8px rgba(0,0,0,.4); }
+  .content { padding:6px 6px 30px; max-width:1240px; }
+  .pagehead { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
+  .pagehead h1 { font-size:30px; font-weight:900; letter-spacing:-.8px; }
+  .pagehead p { font-size:12px; color:#7b7f92; font-family:'JetBrains Mono',monospace; margin-top:3px; }
+  .btn-primary { background:linear-gradient(145deg,#ff8ac0,#f15fa0); color:#2a1220; border:none; border-radius:18px; padding:12px 24px; font-size:13.5px; font-weight:900; box-shadow:4px 4px 12px rgba(0,0,0,.45); }
+  .statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
+  .stat { padding:18px 20px; }
+  .stat .k { font-family:'JetBrains Mono',monospace; font-size:10px; color:#7b7f92; letter-spacing:.12em; font-weight:600; }
+  .stat .v { font-size:32px; font-weight:900; letter-spacing:-1px; margin-top:6px; }
+  .stat .v span { font-size:16px; color:#7b7f92; font-weight:700; }
+  .meter { height:10px; margin-top:12px; padding:2px; display:flex; gap:3px; }
+  .meter i { flex:1; border-radius:4px; background:rgba(255,255,255,.06); }
+  .stat .d { font-size:11px; color:#7b7f92; margin-top:9px; font-family:'JetBrains Mono',monospace; }
+  .secttl { font-size:12px; font-weight:800; letter-spacing:.16em; color:#7b7f92; margin:0 0 14px 6px; }
+  .projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px; }
+  .proj { padding:20px; transition:.15s; }
+  .proj:hover { transform:translateY(-2px); }
+  .proj .top { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
+  .proj .ic { width:44px; height:44px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:14px; color:#1e2028; box-shadow:3px 3px 8px rgba(0,0,0,.35); }
+  .proj h3 { font-size:16px; font-weight:800; }
+  .proj .env { font-size:10.5px; color:#7b7f92; margin-top:2px; font-family:'JetBrains Mono',monospace; }
+  .badge { margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:600; padding:6px 12px; border-radius:999px; box-shadow:inset 2px 2px 6px rgba(0,0,0,.35); background:#22252e; }
+  .b-run { color:#5ee6a0; } .b-warn { color:#ffc46b; }
+  .svcs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
+  .svcs span { font-size:10.5px; font-weight:700; color:#9fa3b5; padding:6px 12px; border-radius:999px; font-family:'JetBrains Mono',monospace; }
+  .proj .ft { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#7b7f92; font-family:'JetBrains Mono',monospace; }
+  .proj .ft .arrow { color:#ff7ab8; font-weight:900; }
+  .tbl { padding:6px; }
+  table { width:100%; border-collapse:collapse; font-size:12.5px; }
+  th { text-align:left; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.16em; color:#7b7f92; font-weight:600; padding:12px 16px; }
+  td { padding:12px 16px; color:#b9bcc9; font-family:'JetBrains Mono',monospace; font-size:11.5px; }
+  td:first-child { color:#e8e6f2; font-weight:800; font-family:'Nunito',sans-serif; font-size:13px; }
+  tbody tr { border-radius:12px; } tbody tr:hover td { background:rgba(255,255,255,.02); }
+  tbody tr:not(:last-child) td { border-bottom:1px solid rgba(255,255,255,.04); }
+  .st { font-size:10px; font-weight:600; padding:4px 10px; border-radius:999px; box-shadow:inset 2px 2px 5px rgba(0,0,0,.35); background:#1e2028; }
+  .st-ok { color:#5ee6a0; } .st-run { color:#7ab8ff; } .st-fail { color:#ff8a8a; }
+</style></head><body>
+<nav class="rail"><div class="mark">C</div><div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⚙</div></nav>
+<main>
+  <div class="topbar">
+    <div class="brand">contain<em>r</em></div>
+    <div class="search cell-in">search…</div>
+    <div class="topright"><span class="pill cell">production</span><div class="avatar-t">TD</div></div>
+  </div>
+  <div class="content">
+    <div class="pagehead">
+      <div><h1>Projects</h1><p>3 projects · 9 services · 1 host</p></div>
+      <button class="btn-primary">+ New Project</button>
+    </div>
+    <div class="statrow">
+      <div class="stat cell"><div class="k">HOST CPU</div><div class="v">14<span>%</span></div><div class="meter cell-in"><i style="background:#5ee6a0"></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="d">healthy · 16 cores · load 2.41</div></div>
+      <div class="stat cell"><div class="k">MEMORY</div><div class="v">72<span>%</span></div><div class="meter cell-in"><i style="background:#ff7ab8"></i><i style="background:#ff7ab8"></i><i style="background:#ff7ab8"></i><i style="background:#ff7ab8"></i><i style="background:#ff7ab8"></i><i></i><i></i></div><div class="d">9.8 GB / 13 GB used</div></div>
+      <div class="stat cell"><div class="k">DISK</div><div class="v">73<span>%</span></div><div class="meter cell-in"><i style="background:#ffc46b"></i><i style="background:#ffc46b"></i><i style="background:#ffc46b"></i><i style="background:#ffc46b"></i><i style="background:#ffc46b"></i><i></i><i></i></div><div class="d">338 GB of 465 GB</div></div>
+      <div class="stat cell"><div class="k">DEPLOYS · 7D</div><div class="v">18</div><div class="d" style="margin-top:16px"><b style="color:#5ee6a0">17 ok</b> · <b style="color:#ff8a8a">1 failed</b></div></div>
+    </div>
+    <p class="secttl">PROJECTS</p>
+    <div class="projgrid">
+      <div class="proj cell"><div class="top"><div class="ic" style="background:linear-gradient(145deg,#ff8ac0,#f15fa0)">CS</div><div><h3>core-services</h3><div class="env">prod · containr.dev</div></div><span class="badge b-run">● running</span></div>
+        <div class="svcs"><span class="cell-in">api</span><span class="cell-in">web</span><span class="cell-in">db</span><span class="cell-in">worker</span><span class="cell-in">+1</span></div>
+        <div class="ft"><span>5 svc · deployed 4m ago</span><span class="arrow">→</span></div></div>
+      <div class="proj cell"><div class="top"><div class="ic" style="background:linear-gradient(145deg,#9db4ff,#7a8ef0)">GS</div><div><h3>growth-site</h3><div class="env">prod · growth.app</div></div><span class="badge b-run">● running</span></div>
+        <div class="svcs"><span class="cell-in">site</span><span class="cell-in">api</span><span class="cell-in">redis</span></div>
+        <div class="ft"><span>3 svc · deployed 2h ago</span><span class="arrow">→</span></div></div>
+      <div class="proj cell"><div class="top"><div class="ic" style="background:linear-gradient(145deg,#ffc46b,#f0a050)">ML</div><div><h3>ml-pipeline</h3><div class="env">staging · internal</div></div><span class="badge b-warn">● degraded</span></div>
+        <div class="svcs"><span class="cell-in">api</span><span class="cell-in">worker</span></div>
+        <div class="ft"><span>2 svc · 1 failed build</span><span class="arrow">→</span></div></div>
+    </div>
+    <p class="secttl">RECENT DEPLOYMENTS</p>
+    <div class="tbl cell"><table>
+      <tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
+      <tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">deployed</span></td><td>48s</td><td>4m ago</td></tr>
+      <tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">building</span></td><td>—</td><td>6m ago</td></tr>
+      <tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">failed</span></td><td>1m32s</td><td>1h ago</td></tr>
+      <tr><td>site</td><td>growth-site</td><td><span class="st st-ok">deployed</span></td><td>39s</td><td>2h ago</td></tr>
+    </table></div>
+  </div>
+</main></body></html>
diff --git a/docs/design/explorations/11-flightdeck.html b/docs/design/explorations/11-flightdeck.html
new file mode 100644
index 0000000..91dac34
--- /dev/null
+++ b/docs/design/explorations/11-flightdeck.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8"><title>11 — Flight Deck (Dashboard)</title>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body { font-family:'Inter',system-ui,sans-serif; background:#0a0f16; color:#dbe4ee; display:flex; min-height:100vh;
+    background-image:linear-gradient(rgba(140,180,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(140,180,255,.03) 1px, transparent 1px);
+    background-size:44px 44px; }
+  .mono { font-family:'IBM Plex Mono',monospace; }
+  .rail { width:58px; border-right:1px solid rgba(140,180,255,.1); background:#0a0f16; display:flex; flex-direction:column; align-items:center; padding:14px 0; gap:10px; }
+  .rail .mark { width:36px; height:36px; border:1.5px solid #ffb224; color:#ffb224; display:flex; align-items:center; justify-content:center; font-weight:700; font-family:'IBM Plex Mono',monospace; font-size:14px; margin-bottom:10px; }
+  .rail .ic { width:38px; height:38px; display:flex; align-items:center; justify-content:center; color:#3d4d63; font-size:15px; border:1px solid transparent; }
+  .rail .ic.on { color:#ffb224; border-color:rgba(255,178,36,.35); background:rgba(255,178,36,.06); }
+  main { flex:1; min-width:0; }
+  .topbar { display:flex; align-items:center; gap:20px; padding:10px 24px; border-bottom:1px solid rgba(140,180,255,.1); font-family:'IBM Plex Mono',monospace; font-size:11px; }
+  .brand { font-weight:600; font-size:12px; letter-spacing:.22em; color:#dbe4ee; }
+  .brand em { font-style:normal; color:#ffb224; }
+  .tlm { color:#3d4d63; display:flex; gap:18px; }
+  .tlm b { color:#8fb4dd; font-weight:500; }
+  .search { margin-left:auto; color:#3d4d63; }
+  .topright { display:flex; gap:14px; align-items:center; }
+  .envp { color:#ffb224; border:1px solid rgba(255,178,36,.35); padding:3px 10px; font-size:10px; letter-spacing:.14em; }
+  .usr { color:#8fb4dd; }
+  .content { padding:24px; max-width:1240px; }
+  .pagehead { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
+  .pagehead h1 { font-family:'IBM Plex Mono',monospace; font-size:18px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; }
+  .pagehead h1::before { content:'▸ '; color:#ffb224; }
+  .pagehead p { font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#3d4d63; margin-top:5px; letter-spacing:.06em; }
+  .btn-primary { background:transparent; color:#ffb224; border:1px solid rgba(255,178,36,.5); padding:8px 18px; font-size:10.5px; font-weight:600; letter-spacing:.16em; font-family:'IBM Plex Mono',monospace; text-transform:uppercase; }
+  .btn-primary:hover { background:rgba(255,178,36,.1); }
+  /* HUD panel: corner brackets */
+  .panel { position:relative; background:rgba(13,20,30,.75); border:1px solid rgba(140,180,255,.1); }
+  .panel::before, .panel::after { content:''; position:absolute; width:10px; height:10px; }
+  .panel::before { top:-1px; left:-1px; border-top:1.5px solid #ffb224; border-left:1.5px solid #ffb224; }
+  .panel::after { bottom:-1px; right:-1px; border-bottom:1.5px solid #ffb224; border-right:1.5px solid #ffb224; }
+  .statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
+  .stat { padding:14px 16px 12px; }
+  .stat .k { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.2em; color:#3d4d63; display:flex; justify-content:space-between; }
+  .stat .k i { font-style:normal; color:#ffb224; }
+  .stat .v { font-family:'IBM Plex Mono',monospace; font-size:34px; font-weight:500; letter-spacing:-1px; margin:8px 0 2px; font-variant-numeric:tabular-nums; }
+  .stat .v span { font-size:15px; color:#3d4d63; }
+  .ticks { display:flex; gap:3px; margin:8px 0; }
+  .ticks i { width:8px; height:4px; background:rgba(140,180,255,.12); }
+  .stat .d { font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#5c7ba3; letter-spacing:.05em; }
+  .secttl { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.24em; color:#5c7ba3; margin:0 0 12px; display:flex; align-items:center; gap:10px; }
+  .secttl::before { content:''; width:8px; height:8px; border:1px solid #ffb224; }
+  .secttl .r { margin-left:auto; color:#3d4d63; }
+  .projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
+  .proj { padding:16px 18px; }
+  .proj .top { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
+  .proj .id { font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#ffb224; letter-spacing:.14em; }
+  .proj h3 { font-size:15px; font-weight:600; letter-spacing:-.2px; }
+  .proj .env { font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#3d4d63; margin-top:2px; letter-spacing:.06em; }
+  .badge { margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.14em; padding:3px 8px; border:1px solid; }
+  .b-run { border-color:rgba(63,217,160,.4); color:#3fd9a0; } .b-warn { border-color:rgba(255,178,36,.5); color:#ffb224; }
+  .svcs { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:12px; }
+  .svcs span { font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#8fb4dd; border:1px solid rgba(140,180,255,.18); padding:3px 8px; }
+  .proj .ft { display:flex; justify-content:space-between; font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#3d4d63; border-top:1px solid rgba(140,180,255,.08); padding-top:10px; letter-spacing:.05em; }
+  .proj .ft .arrow { color:#ffb224; }
+  table { width:100%; border-collapse:collapse; font-family:'IBM Plex Mono',monospace; font-size:11px; }
+  th { text-align:left; font-size:9px; letter-spacing:.22em; color:#3d4d63; font-weight:500; padding:10px 18px; border-bottom:1px solid rgba(140,180,255,.12); }
+  td { padding:11px 18px; border-bottom:1px solid rgba(140,180,255,.06); color:#8fb4dd; letter-spacing:.03em; }
+  td:first-child { color:#dbe4ee; font-weight:600; }
+  .st { font-size:9.5px; letter-spacing:.12em; }
+  .st-ok { color:#3fd9a0; } .st-run { color:#8ab4f8; } .st-fail { color:#ff5f56; }
+  .st::before { content:'['; color:#3d4d63; } .st::after { content:']'; color:#3d4d63; }
+</style></head><body>
+<nav class="rail"><div class="mark">C</div><div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⚙</div></nav>
+<main>
+  <div class="topbar">
+    <div class="brand">CONTAIN<em>R</em></div>
+    <div class="tlm"><span>LINK <b>NOMINAL</b></span><span>UPTIME <b>7H 41M</b></span><span>NODE <b>cnr-node-01</b></span></div>
+    <div class="search">search_</div>
+    <div class="topright"><span class="envp">PRODUCTION</span><span class="usr">tdvorak</span></div>
+  </div>
+  <div class="content">
+    <div class="pagehead">
+      <div><h1>Projects</h1><p>3 PROJECTS / 9 SERVICES / 1 HOST</p></div>
+      <button class="btn-primary">+ New Project</button>
+    </div>
+    <div class="statrow">
+      <div class="stat panel"><div class="k"><span>HOST.CPU</span><i>◉</i></div><div class="v">14<span>%</span></div><div class="ticks"><i style="background:#3fd9a0"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="d">NOMINAL · 16 CORES · LOAD 2.41</div></div>
+      <div class="stat panel"><div class="k"><span>HOST.MEM</span><i>◉</i></div><div class="v">72<span>%</span></div><div class="ticks"><i style="background:#ffb224"></i><i style="background:#ffb224"></i><i style="background:#ffb224"></i><i style="background:#ffb224"></i><i style="background:#ffb224"></i><i></i><i></i><i></i></div><div class="d">9.8G / 13G USED</div></div>
+      <div class="stat panel"><div class="k"><span>HOST.DISK</span><i>◉</i></div><div class="v">73<span>%</span></div><div class="ticks"><i style="background:#ffb224"></i><i style="background:#ffb224"></i><i style="background:#ffb224"></i><i style="background:#ffb224"></i><i style="background:#ffb224"></i><i></i><i></i><i></i></div><div class="d">338G OF 465G</div></div>
+      <div class="stat panel"><div class="k"><span>DEPLOYS.7D</span><i>◉</i></div><div class="v">18</div><div class="ticks"><i style="background:#3fd9a0"></i><i style="background:#3fd9a0"></i><i style="background:#3fd9a0"></i><i style="background:#3fd9a0"></i><i style="background:#3fd9a0"></i><i style="background:#ff5f56"></i><i></i><i></i></div><div class="d">17 OK · 1 FAILED</div></div>
+    </div>
+    <p class="secttl">PROJECTS <span class="r">3 RECORDS</span></p>
+    <div class="projgrid">
+      <div class="proj panel"><div class="top"><span class="id">P.01</span><div><h3>core-services</h3><div class="env">PROD · CONTAINR.DEV</div></div><span class="badge b-run">RUNNING</span></div>
+        <div class="svcs"><span>api</span><span>web</span><span>db</span><span>worker</span><span>cache</span></div>
+        <div class="ft"><span>5 SVC · DEPLOYED 4M AGO</span><span class="arrow">→</span></div></div>
+      <div class="proj panel"><div class="top"><span class="id">P.02</span><div><h3>growth-site</h3><div class="env">PROD · GROWTH.APP</div></div><span class="badge b-run">RUNNING</span></div>
+        <div class="svcs"><span>site</span><span>api</span><span>redis</span></div>
+        <div class="ft"><span>3 SVC · DEPLOYED 2H AGO</span><span class="arrow">→</span></div></div>
+      <div class="proj panel"><div class="top"><span class="id">P.03</span><div><h3>ml-pipeline</h3><div class="env">STAGING · INTERNAL</div></div><span class="badge b-warn">DEGRADED</span></div>
+        <div class="svcs"><span>api</span><span>worker</span></div>
+        <div class="ft"><span>2 SVC · 1 FAILED BUILD</span><span class="arrow">→</span></div></div>
+    </div>
+    <p class="secttl">RECENT DEPLOYMENTS <span class="r">LAST 24H</span></p>
+    <div class="panel"><table>
+      <tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
+      <tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">DEPLOYED</span></td><td>48s</td><td>4m ago</td></tr>
+      <tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">BUILDING</span></td><td>—</td><td>6m ago</td></tr>
+      <tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">FAILED</span></td><td>1m32s</td><td>1h ago</td></tr>
+      <tr><td>site</td><td>growth-site</td><td><span class="st st-ok">DEPLOYED</span></td><td>39s</td><td>2h ago</td></tr>
+    </table></div>
+  </div>
+</main></body></html>
diff --git a/docs/design/explorations/12-vector.html b/docs/design/explorations/12-vector.html
new file mode 100644
index 0000000..d4f1ab3
--- /dev/null
+++ b/docs/design/explorations/12-vector.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8"><title>12 — Vector (Dashboard)</title>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body { font-family:'Inter',system-ui,sans-serif; background:#0a0c10; color:#e4e9f1; display:flex; min-height:100vh;
+    background-image:linear-gradient(rgba(110,160,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(110,160,255,.028) 1px, transparent 1px);
+    background-size:48px 48px; }
+  .mono { font-family:'IBM Plex Mono',monospace; }
+  .rail { width:60px; border-right:1px solid rgba(255,255,255,.05); background:#0c0e13; display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:9px; }
+  .rail .mark { width:36px; height:36px; border-radius:11px; background:linear-gradient(135deg,#4da1ff,#1f6fe8); display:flex; align-items:center; justify-content:center; font-weight:800; color:#0a0c10; font-size:14px; margin-bottom:12px; font-family:'IBM Plex Mono',monospace; }
+  .rail .ic { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#49556b; font-size:15px; }
+  .rail .ic.on { background:rgba(77,161,255,.12); color:#6db1ff; }
+  main { flex:1; min-width:0; }
+  .topbar { display:flex; align-items:center; gap:18px; padding:11px 26px; border-bottom:1px solid rgba(255,255,255,.05); }
+  .brand { font-weight:800; font-size:14.5px; letter-spacing:-.2px; }
+  .brand em { font-style:normal; color:#4da1ff; }
+  .tlm { font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#49556b; display:flex; gap:16px; margin-left:8px; }
+  .tlm b { color:#8fb8e8; font-weight:500; }
+  .search { margin-left:auto; background:#12141b; border:1px solid rgba(255,255,255,.06); border-radius:9px; padding:7px 14px; color:#5c6577; font-size:11.5px; width:270px; font-family:'IBM Plex Mono',monospace; }
+  .search::before { content:'⌕ '; color:#4da1ff; }
+  .topright { display:flex; align-items:center; gap:10px; }
+  .envp { font-family:'IBM Plex Mono',monospace; font-size:10px; color:#6db1ff; border:1px solid rgba(77,161,255,.3); border-radius:999px; padding:4px 12px; letter-spacing:.1em; }
+  .avatar-t { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#4da1ff,#7c5cf0); display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; }
+  .content { padding:26px; max-width:1240px; }
+  .pagehead { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; }
+  .pagehead h1 { font-size:21px; font-weight:800; letter-spacing:-.4px; }
+  .pagehead p { font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#49556b; margin-top:5px; letter-spacing:.04em; }
+  .btn-primary { background:#4da1ff; color:#06101f; border:none; border-radius:9px; padding:9px 18px; font-size:12.5px; font-weight:700; }
+  .statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:22px; }
+  .stat { position:relative; background:#10131a; border:1px solid rgba(255,255,255,.055); border-radius:12px; padding:14px 17px; }
+  .stat::before { content:''; position:absolute; top:-1px; left:-1px; width:9px; height:9px; border-top:1.5px solid #4da1ff; border-left:1.5px solid #4da1ff; border-radius:12px 0 0 0; }
+  .stat .k { font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.16em; color:#49556b; display:flex; justify-content:space-between; }
+  .stat .k i { font-style:normal; color:#4da1ff; }
+  .stat .v { font-family:'IBM Plex Mono',monospace; font-size:30px; font-weight:500; letter-spacing:-1px; margin-top:7px; font-variant-numeric:tabular-nums; }
+  .stat .v span { font-size:14px; color:#49556b; }
+  .stat .d { font-size:11px; color:#5c6577; margin-top:6px; font-family:'IBM Plex Mono',monospace; }
+  .stat .d b { font-weight:500; }
+  .ok{color:#3dd68c}.warn{color:#f0a040}.blue{color:#6db1ff}
+  .secttl { font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:500; letter-spacing:.2em; color:#49556b; margin:0 0 12px; display:flex; align-items:center; gap:9px; }
+  .secttl::before { content:''; width:7px; height:7px; background:#4da1ff; border-radius:2px; }
+  .secttl .r { margin-left:auto; letter-spacing:.08em; color:#3a4356; }
+  .projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-bottom:22px; }
+  .proj { background:#10131a; border:1px solid rgba(255,255,255,.055); border-radius:14px; padding:17px; transition:.15s; }
+  .proj:hover { border-color:rgba(77,161,255,.4); transform:translateY(-1px); }
+  .proj .top { display:flex; align-items:center; gap:11px; margin-bottom:13px; }
+  .proj .ic { width:35px; height:35px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12.5px; color:#fff; font-family:'IBM Plex Mono',monospace; }
+  .proj h3 { font-size:14px; font-weight:700; }
+  .proj .env { font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#49556b; margin-top:2px; letter-spacing:.05em; }
+  .badge { margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:500; letter-spacing:.12em; padding:3px 9px; border-radius:4px; }
+  .b-run { background:rgba(61,214,140,.1); color:#3dd68c; } .b-warn { background:rgba(240,160,64,.1); color:#f0a040; }
+  .svcs { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:13px; }
+  .svcs span { font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#8fb8e8; border:1px solid rgba(110,160,255,.16); border-radius:6px; padding:3px 8px; }
+  .proj .ft { display:flex; justify-content:space-between; align-items:center; font-family:'IBM Plex Mono',monospace; font-size:10px; color:#49556b; border-top:1px solid rgba(255,255,255,.05); padding-top:11px; letter-spacing:.04em; }
+  .proj .ft .arrow { color:#6db1ff; }
+  .tbl { position:relative; background:#10131a; border:1px solid rgba(255,255,255,.055); border-radius:14px; overflow:hidden; }
+  table { width:100%; border-collapse:collapse; font-size:12px; }
+  th { text-align:left; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.2em; color:#49556b; font-weight:500; padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.06); }
+  td { padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.04); color:#a9b4c6; font-family:'IBM Plex Mono',monospace; font-size:11.5px; }
+  td:first-child { color:#e4e9f1; font-family:'Inter',sans-serif; font-weight:600; font-size:12.5px; }
+  .st { font-size:9.5px; font-weight:500; letter-spacing:.1em; padding:3px 9px; border-radius:4px; }
+  .st-ok { background:rgba(61,214,140,.1); color:#3dd68c; } .st-run { background:rgba(77,161,255,.12); color:#6db1ff; } .st-fail { background:rgba(255,95,86,.1); color:#ff5f56; }
+</style></head><body>
+<nav class="rail"><div class="mark">C</div><div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⚙</div></nav>
+<main>
+  <div class="topbar">
+    <div class="brand">contain<em>r</em></div>
+    <div class="tlm"><span>uptime <b>7h 41m</b></span><span>node <b>cnr-node-01</b></span></div>
+    <div class="search">search projects, builds, logs</div>
+    <div class="topright"><span class="envp">production</span><div class="avatar-t">TD</div></div>
+  </div>
+  <div class="content">
+    <div class="pagehead">
+      <div><h1>Projects</h1><p>3 projects · 9 services · 1 host</p></div>
+      <button class="btn-primary">+ New Project</button>
+    </div>
+    <div class="statrow">
+      <div class="stat"><div class="k"><span>HOST.CPU</span><i>◦</i></div><div class="v">14<span>%</span></div><div class="d"><b class="ok">healthy</b> · 16 cores · load 2.41</div></div>
+      <div class="stat"><div class="k"><span>HOST.MEM</span><i>◦</i></div><div class="v">72<span>%</span></div><div class="d">9.8G / 13G used</div></div>
+      <div class="stat"><div class="k"><span>HOST.DISK</span><i>◦</i></div><div class="v">73<span>%</span></div><div class="d">338G of 465G</div></div>
+      <div class="stat"><div class="k"><span>DEPLOYS.7D</span><i>◦</i></div><div class="v">18</div><div class="d"><b class="ok">17 ok</b> · <b class="warn">1 failed</b></div></div>
+    </div>
+    <p class="secttl">PROJECTS <span class="r">3</span></p>
+    <div class="projgrid">
+      <div class="proj"><div class="top"><div class="ic" style="background:#4da1ff">CS</div><div><h3>core-services</h3><div class="env">prod · containr.dev</div></div><span class="badge b-run">RUNNING</span></div>
+        <div class="svcs"><span>api</span><span>web</span><span>db</span><span>worker</span><span>cache</span></div>
+        <div class="ft"><span>5 svc · deployed 4m ago</span><span class="arrow">→</span></div></div>
+      <div class="proj"><div class="top"><div class="ic" style="background:#7c5cf0">GS</div><div><h3>growth-site</h3><div class="env">prod · growth.app</div></div><span class="badge b-run">RUNNING</span></div>
+        <div class="svcs"><span>site</span><span>api</span><span>redis</span></div>
+        <div class="ft"><span>3 svc · deployed 2h ago</span><span class="arrow">→</span></div></div>
+      <div class="proj"><div class="top"><div class="ic" style="background:#f0a040">ML</div><div><h3>ml-pipeline</h3><div class="env">staging · internal</div></div><span class="badge b-warn">DEGRADED</span></div>
+        <div class="svcs"><span>api</span><span>worker</span></div>
+        <div class="ft"><span>2 svc · 1 failed build</span><span class="arrow">→</span></div></div>
+    </div>
+    <p class="secttl">RECENT DEPLOYMENTS <span class="r">last 24h</span></p>
+    <div class="tbl"><table>
+      <tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
+      <tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">DEPLOYED</span></td><td>48s</td><td>4m ago</td></tr>
+      <tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">BUILDING</span></td><td>—</td><td>6m ago</td></tr>
+      <tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">FAILED</span></td><td>1m32s</td><td>1h ago</td></tr>
+      <tr><td>site</td><td>growth-site</td><td><span class="st st-ok">DEPLOYED</span></td><td>39s</td><td>2h ago</td></tr>
+    </table></div>
+  </div>
+</main></body></html>
diff --git a/docs/design/explorations/13-meridian.html b/docs/design/explorations/13-meridian.html
new file mode 100644
index 0000000..5e233ed
--- /dev/null
+++ b/docs/design/explorations/13-meridian.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8"><title>13 — Meridian (Dashboard)</title>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body { font-family:'Inter',system-ui,sans-serif; background:#0d0e0c; color:#e8ece4; display:flex; min-height:100vh;
+    background-image:linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
+    background-size:52px 52px; }
+  .mono { font-family:'IBM Plex Mono',monospace; }
+  .rail { width:60px; border-right:1px solid rgba(255,255,255,.05); background:#0f100e; display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:9px; }
+  .rail .mark { width:36px; height:36px; border-radius:50%; border:1.5px solid #b8e34d; color:#b8e34d; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; margin-bottom:12px; font-family:'IBM Plex Mono',monospace; }
+  .rail .ic { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#525a4c; font-size:15px; }
+  .rail .ic.on { background:rgba(184,227,77,.1); color:#c8ee6a; }
+  main { flex:1; min-width:0; }
+  .topbar { display:flex; align-items:center; gap:18px; padding:11px 26px; border-bottom:1px solid rgba(255,255,255,.05); }
+  .brand { font-weight:800; font-size:14.5px; letter-spacing:-.2px; }
+  .brand em { font-style:normal; color:#b8e34d; }
+  .tlm { font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#525a4c; display:flex; gap:16px; margin-left:8px; }
+  .tlm b { color:#a9b39a; font-weight:500; }
+  .search { margin-left:auto; background:#141512; border:1px solid rgba(255,255,255,.06); border-radius:9px; padding:7px 14px; color:#6a7260; font-size:11.5px; width:270px; font-family:'IBM Plex Mono',monospace; }
+  .search::before { content:'⌕ '; color:#b8e34d; }
+  .topright { display:flex; align-items:center; gap:10px; }
+  .envp { font-family:'IBM Plex Mono',monospace; font-size:10px; color:#c8ee6a; border:1px solid rgba(184,227,77,.3); border-radius:999px; padding:4px 12px; letter-spacing:.1em; }
+  .avatar-t { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#b8e34d,#4dc88a); display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; color:#0d0e0c; }
+  .content { padding:26px; max-width:1240px; }
+  .pagehead { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; }
+  .pagehead h1 { font-size:21px; font-weight:800; letter-spacing:-.4px; }
+  .pagehead p { font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#525a4c; margin-top:5px; letter-spacing:.04em; }
+  .btn-primary { background:#b8e34d; color:#13180a; border:none; border-radius:9px; padding:9px 18px; font-size:12.5px; font-weight:800; }
+  .statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:22px; }
+  .stat { background:#121310; border:1px solid rgba(255,255,255,.05); border-radius:12px; padding:14px 17px; border-left:2px solid rgba(184,227,77,.5); }
+  .stat .k { font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.16em; color:#525a4c; display:flex; justify-content:space-between; }
+  .stat .v { font-family:'IBM Plex Mono',monospace; font-size:30px; font-weight:500; letter-spacing:-1px; margin-top:7px; font-variant-numeric:tabular-nums; }
+  .stat .v span { font-size:14px; color:#525a4c; }
+  .meter { height:6px; background:rgba(255,255,255,.05); border-radius:3px; margin-top:10px; overflow:hidden; }
+  .meter i { display:block; height:100%; border-radius:3px; }
+  .stat .d { font-size:11px; color:#6a7260; margin-top:8px; font-family:'IBM Plex Mono',monospace; }
+  .stat .d b { font-weight:500; }
+  .ok{color:#5ee6a0}.warn{color:#f0c040}.lime{color:#c8ee6a}
+  .secttl { font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:500; letter-spacing:.2em; color:#525a4c; margin:0 0 12px; display:flex; align-items:center; gap:9px; }
+  .secttl::before { content:''; width:14px; height:1.5px; background:#b8e34d; }
+  .secttl .r { margin-left:auto; letter-spacing:.08em; color:#3d433a; }
+  .projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-bottom:22px; }
+  .proj { background:#121310; border:1px solid rgba(255,255,255,.05); border-radius:14px; padding:17px; transition:.15s; }
+  .proj:hover { border-color:rgba(184,227,77,.4); transform:translateY(-1px); }
+  .proj .top { display:flex; align-items:center; gap:11px; margin-bottom:13px; }
+  .proj .ic { width:35px; height:35px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12.5px; font-family:'IBM Plex Mono',monospace; }
+  .proj h3 { font-size:14px; font-weight:700; }
+  .proj .env { font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#525a4c; margin-top:2px; letter-spacing:.05em; }
+  .badge { margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:500; letter-spacing:.12em; padding:3px 9px; border-radius:999px; border:1px solid; }
+  .b-run { border-color:rgba(94,230,160,.3); color:#5ee6a0; } .b-warn { border-color:rgba(240,192,64,.35); color:#f0c040; }
+  .svcs { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:13px; }
+  .svcs span { font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#a9b39a; background:rgba(255,255,255,.04); border-radius:6px; padding:3px 8px; }
+  .proj .ft { display:flex; justify-content:space-between; align-items:center; font-family:'IBM Plex Mono',monospace; font-size:10px; color:#525a4c; border-top:1px solid rgba(255,255,255,.05); padding-top:11px; letter-spacing:.04em; }
+  .proj .ft .arrow { color:#c8ee6a; }
+  .tbl { background:#121310; border:1px solid rgba(255,255,255,.05); border-radius:14px; overflow:hidden; }
+  table { width:100%; border-collapse:collapse; font-size:12px; }
+  th { text-align:left; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.2em; color:#525a4c; font-weight:500; padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.06); }
+  td { padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.04); color:#b0b8a4; font-family:'IBM Plex Mono',monospace; font-size:11.5px; }
+  td:first-child { color:#e8ece4; font-family:'Inter',sans-serif; font-weight:600; font-size:12.5px; }
+  .st { font-size:9.5px; font-weight:500; letter-spacing:.1em; padding:3px 9px; border-radius:999px; }
+  .st-ok { background:rgba(94,230,160,.1); color:#5ee6a0; } .st-run { background:rgba(184,227,77,.12); color:#c8ee6a; } .st-fail { background:rgba(255,110,100,.1); color:#ff7a70; }
+</style></head><body>
+<nav class="rail"><div class="mark">C</div><div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⚙</div></nav>
+<main>
+  <div class="topbar">
+    <div class="brand">contain<em>r</em></div>
+    <div class="tlm"><span>uptime <b>7h 41m</b></span><span>node <b>cnr-node-01</b></span></div>
+    <div class="search">search projects, builds, logs</div>
+    <div class="topright"><span class="envp">production</span><div class="avatar-t">TD</div></div>
+  </div>
+  <div class="content">
+    <div class="pagehead">
+      <div><h1>Projects</h1><p>3 projects · 9 services · 1 host</p></div>
+      <button class="btn-primary">+ New Project</button>
+    </div>
+    <div class="statrow">
+      <div class="stat"><div class="k"><span>HOST.CPU</span></div><div class="v">14<span>%</span></div><div class="meter"><i style="width:14%;background:#5ee6a0"></i></div><div class="d"><b class="ok">healthy</b> · 16 cores · load 2.41</div></div>
+      <div class="stat"><div class="k"><span>HOST.MEM</span></div><div class="v">72<span>%</span></div><div class="meter"><i style="width:72%;background:#b8e34d"></i></div><div class="d">9.8G / 13G used</div></div>
+      <div class="stat"><div class="k"><span>HOST.DISK</span></div><div class="v">73<span>%</span></div><div class="meter"><i style="width:73%;background:#f0c040"></i></div><div class="d">338G of 465G</div></div>
+      <div class="stat"><div class="k"><span>DEPLOYS.7D</span></div><div class="v">18</div><div class="d" style="margin-top:14px"><b class="ok">17 ok</b> · <b class="warn">1 failed</b></div></div>
+    </div>
+    <p class="secttl">PROJECTS <span class="r">3</span></p>
+    <div class="projgrid">
+      <div class="proj"><div class="top"><div class="ic" style="background:rgba(184,227,77,.15);color:#c8ee6a">CS</div><div><h3>core-services</h3><div class="env">prod · containr.dev</div></div><span class="badge b-run">running</span></div>
+        <div class="svcs"><span>api</span><span>web</span><span>db</span><span>worker</span><span>cache</span></div>
+        <div class="ft"><span>5 svc · deployed 4m ago</span><span class="arrow">→</span></div></div>
+      <div class="proj"><div class="top"><div class="ic" style="background:rgba(94,230,160,.12);color:#5ee6a0">GS</div><div><h3>growth-site</h3><div class="env">prod · growth.app</div></div><span class="badge b-run">running</span></div>
+        <div class="svcs"><span>site</span><span>api</span><span>redis</span></div>
+        <div class="ft"><span>3 svc · deployed 2h ago</span><span class="arrow">→</span></div></div>
+      <div class="proj"><div class="top"><div class="ic" style="background:rgba(240,192,64,.12);color:#f0c040">ML</div><div><h3>ml-pipeline</h3><div class="env">staging · internal</div></div><span class="badge b-warn">degraded</span></div>
+        <div class="svcs"><span>api</span><span>worker</span></div>
+        <div class="ft"><span>2 svc · 1 failed build</span><span class="arrow">→</span></div></div>
+    </div>
+    <p class="secttl">RECENT DEPLOYMENTS <span class="r">last 24h</span></p>
+    <div class="tbl"><table>
+      <tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
+      <tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">deployed</span></td><td>48s</td><td>4m ago</td></tr>
+      <tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">building</span></td><td>—</td><td>6m ago</td></tr>
+      <tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">failed</span></td><td>1m32s</td><td>1h ago</td></tr>
+      <tr><td>site</td><td>growth-site</td><td><span class="st st-ok">deployed</span></td><td>39s</td><td>2h ago</td></tr>
+    </table></div>
+  </div>
+</main></body></html>
diff --git a/docs/design/explorations/14-midnight-violet.html b/docs/design/explorations/14-midnight-violet.html
new file mode 100644
index 0000000..0403791
--- /dev/null
+++ b/docs/design/explorations/14-midnight-violet.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8"><title>14 — Midnight Violet</title>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600;700&display=swap');
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body { font-family:'Inter',system-ui,sans-serif; background:#0b0c11; color:#eceef4; display:flex; min-height:100vh; }
+  .mono { font-family:'JetBrains Mono',monospace; }
+  body::before { content:''; position:fixed; inset:0; background:radial-gradient(900px 500px at 70% -10%, rgba(139,124,246,.07), transparent 60%); pointer-events:none; }
+  .rail { width:62px; border-right:1px solid rgba(255,255,255,.05); background:#0e0f14; display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:8px; }
+  .rail .mark { width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg,#8b7cf6,#6b5ce0); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
+  .rail .ic { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#565a68; font-size:16px; }
+  .rail .ic.on { background:rgba(139,124,246,.14); color:#a89bff; }
+  main { flex:1; min-width:0; }
+  .topbar { display:flex; align-items:center; gap:16px; padding:11px 26px; border-bottom:1px solid rgba(255,255,255,.05); }
+  .brand { font-weight:800; font-size:15px; letter-spacing:-.3px; }
+  .brand em { font-style:normal; color:#a89bff; }
+  .search { background:#14151b; border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:7px 14px; color:#6b6e7d; font-size:12px; width:300px; font-family:'JetBrains Mono',monospace; }
+  .search::before { content:'$ '; color:#a89bff; }
+  .topright { margin-left:auto; display:flex; align-items:center; gap:10px; }
+  .pill { font-size:11px; color:#9a9dab; background:#14151b; border:1px solid rgba(255,255,255,.06); border-radius:999px; padding:6px 14px; font-family:'JetBrains Mono',monospace; }
+  .avatar-t { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#8b7cf6,#5c6ef0); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
+  .content { padding:26px; max-width:1240px; }
+  .pagehead { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; }
+  .pagehead h1 { font-size:22px; font-weight:800; letter-spacing:-.5px; }
+  .pagehead p { font-size:12px; color:#6b6e7d; margin-top:4px; font-family:'JetBrains Mono',monospace; }
+  .btn-primary { background:#8b7cf6; color:#fff; border:none; border-radius:10px; padding:9px 18px; font-size:13px; font-weight:700; box-shadow:0 4px 16px rgba(139,124,246,.35); }
+  .statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
+  .stat { background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:15px 18px; }
+  .stat .k { font-size:10px; color:#6b6e7d; letter-spacing:.14em; font-weight:700; font-family:'JetBrains Mono',monospace; }
+  .stat .v { font-size:26px; font-weight:800; letter-spacing:-.8px; margin-top:6px; }
+  .stat .d { font-size:11px; color:#565a68; margin-top:4px; font-family:'JetBrains Mono',monospace; }
+  .stat .d b { font-weight:600; }
+  .ok{color:#3dd68c}.warn{color:#f0a040}.pink{color:#a89bff}
+  .secttl { font-size:11px; font-weight:700; letter-spacing:.16em; color:#565a68; margin:0 0 12px; font-family:'JetBrains Mono',monospace; }
+  .secttl::before { content:'// '; color:#a89bff; }
+  .projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; }
+  .proj { background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:18px; transition:.15s; }
+  .proj:hover { border-color:rgba(139,124,246,.45); transform:translateY(-1px); }
+  .proj .top { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
+  .proj .ic { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:#fff; font-family:'JetBrains Mono',monospace; }
+  .proj h3 { font-size:14.5px; font-weight:700; }
+  .proj .env { font-size:10.5px; color:#6b6e7d; margin-top:2px; font-family:'JetBrains Mono',monospace; }
+  .badge { margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.08em; padding:3px 9px; border-radius:4px; font-family:'JetBrains Mono',monospace; }
+  .b-run { background:rgba(61,214,140,.1); color:#3dd68c; } .b-warn { background:rgba(240,160,64,.1); color:#f0a040; }
+  .svcs { display:flex; gap:6px; margin-bottom:14px; }
+  .svcs span { height:26px; padding:0 8px; border-radius:7px; background:#191b23; border:1px solid rgba(255,255,255,.07); display:flex; align-items:center; font-size:10px; color:#8a8d9c; font-weight:600; font-family:'JetBrains Mono',monospace; }
+  .proj .ft { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#565a68; border-top:1px solid rgba(255,255,255,.05); padding-top:12px; font-family:'JetBrains Mono',monospace; }
+  .proj .ft .arrow { color:#a89bff; }
+  table { width:100%; border-collapse:collapse; background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:14px; overflow:hidden; font-size:12.5px; }
+  th { text-align:left; font-size:9.5px; letter-spacing:.16em; color:#565a68; font-weight:700; padding:10px 18px; border-bottom:1px solid rgba(255,255,255,.06); font-family:'JetBrains Mono',monospace; }
+  td { padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.04); color:#b6b9c6; font-family:'JetBrains Mono',monospace; font-size:12px; }
+  td:first-child { color:#eceef4; font-weight:600; font-family:'Inter',sans-serif; }
+  .st { font-size:10px; font-weight:700; padding:2px 8px; border-radius:4px; letter-spacing:.06em; }
+  .st-ok { background:rgba(61,214,140,.1); color:#3dd68c; } .st-run { background:rgba(108,142,240,.12); color:#6c8ef0; } .st-fail { background:rgba(255,112,67,.12); color:#ff7043; }
+
+  .stat .k { display:flex; justify-content:space-between; align-items:center; }
+  .live { width:6px; height:6px; border-radius:50%; background:#3dd68c; box-shadow:0 0 6px rgba(61,214,140,.7); animation:pulse 2s infinite; }
+  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
+  .spark { display:flex; gap:2.5px; align-items:flex-end; height:26px; margin:10px 0 4px; }
+  .spark i { flex:1; background:linear-gradient(180deg, #8b7cf6, transparent); opacity:.7; border-radius:1px; }
+  .bar { height:5px; background:rgba(255,255,255,.06); border-radius:3px; margin:12px 0 6px; overflow:hidden; }
+  .bar i { display:block; height:100%; background:#8b7cf6; border-radius:3px; }
+  .dot { display:inline-block; width:5px; height:5px; border-radius:50%; margin-right:6px; }
+  .dot-ok { background:#3dd68c; } .dot-err { background:#ff7043; }
+  tr:hover td { background:rgba(255,255,255,.02); }
+</style></head><body>
+<nav class="rail">
+  <div class="mark"><svg width="20" height="20" viewBox="0 0 64 64"><g fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="5"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
+  <div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⚙</div>
+</nav>
+<main>
+  <div class="topbar">
+    <div class="brand">contain<em>r</em></div>
+    <div class="search">search projects, builds, logs…</div>
+    <div class="topright"><span class="pill">env:production</span><div class="avatar-t">TD</div></div>
+  </div>
+  <div class="content">
+    <div class="pagehead">
+      <div><h1>Projects</h1><p>3 projects · 9 services · 1 host</p></div>
+      <button class="btn-primary">+ New Project</button>
+    </div>
+    <div class="statrow">
+      <div class="stat"><div class="k"><span>HOST.CPU</span><span class="live"></span></div><div class="v">14%</div><div class="spark"><i style="height:30%"></i><i style="height:45%"></i><i style="height:38%"></i><i style="height:55%"></i><i style="height:42%"></i><i style="height:60%"></i><i style="height:48%"></i><i style="height:35%"></i><i style="height:52%"></i><i style="height:40%"></i><i style="height:30%"></i><i style="height:22%"></i></div><div class="d"><b class="ok">healthy</b> · 16 cores · load 2.41</div></div>
+      <div class="stat"><div class="k"><span>HOST.MEM</span><span class="live"></span></div><div class="v">72%</div><div class="bar"><i style="width:72%"></i></div><div class="d">9.8G / 13G used</div></div>
+      <div class="stat"><div class="k"><span>HOST.DISK</span><span class="live"></span></div><div class="v">73%</div><div class="bar"><i style="width:73%;background:#f0a040"></i></div><div class="d">338G of 465G</div></div>
+      <div class="stat"><div class="k"><span>DEPLOYS.7D</span></div><div class="v">18</div><div class="bar"><i style="width:94%"></i></div><div class="d"><b class="ok">17 ok</b> · <b class="warn">1 failed</b></div></div>
+    </div>
+    <p class="secttl">PROJECTS</p>
+    <div class="projgrid">
+      <div class="proj"><div class="top"><div class="ic" style="background:#8b7cf6">CS</div><div><h3>core-services</h3><div class="env">prod · containr.dev</div></div><span class="badge b-run">RUNNING</span></div>
+        <div class="svcs"><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-ok"></b>web</span><span><b class="dot dot-ok"></b>db</span><span><b class="dot dot-ok"></b>worker</span><span>+1</span></div>
+        <div class="ft"><span>5 svc · deployed 4m ago</span><span class="arrow">→</span></div></div>
+      <div class="proj"><div class="top"><div class="ic" style="background:#6c5ce7">GS</div><div><h3>growth-site</h3><div class="env">prod · growth.app</div></div><span class="badge b-run">RUNNING</span></div>
+        <div class="svcs"><span><b class="dot dot-ok"></b>site</span><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-ok"></b>redis</span></div>
+        <div class="ft"><span>3 svc · deployed 2h ago</span><span class="arrow">→</span></div></div>
+      <div class="proj"><div class="top"><div class="ic" style="background:#ff8a5c">ML</div><div><h3>ml-pipeline</h3><div class="env">staging · internal</div></div><span class="badge b-warn">DEGRADED</span></div>
+        <div class="svcs"><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-err"></b>worker</span></div>
+        <div class="ft"><span>2 svc · 1 failed build</span><span class="arrow">→</span></div></div>
+    </div>
+    <p class="secttl">RECENT DEPLOYMENTS</p>
+    <table>
+      <tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
+      <tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">DEPLOYED</span></td><td>48s</td><td>4m ago</td></tr>
+      <tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">BUILDING</span></td><td>—</td><td>6m ago</td></tr>
+      <tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">FAILED</span></td><td>1m32s</td><td>1h ago</td></tr>
+      <tr><td>site</td><td>growth-site</td><td><span class="st st-ok">DEPLOYED</span></td><td>39s</td><td>2h ago</td></tr>
+    </table>
+  </div>
+</main></body></html>
diff --git a/docs/design/explorations/15-midnight-cyan.html b/docs/design/explorations/15-midnight-cyan.html
new file mode 100644
index 0000000..aedb696
--- /dev/null
+++ b/docs/design/explorations/15-midnight-cyan.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8"><title>15 — Midnight Cyan</title>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600;700&display=swap');
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body { font-family:'Inter',system-ui,sans-serif; background:#0b0c11; color:#eceef4; display:flex; min-height:100vh; }
+  .mono { font-family:'JetBrains Mono',monospace; }
+  body::before { content:''; position:fixed; inset:0; background:radial-gradient(900px 500px at 70% -10%, rgba(45,212,191,.07), transparent 60%); pointer-events:none; }
+  .rail { width:62px; border-right:1px solid rgba(255,255,255,.05); background:#0e0f14; display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:8px; }
+  .rail .mark { width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg,#2dd4bf,#0d9488); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
+  .rail .ic { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#565a68; font-size:16px; }
+  .rail .ic.on { background:rgba(45,212,191,.14); color:#5eead4; }
+  main { flex:1; min-width:0; }
+  .topbar { display:flex; align-items:center; gap:16px; padding:11px 26px; border-bottom:1px solid rgba(255,255,255,.05); }
+  .brand { font-weight:800; font-size:15px; letter-spacing:-.3px; }
+  .brand em { font-style:normal; color:#5eead4; }
+  .search { background:#14151b; border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:7px 14px; color:#6b6e7d; font-size:12px; width:300px; font-family:'JetBrains Mono',monospace; }
+  .search::before { content:'$ '; color:#5eead4; }
+  .topright { margin-left:auto; display:flex; align-items:center; gap:10px; }
+  .pill { font-size:11px; color:#9a9dab; background:#14151b; border:1px solid rgba(255,255,255,.06); border-radius:999px; padding:6px 14px; font-family:'JetBrains Mono',monospace; }
+  .avatar-t { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#2dd4bf,#5c6ef0); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
+  .content { padding:26px; max-width:1240px; }
+  .pagehead { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; }
+  .pagehead h1 { font-size:22px; font-weight:800; letter-spacing:-.5px; }
+  .pagehead p { font-size:12px; color:#6b6e7d; margin-top:4px; font-family:'JetBrains Mono',monospace; }
+  .btn-primary { background:#2dd4bf; color:#fff; border:none; border-radius:10px; padding:9px 18px; font-size:13px; font-weight:700; box-shadow:0 4px 16px rgba(45,212,191,.35); }
+  .statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
+  .stat { background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:15px 18px; }
+  .stat .k { font-size:10px; color:#6b6e7d; letter-spacing:.14em; font-weight:700; font-family:'JetBrains Mono',monospace; }
+  .stat .v { font-size:26px; font-weight:800; letter-spacing:-.8px; margin-top:6px; }
+  .stat .d { font-size:11px; color:#565a68; margin-top:4px; font-family:'JetBrains Mono',monospace; }
+  .stat .d b { font-weight:600; }
+  .ok{color:#3dd68c}.warn{color:#f0a040}.pink{color:#5eead4}
+  .secttl { font-size:11px; font-weight:700; letter-spacing:.16em; color:#565a68; margin:0 0 12px; font-family:'JetBrains Mono',monospace; }
+  .secttl::before { content:'// '; color:#5eead4; }
+  .projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; }
+  .proj { background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:18px; transition:.15s; }
+  .proj:hover { border-color:rgba(45,212,191,.45); transform:translateY(-1px); }
+  .proj .top { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
+  .proj .ic { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:#fff; font-family:'JetBrains Mono',monospace; }
+  .proj h3 { font-size:14.5px; font-weight:700; }
+  .proj .env { font-size:10.5px; color:#6b6e7d; margin-top:2px; font-family:'JetBrains Mono',monospace; }
+  .badge { margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.08em; padding:3px 9px; border-radius:4px; font-family:'JetBrains Mono',monospace; }
+  .b-run { background:rgba(61,214,140,.1); color:#3dd68c; } .b-warn { background:rgba(240,160,64,.1); color:#f0a040; }
+  .svcs { display:flex; gap:6px; margin-bottom:14px; }
+  .svcs span { height:26px; padding:0 8px; border-radius:7px; background:#191b23; border:1px solid rgba(255,255,255,.07); display:flex; align-items:center; font-size:10px; color:#8a8d9c; font-weight:600; font-family:'JetBrains Mono',monospace; }
+  .proj .ft { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#565a68; border-top:1px solid rgba(255,255,255,.05); padding-top:12px; font-family:'JetBrains Mono',monospace; }
+  .proj .ft .arrow { color:#5eead4; }
+  table { width:100%; border-collapse:collapse; background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:14px; overflow:hidden; font-size:12.5px; }
+  th { text-align:left; font-size:9.5px; letter-spacing:.16em; color:#565a68; font-weight:700; padding:10px 18px; border-bottom:1px solid rgba(255,255,255,.06); font-family:'JetBrains Mono',monospace; }
+  td { padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.04); color:#b6b9c6; font-family:'JetBrains Mono',monospace; font-size:12px; }
+  td:first-child { color:#eceef4; font-weight:600; font-family:'Inter',sans-serif; }
+  .st { font-size:10px; font-weight:700; padding:2px 8px; border-radius:4px; letter-spacing:.06em; }
+  .st-ok { background:rgba(61,214,140,.1); color:#3dd68c; } .st-run { background:rgba(108,142,240,.12); color:#6c8ef0; } .st-fail { background:rgba(255,112,67,.12); color:#ff7043; }
+
+  .stat .k { display:flex; justify-content:space-between; align-items:center; }
+  .live { width:6px; height:6px; border-radius:50%; background:#3dd68c; box-shadow:0 0 6px rgba(61,214,140,.7); animation:pulse 2s infinite; }
+  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
+  .spark { display:flex; gap:2.5px; align-items:flex-end; height:26px; margin:10px 0 4px; }
+  .spark i { flex:1; background:linear-gradient(180deg, #2dd4bf, transparent); opacity:.7; border-radius:1px; }
+  .bar { height:5px; background:rgba(255,255,255,.06); border-radius:3px; margin:12px 0 6px; overflow:hidden; }
+  .bar i { display:block; height:100%; background:#2dd4bf; border-radius:3px; }
+  .dot { display:inline-block; width:5px; height:5px; border-radius:50%; margin-right:6px; }
+  .dot-ok { background:#3dd68c; } .dot-err { background:#ff7043; }
+  tr:hover td { background:rgba(255,255,255,.02); }
+</style></head><body>
+<nav class="rail">
+  <div class="mark"><svg width="20" height="20" viewBox="0 0 64 64"><g fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="5"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
+  <div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⚙</div>
+</nav>
+<main>
+  <div class="topbar">
+    <div class="brand">contain<em>r</em></div>
+    <div class="search">search projects, builds, logs…</div>
+    <div class="topright"><span class="pill">env:production</span><div class="avatar-t">TD</div></div>
+  </div>
+  <div class="content">
+    <div class="pagehead">
+      <div><h1>Projects</h1><p>3 projects · 9 services · 1 host</p></div>
+      <button class="btn-primary">+ New Project</button>
+    </div>
+    <div class="statrow">
+      <div class="stat"><div class="k"><span>HOST.CPU</span><span class="live"></span></div><div class="v">14%</div><div class="spark"><i style="height:30%"></i><i style="height:45%"></i><i style="height:38%"></i><i style="height:55%"></i><i style="height:42%"></i><i style="height:60%"></i><i style="height:48%"></i><i style="height:35%"></i><i style="height:52%"></i><i style="height:40%"></i><i style="height:30%"></i><i style="height:22%"></i></div><div class="d"><b class="ok">healthy</b> · 16 cores · load 2.41</div></div>
+      <div class="stat"><div class="k"><span>HOST.MEM</span><span class="live"></span></div><div class="v">72%</div><div class="bar"><i style="width:72%"></i></div><div class="d">9.8G / 13G used</div></div>
+      <div class="stat"><div class="k"><span>HOST.DISK</span><span class="live"></span></div><div class="v">73%</div><div class="bar"><i style="width:73%;background:#f0a040"></i></div><div class="d">338G of 465G</div></div>
+      <div class="stat"><div class="k"><span>DEPLOYS.7D</span></div><div class="v">18</div><div class="bar"><i style="width:94%"></i></div><div class="d"><b class="ok">17 ok</b> · <b class="warn">1 failed</b></div></div>
+    </div>
+    <p class="secttl">PROJECTS</p>
+    <div class="projgrid">
+      <div class="proj"><div class="top"><div class="ic" style="background:#2dd4bf">CS</div><div><h3>core-services</h3><div class="env">prod · containr.dev</div></div><span class="badge b-run">RUNNING</span></div>
+        <div class="svcs"><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-ok"></b>web</span><span><b class="dot dot-ok"></b>db</span><span><b class="dot dot-ok"></b>worker</span><span>+1</span></div>
+        <div class="ft"><span>5 svc · deployed 4m ago</span><span class="arrow">→</span></div></div>
+      <div class="proj"><div class="top"><div class="ic" style="background:#6c5ce7">GS</div><div><h3>growth-site</h3><div class="env">prod · growth.app</div></div><span class="badge b-run">RUNNING</span></div>
+        <div class="svcs"><span><b class="dot dot-ok"></b>site</span><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-ok"></b>redis</span></div>
+        <div class="ft"><span>3 svc · deployed 2h ago</span><span class="arrow">→</span></div></div>
+      <div class="proj"><div class="top"><div class="ic" style="background:#ff8a5c">ML</div><div><h3>ml-pipeline</h3><div class="env">staging · internal</div></div><span class="badge b-warn">DEGRADED</span></div>
+        <div class="svcs"><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-err"></b>worker</span></div>
+        <div class="ft"><span>2 svc · 1 failed build</span><span class="arrow">→</span></div></div>
+    </div>
+    <p class="secttl">RECENT DEPLOYMENTS</p>
+    <table>
+      <tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
+      <tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">DEPLOYED</span></td><td>48s</td><td>4m ago</td></tr>
+      <tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">BUILDING</span></td><td>—</td><td>6m ago</td></tr>
+      <tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">FAILED</span></td><td>1m32s</td><td>1h ago</td></tr>
+      <tr><td>site</td><td>growth-site</td><td><span class="st st-ok">DEPLOYED</span></td><td>39s</td><td>2h ago</td></tr>
+    </table>
+  </div>
+</main></body></html>
diff --git a/docs/design/explorations/16-midnight-sunset.html b/docs/design/explorations/16-midnight-sunset.html
new file mode 100644
index 0000000..52f4e2e
--- /dev/null
+++ b/docs/design/explorations/16-midnight-sunset.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8"><title>16 — Midnight Sunset</title>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600;700&display=swap');
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body { font-family:'Inter',system-ui,sans-serif; background:#0b0c11; color:#eceef4; display:flex; min-height:100vh; }
+  .mono { font-family:'JetBrains Mono',monospace; }
+  body::before { content:''; position:fixed; inset:0; background:radial-gradient(900px 500px at 70% -10%, rgba(251,146,60,.07), transparent 60%); pointer-events:none; }
+  .rail { width:62px; border-right:1px solid rgba(255,255,255,.05); background:#0e0f14; display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:8px; }
+  .rail .mark { width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg,#fb923c,#ea6f1f); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
+  .rail .ic { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#565a68; font-size:16px; }
+  .rail .ic.on { background:rgba(251,146,60,.14); color:#fbb06a; }
+  main { flex:1; min-width:0; }
+  .topbar { display:flex; align-items:center; gap:16px; padding:11px 26px; border-bottom:1px solid rgba(255,255,255,.05); }
+  .brand { font-weight:800; font-size:15px; letter-spacing:-.3px; }
+  .brand em { font-style:normal; color:#fbb06a; }
+  .search { background:#14151b; border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:7px 14px; color:#6b6e7d; font-size:12px; width:300px; font-family:'JetBrains Mono',monospace; }
+  .search::before { content:'$ '; color:#fbb06a; }
+  .topright { margin-left:auto; display:flex; align-items:center; gap:10px; }
+  .pill { font-size:11px; color:#9a9dab; background:#14151b; border:1px solid rgba(255,255,255,.06); border-radius:999px; padding:6px 14px; font-family:'JetBrains Mono',monospace; }
+  .avatar-t { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#fb923c,#5c6ef0); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
+  .content { padding:26px; max-width:1240px; }
+  .pagehead { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; }
+  .pagehead h1 { font-size:22px; font-weight:800; letter-spacing:-.5px; }
+  .pagehead p { font-size:12px; color:#6b6e7d; margin-top:4px; font-family:'JetBrains Mono',monospace; }
+  .btn-primary { background:#fb923c; color:#fff; border:none; border-radius:10px; padding:9px 18px; font-size:13px; font-weight:700; box-shadow:0 4px 16px rgba(251,146,60,.35); }
+  .statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
+  .stat { background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:15px 18px; }
+  .stat .k { font-size:10px; color:#6b6e7d; letter-spacing:.14em; font-weight:700; font-family:'JetBrains Mono',monospace; }
+  .stat .v { font-size:26px; font-weight:800; letter-spacing:-.8px; margin-top:6px; }
+  .stat .d { font-size:11px; color:#565a68; margin-top:4px; font-family:'JetBrains Mono',monospace; }
+  .stat .d b { font-weight:600; }
+  .ok{color:#3dd68c}.warn{color:#f0a040}.pink{color:#fbb06a}
+  .secttl { font-size:11px; font-weight:700; letter-spacing:.16em; color:#565a68; margin:0 0 12px; font-family:'JetBrains Mono',monospace; }
+  .secttl::before { content:'// '; color:#fbb06a; }
+  .projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; }
+  .proj { background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:18px; transition:.15s; }
+  .proj:hover { border-color:rgba(251,146,60,.45); transform:translateY(-1px); }
+  .proj .top { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
+  .proj .ic { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:#fff; font-family:'JetBrains Mono',monospace; }
+  .proj h3 { font-size:14.5px; font-weight:700; }
+  .proj .env { font-size:10.5px; color:#6b6e7d; margin-top:2px; font-family:'JetBrains Mono',monospace; }
+  .badge { margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.08em; padding:3px 9px; border-radius:4px; font-family:'JetBrains Mono',monospace; }
+  .b-run { background:rgba(61,214,140,.1); color:#3dd68c; } .b-warn { background:rgba(240,160,64,.1); color:#f0a040; }
+  .svcs { display:flex; gap:6px; margin-bottom:14px; }
+  .svcs span { height:26px; padding:0 8px; border-radius:7px; background:#191b23; border:1px solid rgba(255,255,255,.07); display:flex; align-items:center; font-size:10px; color:#8a8d9c; font-weight:600; font-family:'JetBrains Mono',monospace; }
+  .proj .ft { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#565a68; border-top:1px solid rgba(255,255,255,.05); padding-top:12px; font-family:'JetBrains Mono',monospace; }
+  .proj .ft .arrow { color:#fbb06a; }
+  table { width:100%; border-collapse:collapse; background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:14px; overflow:hidden; font-size:12.5px; }
+  th { text-align:left; font-size:9.5px; letter-spacing:.16em; color:#565a68; font-weight:700; padding:10px 18px; border-bottom:1px solid rgba(255,255,255,.06); font-family:'JetBrains Mono',monospace; }
+  td { padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.04); color:#b6b9c6; font-family:'JetBrains Mono',monospace; font-size:12px; }
+  td:first-child { color:#eceef4; font-weight:600; font-family:'Inter',sans-serif; }
+  .st { font-size:10px; font-weight:700; padding:2px 8px; border-radius:4px; letter-spacing:.06em; }
+  .st-ok { background:rgba(61,214,140,.1); color:#3dd68c; } .st-run { background:rgba(108,142,240,.12); color:#6c8ef0; } .st-fail { background:rgba(255,112,67,.12); color:#ff7043; }
+
+  .stat .k { display:flex; justify-content:space-between; align-items:center; }
+  .live { width:6px; height:6px; border-radius:50%; background:#3dd68c; box-shadow:0 0 6px rgba(61,214,140,.7); animation:pulse 2s infinite; }
+  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
+  .spark { display:flex; gap:2.5px; align-items:flex-end; height:26px; margin:10px 0 4px; }
+  .spark i { flex:1; background:linear-gradient(180deg, #fb923c, transparent); opacity:.7; border-radius:1px; }
+  .bar { height:5px; background:rgba(255,255,255,.06); border-radius:3px; margin:12px 0 6px; overflow:hidden; }
+  .bar i { display:block; height:100%; background:#fb923c; border-radius:3px; }
+  .dot { display:inline-block; width:5px; height:5px; border-radius:50%; margin-right:6px; }
+  .dot-ok { background:#3dd68c; } .dot-err { background:#ff7043; }
+  tr:hover td { background:rgba(255,255,255,.02); }
+</style></head><body>
+<nav class="rail">
+  <div class="mark"><svg width="20" height="20" viewBox="0 0 64 64"><g fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="5"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
+  <div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⚙</div>
+</nav>
+<main>
+  <div class="topbar">
+    <div class="brand">contain<em>r</em></div>
+    <div class="search">search projects, builds, logs…</div>
+    <div class="topright"><span class="pill">env:production</span><div class="avatar-t">TD</div></div>
+  </div>
+  <div class="content">
+    <div class="pagehead">
+      <div><h1>Projects</h1><p>3 projects · 9 services · 1 host</p></div>
+      <button class="btn-primary">+ New Project</button>
+    </div>
+    <div class="statrow">
+      <div class="stat"><div class="k"><span>HOST.CPU</span><span class="live"></span></div><div class="v">14%</div><div class="spark"><i style="height:30%"></i><i style="height:45%"></i><i style="height:38%"></i><i style="height:55%"></i><i style="height:42%"></i><i style="height:60%"></i><i style="height:48%"></i><i style="height:35%"></i><i style="height:52%"></i><i style="height:40%"></i><i style="height:30%"></i><i style="height:22%"></i></div><div class="d"><b class="ok">healthy</b> · 16 cores · load 2.41</div></div>
+      <div class="stat"><div class="k"><span>HOST.MEM</span><span class="live"></span></div><div class="v">72%</div><div class="bar"><i style="width:72%"></i></div><div class="d">9.8G / 13G used</div></div>
+      <div class="stat"><div class="k"><span>HOST.DISK</span><span class="live"></span></div><div class="v">73%</div><div class="bar"><i style="width:73%;background:#f0a040"></i></div><div class="d">338G of 465G</div></div>
+      <div class="stat"><div class="k"><span>DEPLOYS.7D</span></div><div class="v">18</div><div class="bar"><i style="width:94%"></i></div><div class="d"><b class="ok">17 ok</b> · <b class="warn">1 failed</b></div></div>
+    </div>
+    <p class="secttl">PROJECTS</p>
+    <div class="projgrid">
+      <div class="proj"><div class="top"><div class="ic" style="background:#fb923c">CS</div><div><h3>core-services</h3><div class="env">prod · containr.dev</div></div><span class="badge b-run">RUNNING</span></div>
+        <div class="svcs"><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-ok"></b>web</span><span><b class="dot dot-ok"></b>db</span><span><b class="dot dot-ok"></b>worker</span><span>+1</span></div>
+        <div class="ft"><span>5 svc · deployed 4m ago</span><span class="arrow">→</span></div></div>
+      <div class="proj"><div class="top"><div class="ic" style="background:#6c5ce7">GS</div><div><h3>growth-site</h3><div class="env">prod · growth.app</div></div><span class="badge b-run">RUNNING</span></div>
+        <div class="svcs"><span><b class="dot dot-ok"></b>site</span><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-ok"></b>redis</span></div>
+        <div class="ft"><span>3 svc · deployed 2h ago</span><span class="arrow">→</span></div></div>
+      <div class="proj"><div class="top"><div class="ic" style="background:#ff8a5c">ML</div><div><h3>ml-pipeline</h3><div class="env">staging · internal</div></div><span class="badge b-warn">DEGRADED</span></div>
+        <div class="svcs"><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-err"></b>worker</span></div>
+        <div class="ft"><span>2 svc · 1 failed build</span><span class="arrow">→</span></div></div>
+    </div>
+    <p class="secttl">RECENT DEPLOYMENTS</p>
+    <table>
+      <tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
+      <tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">DEPLOYED</span></td><td>48s</td><td>4m ago</td></tr>
+      <tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">BUILDING</span></td><td>—</td><td>6m ago</td></tr>
+      <tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">FAILED</span></td><td>1m32s</td><td>1h ago</td></tr>
+      <tr><td>site</td><td>growth-site</td><td><span class="st st-ok">DEPLOYED</span></td><td>39s</td><td>2h ago</td></tr>
+    </table>
+  </div>
+</main></body></html>
diff --git a/docs/design/explorations/17-vertice.html b/docs/design/explorations/17-vertice.html
new file mode 100644
index 0000000..5b353e5
--- /dev/null
+++ b/docs/design/explorations/17-vertice.html
@@ -0,0 +1,195 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8"><title>17 — Vertice (Dashboard)</title>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
+  * { margin:0; padding:0; box-sizing:border-box; }
+  :root {
+    --bg:#0c0d0f; --surface:#131518; --surface2:#1a1d22; --line:rgba(255,255,255,.06);
+    --ink:#e9ebee; --dim:#8b919e; --faint:#575d69;
+    --lime:#b4e34a; --lime-soft:#cdf06f; --lime-glow:rgba(180,227,74,.1);
+    --yellow:#f2c94c; --ok:#5ee6a0; --err:#ff6f5c; --run:#7ab8ff;
+  }
+  body { font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--ink); display:flex; min-height:100vh; }
+  .mono { font-family:'JetBrains Mono',monospace; }
+
+  /* ── rail ── */
+  .rail { width:62px; flex-shrink:0; border-right:1px solid var(--line); background:#0e0f12;
+    display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:7px; }
+  .mark { width:38px; height:38px; border-radius:12px; margin-bottom:14px;
+    background:linear-gradient(140deg,var(--lime-soft),#7fb524);
+    display:flex; align-items:center; justify-content:center;
+    box-shadow:0 3px 14px rgba(180,227,74,.35); }
+  .mark svg { width:19px; height:19px; }
+  .rail .ic { width:40px; height:40px; border-radius:11px; display:flex; align-items:center;
+    justify-content:center; color:var(--faint); font-size:15px; transition:.15s; }
+  .rail .ic:hover { color:var(--dim); background:rgba(255,255,255,.03); }
+  .rail .ic.on { background:var(--lime-glow); color:var(--lime-soft); }
+  .rail .spacer { flex:1; }
+  .rail .usr { width:30px; height:30px; border-radius:50%; font:700 11px/30px 'JetBrains Mono',monospace;
+    text-align:center; color:#131507; background:linear-gradient(135deg,var(--lime-soft),var(--yellow)); }
+
+  main { flex:1; min-width:0; }
+
+  /* ── topbar ── */
+  .topbar { display:flex; align-items:center; gap:18px; padding:0 26px; height:52px;
+    border-bottom:1px solid var(--line); }
+  .brand { font-weight:800; font-size:15px; letter-spacing:-.3px; }
+  .brand em { font-style:normal; color:var(--lime); }
+  .tlm { display:flex; gap:16px; font:11px 'JetBrains Mono',monospace; color:var(--faint); }
+  .tlm b { color:var(--dim); font-weight:500; }
+  .search { margin-left:auto; width:290px; padding:7px 14px; border-radius:9px;
+    background:var(--surface); border:1px solid var(--line);
+    font:11.5px 'JetBrains Mono',monospace; color:var(--faint); transition:.15s; }
+  .search:hover, .search:focus-within { border-color:rgba(180,227,74,.35); }
+  .search::before { content:'$ '; color:var(--lime); }
+  .envp { font:10px 'JetBrains Mono',monospace; letter-spacing:.1em; color:var(--lime-soft);
+    border:1px solid rgba(180,227,74,.3); border-radius:999px; padding:5px 13px; }
+
+  /* ── content ── */
+  .content { padding:24px 26px 34px; max-width:1240px; }
+  .pagehead { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:18px; }
+  .pagehead h1 { font-size:21px; font-weight:800; letter-spacing:-.4px; }
+  .pagehead .sub { font:11px 'JetBrains Mono',monospace; color:var(--faint); margin-top:5px; }
+  .pagehead .sub b { color:var(--dim); font-weight:500; }
+  .btn-primary { background:var(--lime); color:#131507; border:none; border-radius:9px;
+    padding:9px 18px; font-size:12.5px; font-weight:800; cursor:pointer;
+    box-shadow:0 3px 14px rgba(180,227,74,.28); transition:.15s; }
+  .btn-primary:hover { background:var(--lime-soft); transform:translateY(-1px); }
+
+  /* ── stat row ── */
+  .statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:24px; }
+  .stat { background:var(--surface); border:1px solid var(--line); border-radius:13px;
+    padding:15px 17px 13px; transition:.15s; }
+  .stat:hover { border-color:rgba(180,227,74,.22); }
+  .stat .k { display:flex; align-items:center; justify-content:space-between;
+    font:600 9.5px 'JetBrains Mono',monospace; letter-spacing:.16em; color:var(--faint); }
+  .live { width:5.5px; height:5.5px; border-radius:50%; background:var(--lime);
+    box-shadow:0 0 7px rgba(180,227,74,.8); animation:pulse 2.4s infinite; }
+  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
+  .stat .v { font:500 30px/1.1 'JetBrains Mono',monospace; letter-spacing:-1.2px;
+    margin-top:9px; font-variant-numeric:tabular-nums; }
+  .stat .v span { font-size:14px; color:var(--faint); }
+  .spark { display:flex; gap:3px; align-items:flex-end; height:24px; margin:11px 0 7px; }
+  .spark i { flex:1; border-radius:1.5px;
+    background:linear-gradient(180deg, var(--lime), rgba(180,227,74,.12)); opacity:.75; }
+  .bar { height:5px; background:rgba(255,255,255,.06); border-radius:3px; margin:13px 0 8px; overflow:hidden; }
+  .bar i { display:block; height:100%; border-radius:3px;
+    background:linear-gradient(90deg,var(--lime),var(--yellow)); }
+  .stat .d { font:10.5px 'JetBrains Mono',monospace; color:var(--faint); letter-spacing:.02em; }
+  .stat .d b { font-weight:600; }
+  .ok-t{color:var(--ok)} .warn-t{color:var(--yellow)} .err-t{color:var(--err)}
+
+  /* ── sections ── */
+  .secttl { display:flex; align-items:center; gap:9px; margin:0 0 13px;
+    font:600 10.5px 'JetBrains Mono',monospace; letter-spacing:.2em; color:var(--faint); }
+  .secttl::before { content:'//'; color:var(--lime); font-weight:700; }
+  .secttl .r { margin-left:auto; letter-spacing:.08em; color:#41474f; }
+
+  /* ── project cards ── */
+  .projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-bottom:24px; }
+  .proj { background:var(--surface); border:1px solid var(--line); border-radius:15px;
+    padding:17px 18px 15px; transition:.18s; cursor:pointer; position:relative; overflow:hidden; }
+  .proj::before { content:''; position:absolute; inset:0 0 auto; height:1px;
+    background:linear-gradient(90deg,transparent,rgba(180,227,74,0),transparent); transition:.25s; }
+  .proj:hover { border-color:rgba(180,227,74,.35); transform:translateY(-2px); }
+  .proj:hover::before { background:linear-gradient(90deg,transparent,var(--lime),transparent); }
+  .proj .top { display:flex; align-items:center; gap:11px; margin-bottom:13px; }
+  .proj .ic { width:36px; height:36px; border-radius:11px; display:flex; align-items:center;
+    justify-content:center; font:700 12.5px 'JetBrains Mono',monospace; flex-shrink:0; }
+  .ic-lime { background:var(--lime-glow); color:var(--lime-soft); }
+  .ic-mint { background:rgba(94,230,160,.12); color:var(--ok); }
+  .ic-amber { background:rgba(242,201,76,.12); color:var(--yellow); }
+  .proj h3 { font-size:14.5px; font-weight:700; letter-spacing:-.2px; }
+  .proj .env { font:10px 'JetBrains Mono',monospace; color:var(--faint); margin-top:2.5px; }
+  .badge { margin-left:auto; font:600 9px 'JetBrains Mono',monospace; letter-spacing:.12em;
+    padding:4px 10px; border-radius:5px; }
+  .b-run { background:rgba(94,230,160,.1); color:var(--ok); }
+  .b-warn { background:rgba(242,201,76,.1); color:var(--yellow); }
+  .svcs { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:14px; }
+  .svcs span { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px;
+    border-radius:7px; background:var(--surface2); border:1px solid rgba(255,255,255,.06);
+    font:600 9.5px 'JetBrains Mono',monospace; color:var(--dim); }
+  .dot { width:4.5px; height:4.5px; border-radius:50%; }
+  .dot-ok { background:var(--ok); } .dot-err { background:var(--err); } .dot-warn { background:var(--yellow); }
+  .proj .ft { display:flex; justify-content:space-between; align-items:center;
+    border-top:1px solid rgba(255,255,255,.05); padding-top:11px;
+    font:10.5px 'JetBrains Mono',monospace; color:var(--faint); }
+  .proj .ft .arrow { color:var(--lime); font-weight:700; transition:.15s; }
+  .proj:hover .ft .arrow { transform:translateX(3px); }
+
+  /* ── table ── */
+  .tbl { background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
+  table { width:100%; border-collapse:collapse; }
+  th { text-align:left; font:600 9px 'JetBrains Mono',monospace; letter-spacing:.2em;
+    color:var(--faint); padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.06); }
+  td { padding:11.5px 18px; border-bottom:1px solid rgba(255,255,255,.035);
+    font:11.5px 'JetBrains Mono',monospace; color:#b0b6bf; }
+  tbody tr:last-child td { border-bottom:none; }
+  tbody tr { transition:.12s; } tbody tr:hover td { background:rgba(180,227,74,.03); }
+  td:first-child { color:var(--ink); font:600 12.5px 'Inter',sans-serif; }
+  .st { font:600 9.5px 'JetBrains Mono',monospace; letter-spacing:.1em; padding:3px 9px; border-radius:5px; }
+  .st-ok { background:rgba(94,230,160,.1); color:var(--ok); }
+  .st-run { background:rgba(122,184,255,.12); color:var(--run); }
+  .st-fail { background:rgba(255,111,92,.1); color:var(--err); }
+  .svc-tag { font:9px 'JetBrains Mono',monospace; color:var(--faint); border:1px solid var(--line);
+    border-radius:4px; padding:2px 6px; margin-right:8px; vertical-align:1px; }
+</style></head><body>
+<nav class="rail">
+  <div class="mark"><svg viewBox="0 0 64 64"><g fill="none" stroke="#14170a" stroke-width="6" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="5"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
+  <div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⛁</div>
+  <div class="spacer"></div>
+  <div class="ic">⚙</div>
+  <div class="usr">TD</div>
+</nav>
+<main>
+  <div class="topbar">
+    <div class="brand">contain<em>r</em></div>
+    <div class="tlm"><span>uptime <b>7h 41m</b></span><span>node <b>cnr-node-01</b></span><span>ver <b>0.4.2</b></span></div>
+    <div class="search">search projects, builds, logs…</div>
+    <span class="envp">env:production</span>
+  </div>
+  <div class="content">
+    <div class="pagehead">
+      <div><h1>Projects</h1><p class="sub"><b>3</b> projects · <b>9</b> services · <b>1</b> host · all systems nominal</p></div>
+      <button class="btn-primary">+ New Project</button>
+    </div>
+    <div class="statrow">
+      <div class="stat"><div class="k"><span>HOST.CPU</span><span class="live"></span></div>
+        <div class="v">14<span>%</span></div>
+        <div class="spark"><i style="height:28%"></i><i style="height:44%"></i><i style="height:36%"></i><i style="height:58%"></i><i style="height:42%"></i><i style="height:66%"></i><i style="height:50%"></i><i style="height:34%"></i><i style="height:56%"></i><i style="height:40%"></i><i style="height:30%"></i><i style="height:20%"></i></div>
+        <div class="d"><b class="ok-t">healthy</b> · 16 cores · load 2.41</div></div>
+      <div class="stat"><div class="k"><span>HOST.MEM</span><span class="live"></span></div>
+        <div class="v">72<span>%</span></div>
+        <div class="bar"><i style="width:72%"></i></div>
+        <div class="d">9.8G / 13G used</div></div>
+      <div class="stat"><div class="k"><span>HOST.DISK</span><span class="live"></span></div>
+        <div class="v">73<span>%</span></div>
+        <div class="bar"><i style="width:73%;background:linear-gradient(90deg,var(--yellow),var(--err))"></i></div>
+        <div class="d">338G of 465G · <b class="warn-t">high</b></div></div>
+      <div class="stat"><div class="k"><span>DEPLOYS.7D</span></div>
+        <div class="v">18</div>
+        <div class="bar"><i style="width:94%"></i></div>
+        <div class="d"><b class="ok-t">17 ok</b> · <b class="warn-t">1 failed</b></div></div>
+    </div>
+    <p class="secttl">PROJECTS <span class="r">3 records</span></p>
+    <div class="projgrid">
+      <div class="proj"><div class="top"><div class="ic ic-lime">CS</div><div><h3>core-services</h3><div class="env">prod · containr.dev</div></div><span class="badge b-run">RUNNING</span></div>
+        <div class="svcs"><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-ok"></b>web</span><span><b class="dot dot-ok"></b>db</span><span><b class="dot dot-ok"></b>worker</span><span>+1</span></div>
+        <div class="ft"><span>5 svc · deployed 4m ago</span><span class="arrow">→</span></div></div>
+      <div class="proj"><div class="top"><div class="ic ic-mint">GS</div><div><h3>growth-site</h3><div class="env">prod · growth.app</div></div><span class="badge b-run">RUNNING</span></div>
+        <div class="svcs"><span><b class="dot dot-ok"></b>site</span><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-ok"></b>redis</span></div>
+        <div class="ft"><span>3 svc · deployed 2h ago</span><span class="arrow">→</span></div></div>
+      <div class="proj"><div class="top"><div class="ic ic-amber">ML</div><div><h3>ml-pipeline</h3><div class="env">staging · internal</div></div><span class="badge b-warn">DEGRADED</span></div>
+        <div class="svcs"><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-err"></b>worker</span></div>
+        <div class="ft"><span>2 svc · 1 failed build</span><span class="arrow">→</span></div></div>
+    </div>
+    <p class="secttl">RECENT DEPLOYMENTS <span class="r">last 24h</span></p>
+    <div class="tbl"><table>
+      <tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
+      <tr><td><span class="svc-tag">svc</span>api-gateway</td><td>core-services</td><td><span class="st st-ok">DEPLOYED</span></td><td>48s</td><td>4m ago</td></tr>
+      <tr><td><span class="svc-tag">svc</span>web-frontend</td><td>core-services</td><td><span class="st st-run">BUILDING</span></td><td>—</td><td>6m ago</td></tr>
+      <tr><td><span class="svc-tag">svc</span>worker</td><td>ml-pipeline</td><td><span class="st st-fail">FAILED</span></td><td>1m32s</td><td>1h ago</td></tr>
+      <tr><td><span class="svc-tag">svc</span>site</td><td>growth-site</td><td><span class="st st-ok">DEPLOYED</span></td><td>39s</td><td>2h ago</td></tr>
+    </table></div>
+  </div>
+</main></body></html>
diff --git a/docs/design/explorations/18-vertice2.html b/docs/design/explorations/18-vertice2.html
new file mode 100644
index 0000000..91db7bf
--- /dev/null
+++ b/docs/design/explorations/18-vertice2.html
@@ -0,0 +1,215 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8"><title>18 — Vertice v2 (Dashboard)</title>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
+  * { margin:0; padding:0; box-sizing:border-box; }
+  :root {
+    --bg:#0c0d0f; --surface:#131518; --surface2:#1a1d22; --line:rgba(255,255,255,.07);
+    --ink:#ecedf0; --dim:#8b919e; --faint:#565d68;
+    --lime:#b4e34a; --lime-soft:#cdf06f;
+    --yellow:#f2c94c; --ok:#5ee6a0; --err:#ff6f5c; --run:#7ab8ff;
+  }
+  body { font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--ink); display:flex; min-height:100vh; }
+  .mono { font-family:'JetBrains Mono',monospace; }
+
+  /* ── rail ── */
+  .rail { width:62px; flex-shrink:0; border-right:1px solid var(--line); background:#0e0f12;
+    display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:7px; }
+  .mark { width:38px; height:38px; border-radius:12px; margin-bottom:14px;
+    background:linear-gradient(140deg,var(--lime-soft),#7fb524);
+    display:flex; align-items:center; justify-content:center;
+    box-shadow:0 3px 14px rgba(180,227,74,.3); }
+  .mark svg { width:19px; height:19px; }
+  .rail .ic { width:40px; height:40px; border-radius:11px; display:flex; align-items:center;
+    justify-content:center; color:var(--faint); font-size:15px; transition:.15s; position:relative; }
+  .rail .ic:hover { color:var(--dim); background:rgba(255,255,255,.03); }
+  .rail .ic.on { background:rgba(180,227,74,.1); color:var(--lime-soft); }
+  .rail .ic.on::before { content:''; position:absolute; left:-11px; width:2.5px; height:16px; border-radius:2px; background:var(--lime); }
+  .rail .spacer { flex:1; }
+  .rail .kbd { font:700 8.5px 'JetBrains Mono',monospace; color:var(--faint); border:1px solid var(--line);
+    border-radius:5px; padding:3px 6px; letter-spacing:.05em; }
+  .rail .usr { width:30px; height:30px; border-radius:50%; font:700 11px/30px 'JetBrains Mono',monospace;
+    text-align:center; color:#131507; background:linear-gradient(135deg,var(--lime-soft),var(--yellow)); }
+
+  main { flex:1; min-width:0; }
+
+  /* ── ticker topbar ── */
+  .topbar { display:flex; align-items:center; gap:0; height:46px; border-bottom:1px solid var(--line);
+    font:11px 'JetBrains Mono',monospace; overflow:hidden; }
+  .topbar .brand { padding:0 22px; font:800 14px 'Inter',sans-serif; letter-spacing:-.3px; border-right:1px solid var(--line); height:100%; display:flex; align-items:center; }
+  .topbar .brand em { font-style:normal; color:var(--lime); }
+  .tick { display:flex; gap:0; flex:1; height:100%; }
+  .tick span { display:flex; align-items:center; gap:7px; padding:0 18px; border-right:1px solid var(--line); color:var(--faint); white-space:nowrap; }
+  .tick span b { color:var(--dim); font-weight:500; }
+  .tick .sig { width:6px; height:6px; border-radius:50%; background:var(--ok); }
+  .tick .sig.y { background:var(--yellow); }
+  .topbar .envp { padding:0 22px; height:100%; display:flex; align-items:center; gap:8px; color:var(--lime-soft); border-left:1px solid var(--line); }
+  .topbar .envp::before { content:''; width:5px; height:5px; background:var(--lime); }
+
+  /* ── masthead ── */
+  .mast { display:flex; align-items:flex-end; gap:26px; padding:30px 32px 24px; border-bottom:1px solid var(--line); }
+  .mast h1 { font-size:54px; font-weight:800; letter-spacing:-2.5px; line-height:.95; }
+  .mast h1 .cursor { color:var(--lime); font-weight:400; }
+  .mast .meta { margin-left:auto; text-align:right; display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
+  .mast .count { font:500 11px 'JetBrains Mono',monospace; color:var(--faint); letter-spacing:.14em; }
+  .mast .count b { color:var(--ink); font-weight:600; }
+  .btn-primary { background:var(--lime); color:#131507; border:none; border-radius:8px;
+    padding:10px 20px; font-size:12.5px; font-weight:800; cursor:pointer; transition:.15s;
+    font-family:'JetBrains Mono',monospace; }
+  .btn-primary:hover { background:var(--lime-soft); transform:translateY(-1px); }
+  .btn-primary .k { opacity:.55; font-weight:500; margin-left:8px; }
+
+  /* ── asymmetric body ── */
+  .body { display:grid; grid-template-columns:1fr 340px; }
+
+  /* left: project index */
+  .pindex { padding:8px 0 0; border-right:1px solid var(--line); }
+  .pindex .ph { display:flex; align-items:baseline; gap:12px; padding:14px 32px 10px;
+    font:600 10px 'JetBrains Mono',monospace; letter-spacing:.2em; color:var(--faint); }
+  .pindex .ph .r { margin-left:auto; }
+  .prow { display:grid; grid-template-columns:56px 1fr auto; align-items:center; gap:18px;
+    padding:20px 32px; border-top:1px solid var(--line); cursor:pointer; transition:.15s; position:relative; }
+  .prow::after { content:'→'; position:absolute; right:32px; opacity:0; color:var(--lime);
+    font-family:'JetBrains Mono',monospace; transition:.15s; }
+  .prow:hover { background:rgba(255,255,255,.02); }
+  .prow:hover::after { opacity:1; transform:translateX(4px); }
+  .prow:hover .stwrap { opacity:0; }
+  .prow .no { font:600 13px 'JetBrains Mono',monospace; color:var(--faint); }
+  .prow .no i { font-style:normal; color:var(--lime); }
+  .prow h3 { font-size:19px; font-weight:700; letter-spacing:-.4px; }
+  .prow .env { font:10.5px 'JetBrains Mono',monospace; color:var(--faint); margin-top:4px; }
+  .prow .env b { color:var(--dim); font-weight:500; }
+  .prow .svcs { display:flex; gap:5px; margin-top:10px; }
+  .prow .svcs span { display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px;
+    border-radius:6px; background:var(--surface2); font:600 9.5px 'JetBrains Mono',monospace; color:var(--dim); }
+  .dot { width:4.5px; height:4.5px; border-radius:50%; }
+  .dot-ok { background:var(--ok); } .dot-err { background:var(--err); }
+  .stwrap { display:flex; flex-direction:column; align-items:flex-end; gap:7px; transition:.15s; }
+  .badge { font:600 9px 'JetBrains Mono',monospace; letter-spacing:.12em; padding:4px 10px; border-radius:5px; }
+  .b-run { background:rgba(94,230,160,.1); color:var(--ok); }
+  .b-warn { background:rgba(242,201,76,.1); color:var(--yellow); }
+  .stwrap .ago { font:10px 'JetBrains Mono',monospace; color:var(--faint); }
+
+  /* left: deploy feed below index */
+  .feed-h { display:flex; align-items:baseline; padding:16px 32px 10px; border-top:1px solid var(--line);
+    font:600 10px 'JetBrains Mono',monospace; letter-spacing:.2em; color:var(--faint); }
+  .feed-h .r { margin-left:auto; }
+  .frow { display:grid; grid-template-columns:14px 1fr auto auto auto; align-items:center; gap:16px;
+    padding:12px 32px; border-top:1px solid rgba(255,255,255,.04); font:11px 'JetBrains Mono',monospace; }
+  .frow:hover { background:rgba(255,255,255,.02); }
+  .frow .g { color:var(--faint); }
+  .frow .name { color:var(--ink); font:600 12px 'Inter',sans-serif; }
+  .frow .name span { color:var(--faint); font:400 10.5px 'JetBrains Mono',monospace; margin-left:9px; }
+  .frow .dur { color:var(--faint); }
+  .frow .ago { color:var(--faint); width:64px; text-align:right; }
+  .st { font:600 9.5px 'JetBrains Mono',monospace; letter-spacing:.1em; padding:3px 9px; border-radius:5px; }
+  .st-ok { background:rgba(94,230,160,.1); color:var(--ok); }
+  .st-run { background:rgba(122,184,255,.12); color:var(--run); }
+  .st-fail { background:rgba(255,111,92,.1); color:var(--err); }
+
+  /* right: host panel */
+  .host { padding:0; }
+  .host .hh { padding:14px 22px 12px; font:600 10px 'JetBrains Mono',monospace; letter-spacing:.2em;
+    color:var(--faint); display:flex; align-items:center; gap:8px; }
+  .host .hh::before { content:''; width:5px; height:5px; background:var(--lime); }
+  .host .hh .r { margin-left:auto; letter-spacing:.06em; color:#41474f; }
+  .hstat { padding:13px 22px; border-top:1px solid rgba(255,255,255,.045); }
+  .hstat .top { display:flex; justify-content:space-between; align-items:baseline; }
+  .hstat .k { font:600 9.5px 'JetBrains Mono',monospace; letter-spacing:.14em; color:var(--faint); }
+  .hstat .v { font:600 19px 'JetBrains Mono',monospace; letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
+  .hstat .v span { font-size:11px; color:var(--faint); font-weight:500; }
+  .meter { height:4px; border-radius:2px; background:rgba(255,255,255,.06); margin-top:9px; overflow:hidden; }
+  .meter i { display:block; height:100%; border-radius:2px; background:var(--lime); }
+  .meter i.y { background:var(--yellow); }
+  .meter i.r { background:var(--err); }
+  .hstat .note { font:9.5px 'JetBrains Mono',monospace; color:var(--faint); margin-top:7px; }
+  .sparkline { display:flex; gap:2.5px; align-items:flex-end; height:30px; margin-top:10px; }
+  .sparkline i { flex:1; border-radius:1.5px; background:rgba(180,227,74,.5); }
+  .host .foot { padding:14px 22px 18px; border-top:1px solid rgba(255,255,255,.045);
+    font:10px 'JetBrains Mono',monospace; color:var(--faint); line-height:1.9; }
+  .host .foot b { color:var(--dim); font-weight:500; }
+  .linkrow { display:flex; gap:0; border-top:1px solid var(--line); }
+  .linkrow a { flex:1; text-align:center; padding:12px 0; font:600 9.5px 'JetBrains Mono',monospace;
+    letter-spacing:.14em; color:var(--faint); text-decoration:none; border-right:1px solid var(--line); transition:.15s; }
+  .linkrow a:last-child { border-right:none; }
+  .linkrow a:hover { color:var(--lime-soft); background:rgba(180,227,74,.04); }
+</style></head><body>
+<nav class="rail">
+  <div class="mark"><svg viewBox="0 0 64 64"><g fill="none" stroke="#14170a" stroke-width="6" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="5"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
+  <div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⛁</div>
+  <div class="spacer"></div>
+  <div class="kbd">⌘K</div>
+  <div class="ic">⚙</div>
+  <div class="usr">TD</div>
+</nav>
+<main>
+  <div class="topbar">
+    <div class="brand">contain<em>r</em></div>
+    <div class="tick">
+      <span><i class="sig"></i>all systems <b>nominal</b></span>
+      <span>uptime <b>7h 41m</b></span>
+      <span>node <b>cnr-node-01</b></span>
+      <span><i class="sig y"></i>1 build <b>failed</b></span>
+      <span>ver <b>0.4.2</b></span>
+    </div>
+    <div class="envp">env:production</div>
+  </div>
+
+  <div class="mast">
+    <h1>Projects<span class="cursor">_</span></h1>
+    <div class="meta">
+      <div class="count"><b>03</b> PROJECTS · <b>09</b> SERVICES · <b>01</b> HOST</div>
+      <button class="btn-primary">+ new project <span class="k">N</span></button>
+    </div>
+  </div>
+
+  <div class="body">
+    <div class="pindex">
+      <div class="ph"><span>// PROJECT INDEX</span><span class="r">sorted by last deploy</span></div>
+      <div class="prow">
+        <span class="no"><i>/</i>01</span>
+        <div><h3>core-services</h3><div class="env">production · <b>containr.dev</b> · 5 services</div>
+          <div class="svcs"><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-ok"></b>web</span><span><b class="dot dot-ok"></b>db</span><span><b class="dot dot-ok"></b>worker</span><span><b class="dot dot-ok"></b>cache</span></div></div>
+        <div class="stwrap"><span class="badge b-run">RUNNING</span><span class="ago">4m ago</span></div>
+      </div>
+      <div class="prow">
+        <span class="no"><i>/</i>02</span>
+        <div><h3>growth-site</h3><div class="env">production · <b>growth.app</b> · 3 services</div>
+          <div class="svcs"><span><b class="dot dot-ok"></b>site</span><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-ok"></b>redis</span></div></div>
+        <div class="stwrap"><span class="badge b-run">RUNNING</span><span class="ago">2h ago</span></div>
+      </div>
+      <div class="prow">
+        <span class="no"><i>/</i>03</span>
+        <div><h3>ml-pipeline</h3><div class="env">staging · <b>internal</b> · 2 services</div>
+          <div class="svcs"><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-err"></b>worker</span></div></div>
+        <div class="stwrap"><span class="badge b-warn">DEGRADED</span><span class="ago">1h ago</span></div>
+      </div>
+      <div class="feed-h"><span>// DEPLOY FEED</span><span class="r">last 24h</span></div>
+      <div class="frow"><span class="g">▸</span><span class="name">api-gateway<span>core-services</span></span><span class="st st-ok">DEPLOYED</span><span class="dur">48s</span><span class="ago">4m</span></div>
+      <div class="frow"><span class="g">▸</span><span class="name">web-frontend<span>core-services</span></span><span class="st st-run">BUILDING</span><span class="dur">—</span><span class="ago">6m</span></div>
+      <div class="frow"><span class="g">▸</span><span class="name">worker<span>ml-pipeline</span></span><span class="st st-fail">FAILED</span><span class="dur">1m32s</span><span class="ago">1h</span></div>
+      <div class="frow"><span class="g">▸</span><span class="name">site<span>growth-site</span></span><span class="st st-ok">DEPLOYED</span><span class="dur">39s</span><span class="ago">2h</span></div>
+      <div class="frow"><span class="g">▸</span><span class="name">api<span>growth-site</span></span><span class="st st-ok">DEPLOYED</span><span class="dur">41s</span><span class="ago">3h</span></div>
+    </div>
+    <aside class="host">
+      <div class="hh">HOST VITALS <span class="r">cnr-node-01</span></div>
+      <div class="hstat"><div class="top"><span class="k">CPU</span><span class="v">14<span>%</span></span></div>
+        <div class="sparkline"><i style="height:26%"></i><i style="height:42%"></i><i style="height:34%"></i><i style="height:55%"></i><i style="height:40%"></i><i style="height:64%"></i><i style="height:48%"></i><i style="height:32%"></i><i style="height:54%"></i><i style="height:38%"></i><i style="height:28%"></i><i style="height:18%"></i></div>
+        <div class="note">16 cores · load 2.41 · healthy</div></div>
+      <div class="hstat"><div class="top"><span class="k">MEMORY</span><span class="v">72<span>%</span></span></div>
+        <div class="meter"><i style="width:72%"></i></div>
+        <div class="note">9.8G / 13G used</div></div>
+      <div class="hstat"><div class="top"><span class="k">DISK</span><span class="v">73<span>%</span></span></div>
+        <div class="meter"><i class="y" style="width:73%"></i></div>
+        <div class="note">338G of 465G · high usage</div></div>
+      <div class="hstat"><div class="top"><span class="k">NETWORK</span><span class="v">84<span>MB/s</span></span></div>
+        <div class="meter"><i style="width:34%"></i></div>
+        <div class="note">rx 52 · tx 32</div></div>
+      <div class="hstat"><div class="top"><span class="k">DEPLOYS / 7D</span><span class="v">18</span></div>
+        <div class="meter"><i style="width:94%"></i></div>
+        <div class="note">17 ok · 1 failed</div></div>
+      <div class="foot">docker <b>26.1.4</b> · containerd <b>1.7</b><br>traefik <b>v3.1</b> · 9 containers<br>last gc <b>12m ago</b></div>
+      <div class="linkrow"><a href="#">METRICS</a><a href="#">LOGS</a><a href="#">DOCS</a></div>
+    </aside>
+  </div>
+</main></body></html>
diff --git a/docs/design/explorations/19-vertice3.html b/docs/design/explorations/19-vertice3.html
new file mode 100644
index 0000000..56a2fc3
--- /dev/null
+++ b/docs/design/explorations/19-vertice3.html
@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8"><title>19 — Vertice v3 (Dashboard)</title>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
+  * { margin:0; padding:0; box-sizing:border-box; }
+  :root {
+    --bg:#0c0d0f; --surface:#131518; --surface2:#191c20; --line:rgba(255,255,255,.065);
+    --ink:#ecedf0; --dim:#8b919e; --faint:#4d535e;
+    --lime:#b4e34a; --lime-soft:#cdf06f;
+    --yellow:#f2c94c; --ok:#5ee6a0; --err:#ff6f5c; --run:#7ab8ff;
+  }
+  body { font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--ink); display:flex; min-height:100vh; }
+  .mono { font-family:'JetBrains Mono',monospace; }
+
+  /* ── rail ── */
+  .rail { width:62px; flex-shrink:0; border-right:1px solid var(--line); background:#0e0f12;
+    display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:6px; }
+  .mark { width:38px; height:38px; border-radius:12px; margin-bottom:14px;
+    background:linear-gradient(140deg,var(--lime-soft),#7fb524);
+    display:flex; align-items:center; justify-content:center;
+    box-shadow:0 3px 14px rgba(180,227,74,.28); }
+  .mark svg { width:19px; height:19px; }
+  .rail .ic { width:40px; height:40px; border-radius:11px; display:flex; align-items:center;
+    justify-content:center; color:var(--faint); font-size:15px; transition:.15s; position:relative; }
+  .rail .ic:hover { color:var(--dim); background:rgba(255,255,255,.03); }
+  .rail .ic.on { background:rgba(180,227,74,.09); color:var(--lime-soft); }
+  .rail .ic.on::before { content:''; position:absolute; left:-11px; width:2.5px; height:16px; border-radius:2px; background:var(--lime); }
+  .rail .spacer { flex:1; }
+  .rail .kbd { font:600 8.5px 'JetBrains Mono',monospace; color:var(--faint); border:1px solid var(--line);
+    border-radius:5px; padding:3px 6px; }
+  .rail .usr { width:30px; height:30px; border-radius:50%; font:700 11px/30px 'JetBrains Mono',monospace;
+    text-align:center; color:#131507; background:linear-gradient(135deg,var(--lime-soft),var(--yellow)); }
+
+  main { flex:1; min-width:0; }
+
+  /* ── topbar: one quiet line ── */
+  .topbar { display:flex; align-items:center; height:46px; border-bottom:1px solid var(--line);
+    font:11px 'JetBrains Mono',monospace; }
+  .topbar .brand { padding:0 24px; font:800 14px 'Inter',sans-serif; letter-spacing:-.3px; }
+  .topbar .brand em { font-style:normal; color:var(--lime); }
+  .tick { display:flex; gap:22px; padding-left:8px; }
+  .tick span { display:flex; align-items:center; gap:7px; color:var(--faint); }
+  .tick b { color:var(--dim); font-weight:500; }
+  .sig { width:6px; height:6px; border-radius:50%; background:var(--ok); }
+  .sig.y { background:var(--yellow); }
+  .topbar .envp { margin-left:auto; padding:0 24px; color:var(--lime-soft); }
+  .topbar .envp::before { content:''; display:inline-block; width:5px; height:5px; background:var(--lime); margin-right:8px; }
+
+  /* ── masthead ── */
+  .mast { display:flex; align-items:flex-end; justify-content:space-between;
+    padding:34px 32px 26px; }
+  .mast h1 { font-size:44px; font-weight:800; letter-spacing:-2px; line-height:1; }
+  .mast h1 .cursor { color:var(--lime); font-weight:400; }
+  .mast .meta { display:flex; align-items:center; gap:22px; }
+  .mast .count { font:500 11px 'JetBrains Mono',monospace; color:var(--faint); letter-spacing:.12em; }
+  .mast .count b { color:var(--dim); font-weight:600; }
+  .btn-primary { background:var(--lime); color:#131507; border:none; border-radius:8px;
+    padding:10px 18px; font:700 12px 'JetBrains Mono',monospace; cursor:pointer; transition:.15s; }
+  .btn-primary:hover { background:var(--lime-soft); transform:translateY(-1px); }
+
+  /* ── body split ── */
+  .body { display:grid; grid-template-columns:1fr 300px; border-top:1px solid var(--line); }
+
+  /* left */
+  .pindex { padding:6px 0 20px; border-right:1px solid var(--line); }
+  .ph { padding:16px 32px 6px; font:600 9.5px 'JetBrains Mono',monospace; letter-spacing:.22em; color:var(--faint); }
+  .ph::before { content:'//'; color:var(--lime); margin-right:8px; }
+  .prow { display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:14px;
+    padding:22px 32px; cursor:pointer; transition:.15s; position:relative; }
+  .prow + .prow { border-top:1px solid rgba(255,255,255,.04); }
+  .prow::after { content:'→'; position:absolute; right:32px; opacity:0; color:var(--lime);
+    font-family:'JetBrains Mono',monospace; font-size:13px; transition:.15s; }
+  .prow:hover { background:rgba(255,255,255,.018); }
+  .prow:hover::after { opacity:1; transform:translateX(4px); }
+  .prow:hover .stwrap { opacity:0; }
+  .prow .no { font:500 12px 'JetBrains Mono',monospace; color:var(--faint); }
+  .prow .no i { font-style:normal; color:var(--lime); }
+  .prow h3 { font-size:17px; font-weight:700; letter-spacing:-.3px; display:inline; }
+  .prow .meta { display:inline; font:11px 'JetBrains Mono',monospace; color:var(--faint); margin-left:12px; }
+  .prow .meta b { color:var(--dim); font-weight:500; }
+  .prow .svcline { font:10.5px 'JetBrains Mono',monospace; color:var(--faint); margin-top:7px; }
+  .prow .svcline i { font-style:normal; }
+  .prow .svcline .g { color:var(--ok); } .prow .svcline .r { color:var(--err); }
+  .stwrap { display:flex; align-items:center; gap:12px; transition:.15s; }
+  .stwrap .ago { font:10.5px 'JetBrains Mono',monospace; color:var(--faint); width:52px; text-align:right; }
+  .badge { font:600 9px 'JetBrains Mono',monospace; letter-spacing:.12em; padding:4px 10px; border-radius:5px; }
+  .b-run { background:rgba(94,230,160,.09); color:var(--ok); }
+  .b-warn { background:rgba(242,201,76,.09); color:var(--yellow); }
+
+  .feed-h { padding:20px 32px 6px; font:600 9.5px 'JetBrains Mono',monospace; letter-spacing:.22em; color:var(--faint); }
+  .feed-h::before { content:'//'; color:var(--lime); margin-right:8px; }
+  .frow { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:18px;
+    padding:11px 32px; font:11px 'JetBrains Mono',monospace; transition:.12s; }
+  .frow + .frow { border-top:1px solid rgba(255,255,255,.035); }
+  .frow:hover { background:rgba(255,255,255,.018); }
+  .frow .name { color:var(--ink); font:600 12px 'Inter',sans-serif; }
+  .frow .name span { color:var(--faint); font:400 10.5px 'JetBrains Mono',monospace; margin-left:10px; }
+  .frow .right { display:flex; align-items:center; gap:16px; }
+  .frow .ago { color:var(--faint); width:44px; text-align:right; }
+  .st { font:600 9.5px 'JetBrains Mono',monospace; letter-spacing:.1em; padding:3px 9px; border-radius:5px; }
+  .st-ok { background:rgba(94,230,160,.09); color:var(--ok); }
+  .st-run { background:rgba(122,184,255,.11); color:var(--run); }
+  .st-fail { background:rgba(255,111,92,.09); color:var(--err); }
+
+  /* right: host vitals */
+  .host { padding-bottom:20px; }
+  .host .hh { padding:16px 24px 6px; font:600 9.5px 'JetBrains Mono',monospace; letter-spacing:.22em;
+    color:var(--faint); }
+  .host .hh::before { content:'//'; color:var(--lime); margin-right:8px; }
+  .hstat { padding:15px 24px 4px; }
+  .hstat .top { display:flex; justify-content:space-between; align-items:baseline; }
+  .hstat .k { font:500 10px 'JetBrains Mono',monospace; letter-spacing:.1em; color:var(--faint); }
+  .hstat .v { font:600 18px 'JetBrains Mono',monospace; letter-spacing:-.4px; font-variant-numeric:tabular-nums; }
+  .hstat .v span { font-size:10.5px; color:var(--faint); font-weight:500; }
+  .meter { height:3px; border-radius:2px; background:rgba(255,255,255,.07); margin-top:10px; overflow:hidden; }
+  .meter i { display:block; height:100%; border-radius:2px; background:var(--lime); }
+  .meter i.y { background:var(--yellow); }
+  .hstat .note { font:9.5px 'JetBrains Mono',monospace; color:var(--faint); margin-top:7px; }
+  .sparkline { display:flex; gap:3px; align-items:flex-end; height:26px; margin-top:10px; }
+  .sparkline i { flex:1; border-radius:1.5px; background:rgba(180,227,74,.4); }
+  .host .foot { margin-top:8px; padding:14px 24px 4px; font:10px 'JetBrains Mono',monospace;
+    color:var(--faint); line-height:2; }
+  .host .foot b { color:var(--dim); font-weight:500; }
+  .linkrow { display:flex; margin:14px 24px 0; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
+  .linkrow a { flex:1; text-align:center; padding:9px 0; font:600 9px 'JetBrains Mono',monospace;
+    letter-spacing:.14em; color:var(--faint); text-decoration:none; transition:.15s; }
+  .linkrow a + a { border-left:1px solid var(--line); }
+  .linkrow a:hover { color:var(--lime-soft); background:rgba(180,227,74,.05); }
+</style></head><body>
+<nav class="rail">
+  <div class="mark"><svg viewBox="0 0 64 64"><g fill="none" stroke="#14170a" stroke-width="6" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="5"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
+  <div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⛁</div>
+  <div class="spacer"></div>
+  <div class="kbd">⌘K</div>
+  <div class="ic">⚙</div>
+  <div class="usr">TD</div>
+</nav>
+<main>
+  <div class="topbar">
+    <div class="brand">contain<em>r</em></div>
+    <div class="tick">
+      <span><i class="sig"></i><b>nominal</b></span>
+      <span><i class="sig y"></i>1 build <b>failed</b></span>
+      <span>node <b>cnr-node-01</b></span>
+    </div>
+    <div class="envp">env:production</div>
+  </div>
+
+  <div class="mast">
+    <h1>Projects<span class="cursor">_</span></h1>
+    <div class="meta">
+      <div class="count"><b>03</b> PROJECTS · <b>09</b> SERVICES</div>
+      <button class="btn-primary">+ new project</button>
+    </div>
+  </div>
+
+  <div class="body">
+    <div class="pindex">
+      <div class="ph">PROJECT INDEX</div>
+      <div class="prow">
+        <span class="no"><i>/</i>01</span>
+        <div><h3>core-services</h3><span class="meta">prod · <b>containr.dev</b></span>
+          <div class="svcline"><i class="g">●</i> api &nbsp;<i class="g">●</i> web &nbsp;<i class="g">●</i> db &nbsp;<i class="g">●</i> worker &nbsp;<i class="g">●</i> cache</div></div>
+        <div class="stwrap"><span class="badge b-run">RUNNING</span><span class="ago">4m ago</span></div>
+      </div>
+      <div class="prow">
+        <span class="no"><i>/</i>02</span>
+        <div><h3>growth-site</h3><span class="meta">prod · <b>growth.app</b></span>
+          <div class="svcline"><i class="g">●</i> site &nbsp;<i class="g">●</i> api &nbsp;<i class="g">●</i> redis</div></div>
+        <div class="stwrap"><span class="badge b-run">RUNNING</span><span class="ago">2h ago</span></div>
+      </div>
+      <div class="prow">
+        <span class="no"><i>/</i>03</span>
+        <div><h3>ml-pipeline</h3><span class="meta">staging · <b>internal</b></span>
+          <div class="svcline"><i class="g">●</i> api &nbsp;<i class="r">●</i> worker</div></div>
+        <div class="stwrap"><span class="badge b-warn">DEGRADED</span><span class="ago">1h ago</span></div>
+      </div>
+      <div class="feed-h">DEPLOY FEED</div>
+      <div class="frow"><span class="name">api-gateway<span>core-services</span></span><span class="st st-ok">DEPLOYED</span><span class="ago">4m</span></div>
+      <div class="frow"><span class="name">web-frontend<span>core-services</span></span><span class="st st-run">BUILDING</span><span class="ago">6m</span></div>
+      <div class="frow"><span class="name">worker<span>ml-pipeline</span></span><span class="st st-fail">FAILED</span><span class="ago">1h</span></div>
+      <div class="frow"><span class="name">site<span>growth-site</span></span><span class="st st-ok">DEPLOYED</span><span class="ago">2h</span></div>
+    </div>
+    <aside class="host">
+      <div class="hh">HOST VITALS</div>
+      <div class="hstat"><div class="top"><span class="k">CPU</span><span class="v">14<span>%</span></span></div>
+        <div class="sparkline"><i style="height:26%"></i><i style="height:42%"></i><i style="height:34%"></i><i style="height:55%"></i><i style="height:40%"></i><i style="height:64%"></i><i style="height:48%"></i><i style="height:32%"></i><i style="height:54%"></i><i style="height:38%"></i><i style="height:28%"></i><i style="height:18%"></i></div>
+        <div class="note">16 cores · load 2.41</div></div>
+      <div class="hstat"><div class="top"><span class="k">MEMORY</span><span class="v">72<span>%</span></span></div>
+        <div class="meter"><i style="width:72%"></i></div>
+        <div class="note">9.8G / 13G</div></div>
+      <div class="hstat"><div class="top"><span class="k">DISK</span><span class="v">73<span>%</span></span></div>
+        <div class="meter"><i class="y" style="width:73%"></i></div>
+        <div class="note">338G of 465G</div></div>
+      <div class="hstat"><div class="top"><span class="k">DEPLOYS / 7D</span><span class="v">18</span></div>
+        <div class="note" style="margin-top:10px"><b style="color:var(--ok)">17 ok</b> · <b style="color:var(--yellow)">1 failed</b></div></div>
+      <div class="foot">docker <b>26.1.4</b> · traefik <b>v3.1</b><br>9 containers · last gc <b>12m</b></div>
+      <div class="linkrow"><a href="#">METRICS</a><a href="#">LOGS</a><a href="#">DOCS</a></div>
+    </aside>
+  </div>
+</main></body></html>
diff --git a/docs/design/explorations/20-vertice4.html b/docs/design/explorations/20-vertice4.html
new file mode 100644
index 0000000..f826bab
--- /dev/null
+++ b/docs/design/explorations/20-vertice4.html
@@ -0,0 +1,223 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8"><title>20 — Vertice (Dashboard)</title>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
+  * { margin:0; padding:0; box-sizing:border-box; }
+  :root {
+    --bg:#0c0d0f; --surface:#131518; --surface2:#191c20; --line:rgba(255,255,255,.065);
+    --ink:#ecedf0; --dim:#8b919e; --faint:#4d535e;
+    --lime:#b4e34a; --lime-soft:#cdf06f;
+    --yellow:#f2c94c; --ok:#5ee6a0; --err:#ff6f5c; --run:#7ab8ff;
+  }
+  body { font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--ink); display:flex; min-height:100vh; }
+
+  /* ── rail ── */
+  .rail { width:62px; flex-shrink:0; border-right:1px solid var(--line); background:#0e0f12;
+    display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:6px; }
+  .mark { width:38px; height:38px; border-radius:12px; margin-bottom:14px;
+    background:linear-gradient(140deg,var(--lime-soft),#7fb524);
+    display:flex; align-items:center; justify-content:center;
+    box-shadow:0 3px 14px rgba(180,227,74,.28); }
+  .mark svg { width:19px; height:19px; }
+  .rail .ic { width:40px; height:40px; border-radius:11px; display:flex; align-items:center;
+    justify-content:center; color:var(--faint); font-size:15px; transition:.15s; position:relative; }
+  .rail .ic:hover { color:var(--dim); background:rgba(255,255,255,.03); }
+  .rail .ic.on { background:rgba(180,227,74,.09); color:var(--lime-soft); }
+  .rail .ic.on::before { content:''; position:absolute; left:-11px; width:2.5px; height:16px; border-radius:2px; background:var(--lime); }
+  .rail .spacer { flex:1; }
+  .rail .kbd { font:600 8.5px 'JetBrains Mono',monospace; color:var(--faint); border:1px solid var(--line); border-radius:5px; padding:3px 6px; }
+  .rail .usr { width:30px; height:30px; border-radius:50%; font:700 11px/30px 'JetBrains Mono',monospace;
+    text-align:center; color:#131507; background:linear-gradient(135deg,var(--lime-soft),var(--yellow)); }
+
+  main { flex:1; min-width:0; }
+
+  /* ── topbar ── */
+  .topbar { display:flex; align-items:center; height:46px; border-bottom:1px solid var(--line);
+    font:11px 'JetBrains Mono',monospace; }
+  .topbar .brand { padding:0 24px; font:800 14px 'Inter',sans-serif; letter-spacing:-.3px; }
+  .topbar .brand em { font-style:normal; color:var(--lime); }
+  .tick { display:flex; gap:22px; padding-left:8px; }
+  .tick span { display:flex; align-items:center; gap:7px; color:var(--faint); }
+  .tick b { color:var(--dim); font-weight:500; }
+  .sig { width:6px; height:6px; border-radius:50%; background:var(--ok); }
+  .sig.y { background:var(--yellow); }
+  .topbar .envp { margin-left:auto; padding:0 24px; color:var(--lime-soft); }
+  .topbar .envp::before { content:''; display:inline-block; width:5px; height:5px; background:var(--lime); margin-right:8px; }
+
+  /* ── content ── */
+  .content { padding:26px 32px 36px; max-width:1280px; }
+  .pagehead { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:20px; }
+  .pagehead .left h1 { font-size:24px; font-weight:800; letter-spacing:-.8px; }
+  .pagehead .left h1 .cursor { color:var(--lime); font-weight:400; }
+  .pagehead .left .sub { font:10.5px 'JetBrains Mono',monospace; color:var(--faint); margin-top:5px; }
+  .pagehead .left .sub b { color:var(--dim); font-weight:600; }
+  .pagehead .right { display:flex; align-items:center; gap:10px; }
+  .search { width:230px; padding:8px 14px; border-radius:9px; background:var(--surface);
+    border:1px solid var(--line); font:11.5px 'JetBrains Mono',monospace; color:var(--faint); transition:.15s; }
+  .search:hover { border-color:rgba(180,227,74,.3); }
+  .search::before { content:'⌕ '; color:var(--lime); }
+  .btn-primary { background:var(--lime); color:#131507; border:none; border-radius:8px;
+    padding:9px 17px; font:700 12px 'JetBrains Mono',monospace; cursor:pointer; transition:.15s;
+    box-shadow:0 2px 12px rgba(180,227,74,.22); }
+  .btn-primary:hover { background:var(--lime-soft); }
+
+  /* ── stat row ── */
+  .statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:26px; }
+  .stat { background:var(--surface); border:1px solid var(--line); border-radius:13px;
+    padding:14px 17px 12px; transition:.15s; }
+  .stat:hover { border-color:rgba(180,227,74,.2); }
+  .stat .k { display:flex; align-items:center; justify-content:space-between;
+    font:600 9.5px 'JetBrains Mono',monospace; letter-spacing:.16em; color:var(--faint); }
+  .live { width:5.5px; height:5.5px; border-radius:50%; background:var(--lime);
+    box-shadow:0 0 7px rgba(180,227,74,.8); animation:pulse 2.4s infinite; }
+  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
+  .stat .v { font:500 28px/1.1 'JetBrains Mono',monospace; letter-spacing:-1.2px;
+    margin-top:8px; font-variant-numeric:tabular-nums; }
+  .stat .v span { font-size:13px; color:var(--faint); }
+  .spark { display:flex; gap:3px; align-items:flex-end; height:22px; margin:10px 0 6px; }
+  .spark i { flex:1; border-radius:1.5px; background:linear-gradient(180deg,var(--lime),rgba(180,227,74,.1)); opacity:.7; }
+  .bar { height:4px; background:rgba(255,255,255,.07); border-radius:2px; margin:12px 0 7px; overflow:hidden; }
+  .bar i { display:block; height:100%; border-radius:2px; background:var(--lime); }
+  .bar i.y { background:linear-gradient(90deg,var(--lime),var(--yellow)); }
+  .bar i.r { background:linear-gradient(90deg,var(--yellow),var(--err)); }
+  .stat .d { font:10.5px 'JetBrains Mono',monospace; color:var(--faint); }
+  .stat .d b { font-weight:600; }
+  .ok-t{color:var(--ok)} .warn-t{color:var(--yellow)}
+
+  /* ── section header ── */
+  .secttl { display:flex; align-items:center; margin:0 0 13px;
+    font:600 10px 'JetBrains Mono',monospace; letter-spacing:.22em; color:var(--faint); }
+  .secttl::before { content:'//'; color:var(--lime); margin-right:8px; font-weight:700; }
+  .secttl .r { margin-left:auto; letter-spacing:.08em; color:#41474f; }
+
+  /* ── project cards: railway-style canvas ── */
+  .projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:26px; }
+  .proj { background:var(--surface); border:1px solid var(--line); border-radius:15px;
+    padding:15px 16px; transition:.18s; cursor:pointer; }
+  .proj:hover { border-color:rgba(180,227,74,.35); transform:translateY(-2px); }
+  .proj .top { display:flex; align-items:center; gap:9px; margin-bottom:12px; }
+  .proj h3 { font-size:14.5px; font-weight:700; letter-spacing:-.2px; }
+  .proj .star { margin-left:auto; color:var(--faint); font-size:14px; transition:.15s; }
+  .proj:hover .star { color:var(--yellow); }
+  .mini { position:relative; height:104px; border-radius:10px; margin-bottom:12px; overflow:hidden;
+    background:#0e1013; border:1px solid rgba(255,255,255,.04);
+    background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.5px); background-size:14px 14px; }
+  .mini .node { position:absolute; width:32px; height:32px; border-radius:9px;
+    background:var(--surface2); border:1px solid rgba(255,255,255,.09);
+    display:flex; align-items:center; justify-content:center;
+    font:700 9px 'JetBrains Mono',monospace; color:var(--dim); }
+  .mini .node .nd { position:absolute; top:-2px; right:-2px; width:7px; height:7px; border-radius:50%;
+    background:var(--ok); border:2px solid #0e1013; }
+  .mini .node .nd.r { background:var(--err); }
+  .mini .more { position:absolute; width:32px; height:32px; border-radius:9px;
+    border:1px dashed rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center;
+    font:600 9px 'JetBrains Mono',monospace; color:var(--faint); }
+  .mini .edge { position:absolute; height:1px; background:rgba(255,255,255,.12); }
+  .proj .ft { display:flex; align-items:center; gap:8px; font:10.5px 'JetBrains Mono',monospace; color:var(--faint); }
+  .proj .ft .env-dot { width:6px; height:6px; border-radius:50%; background:var(--ok); }
+  .proj .ft .env-dot.y { background:var(--yellow); }
+  .proj .ft b { color:var(--dim); font-weight:500; }
+  .proj .ft .ago { margin-left:auto; }
+
+  /* ── deploy table ── */
+  .tbl { background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
+  table { width:100%; border-collapse:collapse; }
+  th { text-align:left; font:600 9px 'JetBrains Mono',monospace; letter-spacing:.2em;
+    color:var(--faint); padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.06); }
+  td { padding:11.5px 18px; border-bottom:1px solid rgba(255,255,255,.035);
+    font:11.5px 'JetBrains Mono',monospace; color:#b0b6bf; }
+  tbody tr:last-child td { border-bottom:none; }
+  tbody tr { transition:.12s; } tbody tr:hover td { background:rgba(180,227,74,.025); }
+  td:first-child { color:var(--ink); font:600 12.5px 'Inter',sans-serif; }
+  .st { font:600 9.5px 'JetBrains Mono',monospace; letter-spacing:.1em; padding:3px 9px; border-radius:5px; }
+  .st-ok { background:rgba(94,230,160,.09); color:var(--ok); }
+  .st-run { background:rgba(122,184,255,.11); color:var(--run); }
+  .st-fail { background:rgba(255,111,92,.09); color:var(--err); }
+</style></head><body>
+<nav class="rail">
+  <div class="mark"><svg viewBox="0 0 64 64"><g fill="none" stroke="#14170a" stroke-width="6" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="5"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
+  <div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⛁</div>
+  <div class="spacer"></div>
+  <div class="kbd">⌘K</div>
+  <div class="ic">⚙</div>
+  <div class="usr">TD</div>
+</nav>
+<main>
+  <div class="topbar">
+    <div class="brand">contain<em>r</em></div>
+    <div class="tick">
+      <span><i class="sig"></i><b>nominal</b></span>
+      <span><i class="sig y"></i>1 build <b>failed</b></span>
+      <span>node <b>cnr-node-01</b></span>
+    </div>
+    <div class="envp">env:production</div>
+  </div>
+  <div class="content">
+    <div class="pagehead">
+      <div class="left"><h1>Projects<span class="cursor">_</span></h1>
+        <p class="sub"><b>03</b> projects · <b>09</b> services · <b>01</b> host</p></div>
+      <div class="right">
+        <div class="search">search projects…</div>
+        <button class="btn-primary">+ new</button>
+      </div>
+    </div>
+
+    <div class="statrow">
+      <div class="stat"><div class="k"><span>HOST.CPU</span><span class="live"></span></div>
+        <div class="v">14<span>%</span></div>
+        <div class="spark"><i style="height:28%"></i><i style="height:44%"></i><i style="height:36%"></i><i style="height:58%"></i><i style="height:42%"></i><i style="height:66%"></i><i style="height:50%"></i><i style="height:34%"></i><i style="height:56%"></i><i style="height:40%"></i><i style="height:30%"></i><i style="height:20%"></i></div>
+        <div class="d"><b class="ok-t">healthy</b> · 16 cores · load 2.41</div></div>
+      <div class="stat"><div class="k"><span>HOST.MEM</span><span class="live"></span></div>
+        <div class="v">72<span>%</span></div>
+        <div class="bar"><i class="y" style="width:72%"></i></div>
+        <div class="d">9.8G / 13G used</div></div>
+      <div class="stat"><div class="k"><span>HOST.DISK</span><span class="live"></span></div>
+        <div class="v">73<span>%</span></div>
+        <div class="bar"><i class="r" style="width:73%"></i></div>
+        <div class="d">338G of 465G · <b class="warn-t">high</b></div></div>
+      <div class="stat"><div class="k"><span>DEPLOYS.7D</span></div>
+        <div class="v">18</div>
+        <div class="bar"><i style="width:94%"></i></div>
+        <div class="d"><b class="ok-t">17 ok</b> · <b class="warn-t">1 failed</b></div></div>
+    </div>
+
+    <p class="secttl">PROJECTS <span class="r">3 records</span></p>
+    <div class="projgrid">
+      <div class="proj"><div class="top"><h3>core-services</h3><span class="star">☆</span></div>
+        <div class="mini">
+          <div class="edge" style="left:44px;top:36px;width:44px"></div>
+          <div class="edge" style="left:44px;top:64px;width:80px"></div>
+          <div class="node" style="left:14px;top:22px"><b class="nd"></b>api</div>
+          <div class="node" style="left:88px;top:22px"><b class="nd"></b>web</div>
+          <div class="node" style="left:14px;top:64px"><b class="nd"></b>db</div>
+          <div class="node" style="left:124px;top:64px"><b class="nd"></b>wrk</div>
+          <div class="more" style="left:88px;top:64px">+1</div>
+        </div>
+        <div class="ft"><i class="env-dot"></i><b>production</b> · 5/5 online <span class="ago">4m ago</span></div></div>
+      <div class="proj"><div class="top"><h3>growth-site</h3><span class="star">☆</span></div>
+        <div class="mini">
+          <div class="edge" style="left:44px;top:36px;width:44px"></div>
+          <div class="node" style="left:14px;top:36px"><b class="nd"></b>site</div>
+          <div class="node" style="left:88px;top:36px"><b class="nd"></b>api</div>
+          <div class="node" style="left:162px;top:36px"><b class="nd"></b>rds</div>
+        </div>
+        <div class="ft"><i class="env-dot"></i><b>production</b> · 3/3 online <span class="ago">2h ago</span></div></div>
+      <div class="proj"><div class="top"><h3>ml-pipeline</h3><span class="star">☆</span></div>
+        <div class="mini">
+          <div class="edge" style="left:44px;top:36px;width:44px"></div>
+          <div class="node" style="left:14px;top:36px"><b class="nd"></b>api</div>
+          <div class="node" style="left:88px;top:36px"><b class="nd r"></b>wrk</div>
+        </div>
+        <div class="ft"><i class="env-dot y"></i><b>staging</b> · 1/2 online <span class="ago">1h ago</span></div></div>
+    </div>
+
+    <p class="secttl">RECENT DEPLOYMENTS <span class="r">last 24h</span></p>
+    <div class="tbl"><table>
+      <tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
+      <tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">DEPLOYED</span></td><td>48s</td><td>4m ago</td></tr>
+      <tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">BUILDING</span></td><td>—</td><td>6m ago</td></tr>
+      <tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">FAILED</span></td><td>1m32s</td><td>1h ago</td></tr>
+      <tr><td>site</td><td>growth-site</td><td><span class="st st-ok">DEPLOYED</span></td><td>39s</td><td>2h ago</td></tr>
+    </table></div>
+  </div>
+</main></body></html>
diff --git a/docs/design/explorations/d06.png b/docs/design/explorations/d06.png
new file mode 100644
index 0000000..9a5e2a1
Binary files /dev/null and b/docs/design/explorations/d06.png differ
diff --git a/docs/design/explorations/d07.png b/docs/design/explorations/d07.png
new file mode 100644
index 0000000..cfc0210
Binary files /dev/null and b/docs/design/explorations/d07.png differ
diff --git a/docs/design/explorations/d08.png b/docs/design/explorations/d08.png
new file mode 100644
index 0000000..bf4e9fb
Binary files /dev/null and b/docs/design/explorations/d08.png differ
diff --git a/docs/design/explorations/d09.png b/docs/design/explorations/d09.png
new file mode 100644
index 0000000..b22aa28
Binary files /dev/null and b/docs/design/explorations/d09.png differ
diff --git a/docs/design/explorations/d10.png b/docs/design/explorations/d10.png
new file mode 100644
index 0000000..39accde
Binary files /dev/null and b/docs/design/explorations/d10.png differ
diff --git a/docs/design/explorations/d11.png b/docs/design/explorations/d11.png
new file mode 100644
index 0000000..7b22391
Binary files /dev/null and b/docs/design/explorations/d11.png differ
diff --git a/docs/design/explorations/d12.png b/docs/design/explorations/d12.png
new file mode 100644
index 0000000..945e803
Binary files /dev/null and b/docs/design/explorations/d12.png differ
diff --git a/docs/design/explorations/d13.png b/docs/design/explorations/d13.png
new file mode 100644
index 0000000..e484ae2
Binary files /dev/null and b/docs/design/explorations/d13.png differ
diff --git a/docs/design/explorations/d14.png b/docs/design/explorations/d14.png
new file mode 100644
index 0000000..9559509
Binary files /dev/null and b/docs/design/explorations/d14.png differ
diff --git a/docs/design/explorations/d15.png b/docs/design/explorations/d15.png
new file mode 100644
index 0000000..0854a7a
Binary files /dev/null and b/docs/design/explorations/d15.png differ
diff --git a/docs/design/explorations/d16.png b/docs/design/explorations/d16.png
new file mode 100644
index 0000000..26f531e
Binary files /dev/null and b/docs/design/explorations/d16.png differ
diff --git a/docs/design/explorations/d17.png b/docs/design/explorations/d17.png
new file mode 100644
index 0000000..1298767
Binary files /dev/null and b/docs/design/explorations/d17.png differ
diff --git a/docs/design/explorations/d18.png b/docs/design/explorations/d18.png
new file mode 100644
index 0000000..1894cd6
Binary files /dev/null and b/docs/design/explorations/d18.png differ
diff --git a/docs/design/explorations/d19.png b/docs/design/explorations/d19.png
new file mode 100644
index 0000000..19e613b
Binary files /dev/null and b/docs/design/explorations/d19.png differ
diff --git a/docs/design/explorations/d20-app.png b/docs/design/explorations/d20-app.png
new file mode 100644
index 0000000..c54f177
Binary files /dev/null and b/docs/design/explorations/d20-app.png differ
diff --git a/docs/design/explorations/d20-app2.png b/docs/design/explorations/d20-app2.png
new file mode 100644
index 0000000..4f07a2e
Binary files /dev/null and b/docs/design/explorations/d20-app2.png differ
diff --git a/docs/design/explorations/d20.png b/docs/design/explorations/d20.png
new file mode 100644
index 0000000..6ba59ef
Binary files /dev/null and b/docs/design/explorations/d20.png differ
diff --git a/docs/design/explorations/final-projects.png b/docs/design/explorations/final-projects.png
new file mode 100644
index 0000000..5e5435a
Binary files /dev/null and b/docs/design/explorations/final-projects.png differ
diff --git a/docs/design/explorations/s02.png b/docs/design/explorations/s02.png
new file mode 100644
index 0000000..6344def
Binary files /dev/null and b/docs/design/explorations/s02.png differ
diff --git a/docs/design/explorations/s03.png b/docs/design/explorations/s03.png
new file mode 100644
index 0000000..f0ecab8
Binary files /dev/null and b/docs/design/explorations/s03.png differ
diff --git a/docs/design/explorations/s04.png b/docs/design/explorations/s04.png
new file mode 100644
index 0000000..91af560
Binary files /dev/null and b/docs/design/explorations/s04.png differ
diff --git a/docs/design/explorations/s05.png b/docs/design/explorations/s05.png
new file mode 100644
index 0000000..5f70929
Binary files /dev/null and b/docs/design/explorations/s05.png differ
diff --git a/docs/design/explorations/s1.png b/docs/design/explorations/s1.png
new file mode 100644
index 0000000..c6360a9
Binary files /dev/null and b/docs/design/explorations/s1.png differ
diff --git a/docs/design/explorations/sw2-set.png b/docs/design/explorations/sw2-set.png
new file mode 100644
index 0000000..c41e9e1
Binary files /dev/null and b/docs/design/explorations/sw2-set.png differ
diff --git a/docs/design/explorations/sw2-svc2.png b/docs/design/explorations/sw2-svc2.png
new file mode 100644
index 0000000..15cebd4
Binary files /dev/null and b/docs/design/explorations/sw2-svc2.png differ
diff --git a/docs/design/explorations/sw2-usage.png b/docs/design/explorations/sw2-usage.png
new file mode 100644
index 0000000..8e34565
Binary files /dev/null and b/docs/design/explorations/sw2-usage.png differ
diff --git a/docs/design/explorations/sweep-auth.png b/docs/design/explorations/sweep-auth.png
new file mode 100644
index 0000000..d457092
Binary files /dev/null and b/docs/design/explorations/sweep-auth.png differ
diff --git a/docs/design/explorations/sweep-builds.png b/docs/design/explorations/sweep-builds.png
new file mode 100644
index 0000000..4bee4e6
Binary files /dev/null and b/docs/design/explorations/sweep-builds.png differ
diff --git a/docs/design/explorations/sweep-svc.png b/docs/design/explorations/sweep-svc.png
new file mode 100644
index 0000000..43393c9
Binary files /dev/null and b/docs/design/explorations/sweep-svc.png differ
diff --git a/docs/design/explorations/sweep-tpl.png b/docs/design/explorations/sweep-tpl.png
new file mode 100644
index 0000000..470fd5c
Binary files /dev/null and b/docs/design/explorations/sweep-tpl.png differ
diff --git a/docs/design/explorations/sweep-ws.png b/docs/design/explorations/sweep-ws.png
new file mode 100644
index 0000000..4639aa9
Binary files /dev/null and b/docs/design/explorations/sweep-ws.png differ