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