Vertice restyle: fullscreen layout, lime/gray palette, mini-canvas project cards

- Token swap to near-black grays + lime accent + yellow secondary across
  index.css, all shared chart/card components, and every feature page
- PlatformShell: 62px icon rail, 46px telemetry ticker topbar, containr
  wordmark, env pill; mobile header preserved
- ProjectsPage rebuilt: cursor heading, host stat row (CPU sparkline,
  MEM/DISK meters, DEPLOYS), Railway-style mini-canvas project cards,
  mono deployment feed table
- All layout-level max-w-[1400px] caps removed -> w-full px-8
- New lime containr.svg synced to public/, root, and dist
- Auth glow, chart series colors, service-type colors retuned to palette
- Demo mode now seeds representative host telemetry
- Smoke test updated for new heading/copy

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>

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

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>

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>

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">

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}

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)}%`}
                         />
                       ))}

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) => (

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 ? (
                         <>

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

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)]'
             }`}
           >

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>

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">