diff --git a/src/Web/StellaOps.Web/src/app/features/policy-studio/approvals/policy-approvals.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-studio/approvals/policy-approvals.component.ts
index 4919e4434..22144a46b 100644
--- a/src/Web/StellaOps.Web/src/app/features/policy-studio/approvals/policy-approvals.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/policy-studio/approvals/policy-approvals.component.ts
@@ -213,7 +213,7 @@ import { PolicyApiService } from '../services/policy-api.service';
       :host {
         display: block;
         background: linear-gradient(145deg, var(--color-text-heading) 0%, var(--color-surface-inverse) 60%, var(--color-surface-inverse) 100%);
-        color: var(--color-border-primary);
+        color: var(--color-text-primary);
         min-height: 100vh;
       }
 
@@ -255,7 +255,7 @@ import { PolicyApiService } from '../services/policy-api.service';
       .pill {
         padding: 0.35rem 0.7rem;
         border-radius: var(--radius-full);
-        border: 1px solid var(--color-text-primary);
+        border: 1px solid var(--color-border-primary);
         font-weight: var(--font-weight-bold);
       }
 
@@ -276,8 +276,8 @@ import { PolicyApiService } from '../services/policy-api.service';
       }
 
       .card {
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         padding: 1rem;
         box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
@@ -290,7 +290,7 @@ import { PolicyApiService } from '../services/policy-api.service';
 
       .card h3 {
         margin: 0;
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
       }
 
       .card p {
@@ -314,9 +314,9 @@ import { PolicyApiService } from '../services/policy-api.service';
       textarea,
       input {
         width: 100%;
-        border: 1px solid var(--color-text-heading);
+        border: 1px solid var(--color-border-primary);
         background: var(--color-surface-inverse);
-        color: var(--color-border-primary);
+        color: var(--color-text-primary);
         border-radius: var(--radius-xl);
         padding: 0.65rem;
         font-family: 'Monaco','Consolas', monospace;
@@ -337,7 +337,7 @@ import { PolicyApiService } from '../services/policy-api.service';
       .btn {
         background: var(--color-status-info-text);
         border: 1px solid var(--color-status-info-text);
-        color: var(--color-border-primary);
+        color: var(--color-text-primary);
         border-radius: var(--radius-xl);
         padding: 0.55rem 0.9rem;
         font-weight: var(--font-weight-bold);
@@ -350,21 +350,21 @@ import { PolicyApiService } from '../services/policy-api.service';
 
       .btn--warn { background: var(--color-severity-high); border-color: var(--color-severity-high); color: var(--color-surface-inverse); }
 
-      .btn--ghost { background: transparent; border-color: var(--color-text-primary); color: rgba(212, 201, 168, 0.5); }
+      .btn--ghost { background: transparent; border-color: var(--color-border-primary); color: rgba(212, 201, 168, 0.5); }
 
       .approvals__badge {
         padding: 0.3rem 0.6rem;
         border-radius: var(--radius-lg);
         font-size: 0.9rem;
-        border: 1px solid var(--color-text-primary);
+        border: 1px solid var(--color-border-primary);
       }
 
       .approvals__badge--ready { border-color: var(--color-status-success); color: var(--color-status-success); }
       .approvals__badge--missing { border-color: var(--color-status-warning); color: var(--color-status-warning); }
 
       .readiness {
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         padding: 1rem;
       }
@@ -404,7 +404,7 @@ import { PolicyApiService } from '../services/policy-api.service';
 
       .checklist__label {
         font-weight: var(--font-weight-bold);
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
       }
 
       .checklist__hint { color: var(--color-text-muted); margin-top: 0.1rem; }
@@ -413,7 +413,7 @@ import { PolicyApiService } from '../services/policy-api.service';
         align-self: start;
         padding: 0.25rem 0.55rem;
         border-radius: var(--radius-lg);
-        border: 1px solid var(--color-text-primary);
+        border: 1px solid var(--color-border-primary);
         font-weight: var(--font-weight-bold);
         text-transform: capitalize;
       }
@@ -430,13 +430,13 @@ import { PolicyApiService } from '../services/policy-api.service';
       }
 
       .timeline {
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         padding: 1rem;
       }
 
-      .timeline__header h3 { margin: 0; color: var(--color-surface-secondary); }
+      .timeline__header h3 { margin: 0; color: var(--color-text-heading); }
       .timeline__header p { margin: 0.2rem 0 0; color: var(--color-text-muted); }
 
       ol { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
@@ -444,7 +444,7 @@ import { PolicyApiService } from '../services/policy-api.service';
       li { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; }
 
       .dot {
-        width: 12px; height: 12px; border-radius: var(--radius-full); border: 2px solid var(--color-text-heading);
+        width: 12px; height: 12px; border-radius: var(--radius-full); border: 2px solid var(--color-border-primary);
       }
 
       .dot[data-decision='approve'] { background: var(--color-status-success); border-color: var(--color-status-success); }
@@ -454,18 +454,18 @@ import { PolicyApiService } from '../services/policy-api.service';
       .timeline__headline { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
       .timeline__headline span { color: var(--color-text-muted); }
       .timeline__time { font-size: 0.9rem; }
-      .timeline__comment { margin: 0.15rem 0 0; color: var(--color-border-primary); }
+      .timeline__comment { margin: 0.15rem 0 0; color: var(--color-text-primary); }
 
       .comments {
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         padding: 1rem;
       }
 
       .comments__list { list-style: none; margin: 0.5rem 0 1rem; padding: 0; display: grid; gap: 0.6rem; }
       .comments__meta { display: flex; gap: 0.5rem; align-items: baseline; }
-      .comments__body { margin: 0.15rem 0 0; color: var(--color-border-primary); }
+      .comments__body { margin: 0.15rem 0 0; color: var(--color-text-primary); }
       .muted { color: var(--color-text-muted); font-size: 0.9rem; }
 
       .schedule__summary { display: flex; flex-direction: column; gap: 0.15rem; color: rgba(212, 201, 168, 0.5); }
diff --git a/src/Web/StellaOps.Web/src/app/features/policy-studio/dashboard/policy-dashboard.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-studio/dashboard/policy-dashboard.component.ts
index e7c358c50..0073a1dda 100644
--- a/src/Web/StellaOps.Web/src/app/features/policy-studio/dashboard/policy-dashboard.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/policy-studio/dashboard/policy-dashboard.component.ts
@@ -105,29 +105,29 @@ import {
     `,
     styles: [
         `
-      :host { display: block; background: var(--color-surface-inverse); color: var(--color-border-primary); min-height: 100vh; }
+      :host { display: block; background: var(--color-surface-inverse); color: var(--color-text-primary); min-height: 100vh; }
       .dash { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
       .dash__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
       .dash__eyebrow { margin: 0; color: var(--color-status-info); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; }
       .dash__lede { margin: 0.2rem 0 0; color: var(--color-text-muted); }
       .dash__meta { display: flex; gap: 0.5rem; flex-wrap: wrap; }
-      .pill { border: 1px solid var(--color-text-primary); padding: 0.35rem 0.7rem; border-radius: var(--radius-full); }
+      .pill { border: 1px solid var(--color-border-primary); padding: 0.35rem 0.7rem; border-radius: var(--radius-full); }
       .dash__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; margin-top: 1rem; }
-      .card { background: var(--color-text-heading); border: 1px solid var(--color-text-heading); border-radius: var(--radius-xl); padding: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
-      .card h3 { margin: 0; color: var(--color-surface-secondary); }
+      .card { background: var(--color-surface-elevated); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); padding: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
+      .card h3 { margin: 0; color: var(--color-text-heading); }
       .card p { margin: 0.15rem 0 0; color: var(--color-text-muted); }
       .run-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
-      .run-list li { padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--color-text-heading); }
+      .run-list li { padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--color-border-primary); }
       .run-list li:last-child { border-bottom: none; }
       .muted { color: var(--color-text-muted); font-size: 0.9rem; }
       .heatmap { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.65rem; }
-      .heatmap__name { color: var(--color-border-primary); font-weight: var(--font-weight-semibold); }
-      .heatmap__bar { display: flex; align-items: center; gap: 0.4rem; background: var(--color-text-heading); border-radius: var(--radius-full); overflow: hidden; padding: 0.2rem; }
+      .heatmap__name { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
+      .heatmap__bar { display: flex; align-items: center; gap: 0.4rem; background: var(--color-surface-elevated); border-radius: var(--radius-full); overflow: hidden; padding: 0.2rem; }
       .heatmap__fill { display: block; height: 10px; background: linear-gradient(90deg, var(--color-status-info), var(--color-status-info-text)); border-radius: var(--radius-full); }
       .heatmap__value { color: rgba(212, 201, 168, 0.5); font-size: 0.85rem; }
       .heatmap__latency { color: var(--color-text-muted); font-size: 0.85rem; }
       .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
-      .chip { border: 1px solid var(--color-text-primary); border-radius: var(--radius-full); padding: 0.25rem 0.6rem; background: var(--color-surface-inverse); }
+      .chip { border: 1px solid var(--color-border-primary); border-radius: var(--radius-full); padding: 0.25rem 0.6rem; background: var(--color-surface-inverse); }
       .chip--muted { opacity: 0.8; }
     `,
     ]
diff --git a/src/Web/StellaOps.Web/src/app/features/policy-studio/editor/policy-editor.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-studio/editor/policy-editor.component.ts
index 0b42a83b6..47a34438d 100644
--- a/src/Web/StellaOps.Web/src/app/features/policy-studio/editor/policy-editor.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/policy-studio/editor/policy-editor.component.ts
@@ -192,7 +192,7 @@ interface ChecklistItem {
       :host {
         display: block;
         background: var(--color-surface-inverse);
-        color: var(--color-border-primary);
+        color: var(--color-text-primary);
         min-height: 100vh;
       }
 
@@ -239,11 +239,11 @@ interface ChecklistItem {
       }
 
       .policy-editor__meta-item {
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         padding: 0.75rem 0.9rem;
-        color: var(--color-border-primary);
+        color: var(--color-text-primary);
       }
 
       .policy-editor__meta-label {
@@ -260,8 +260,8 @@ interface ChecklistItem {
       }
 
       .policy-editor__main {
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         padding: 1rem;
         position: relative;
@@ -271,7 +271,7 @@ interface ChecklistItem {
       .editor-shell {
         position: relative;
         min-height: 540px;
-        border: 1px solid var(--color-text-heading);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         overflow: hidden;
         background: var(--color-surface-inverse);
@@ -323,7 +323,7 @@ interface ChecklistItem {
         justify-content: space-between;
         align-items: center;
         gap: 0.5rem;
-        border-top: 1px solid var(--color-text-heading);
+        border-top: 1px solid var(--color-border-primary);
       }
 
       .toolbar__left,
@@ -337,7 +337,7 @@ interface ChecklistItem {
       .btn {
         border: 1px solid var(--color-status-info-text);
         background: var(--color-status-info-text);
-        color: var(--color-border-primary);
+        color: var(--color-text-primary);
         border-radius: var(--radius-lg);
         padding: 0.55rem 0.85rem;
         font-weight: var(--font-weight-semibold);
@@ -357,7 +357,7 @@ interface ChecklistItem {
 
       .btn--ghost {
         background: transparent;
-        border-color: var(--color-text-primary);
+        border-color: var(--color-border-primary);
       }
 
       .status-pill {
@@ -366,8 +366,8 @@ interface ChecklistItem {
         gap: 0.35rem;
         padding: 0.35rem 0.65rem;
         border-radius: var(--radius-full);
-        border: 1px solid var(--color-text-primary);
-        color: var(--color-border-primary);
+        border: 1px solid var(--color-border-primary);
+        color: var(--color-text-primary);
         font-size: 0.85rem;
       }
 
@@ -389,7 +389,7 @@ interface ChecklistItem {
       .diagnostics {
         margin-top: 1.25rem;
         background: var(--color-surface-inverse);
-        border: 1px solid var(--color-text-heading);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         padding: 1rem;
       }
@@ -418,9 +418,9 @@ interface ChecklistItem {
         gap: 0.75rem;
         align-items: center;
         padding: 0.65rem 0.75rem;
-        border: 1px solid var(--color-text-heading);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-lg);
-        background: var(--color-text-heading);
+        background: var(--color-surface-elevated);
       }
 
       .diagnostics__severity {
@@ -429,7 +429,7 @@ interface ChecklistItem {
         font-weight: var(--font-weight-bold);
         font-size: 0.8rem;
         text-transform: uppercase;
-        border: 1px solid var(--color-text-primary);
+        border: 1px solid var(--color-border-primary);
       }
 
       .diagnostics__severity[data-severity='error'] {
@@ -448,7 +448,7 @@ interface ChecklistItem {
       }
 
       .diagnostics__message {
-        color: var(--color-border-primary);
+        color: var(--color-text-primary);
       }
 
       .diagnostics__location,
@@ -464,8 +464,8 @@ interface ChecklistItem {
       }
 
       .sidebar-card {
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         padding: 1rem;
       }
@@ -494,7 +494,7 @@ interface ChecklistItem {
         grid-template-columns: auto 1fr;
         gap: 0.75rem;
         align-items: center;
-        border: 1px solid var(--color-text-heading);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         padding: 0.55rem 0.65rem;
         background: var(--color-surface-inverse);
@@ -504,7 +504,7 @@ interface ChecklistItem {
         width: 12px;
         height: 12px;
         border-radius: var(--radius-full);
-        border: 2px solid var(--color-text-heading);
+        border: 2px solid var(--color-border-primary);
       }
 
       .checklist__status[data-status='pass'] {
@@ -524,7 +524,7 @@ interface ChecklistItem {
 
       .checklist__label {
         display: block;
-        color: var(--color-border-primary);
+        color: var(--color-text-primary);
         font-weight: var(--font-weight-semibold);
         margin-bottom: 0.1rem;
       }
@@ -549,7 +549,7 @@ interface ChecklistItem {
 
       .meta__row dd {
         margin: 0.05rem 0 0;
-        color: var(--color-border-primary);
+        color: var(--color-text-primary);
       }
 
       @media (max-width: 1080px) {
diff --git a/src/Web/StellaOps.Web/src/app/features/policy-studio/explain/policy-explain.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-studio/explain/policy-explain.component.ts
index d805ad94d..bed6f96b7 100644
--- a/src/Web/StellaOps.Web/src/app/features/policy-studio/explain/policy-explain.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/policy-studio/explain/policy-explain.component.ts
@@ -73,19 +73,19 @@ import jsPDF from './jspdf.stub';
     `,
     styles: [
         `
-      :host { display: block; background: var(--color-surface-inverse); color: var(--color-border-primary); min-height: 100vh; }
+      :host { display: block; background: var(--color-surface-inverse); color: var(--color-text-primary); min-height: 100vh; }
       .expl { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
       .expl__header { display: flex; justify-content: space-between; align-items: center; }
       .expl__eyebrow { margin: 0; color: var(--color-status-info); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; }
       .expl__lede { margin: 0.2rem 0 0; color: var(--color-text-muted); }
       .expl__meta { display: flex; gap: 0.5rem; align-items: center; }
-      .expl__btn { display: inline-flex; align-items: center; border: 1px solid var(--color-text-heading); border-radius: var(--radius-lg); padding: 0.35rem 0.65rem; color: var(--color-border-primary); text-decoration: none; background: var(--color-surface-inverse); }
+      .expl__btn { display: inline-flex; align-items: center; border: 1px solid var(--color-border-primary); border-radius: var(--radius-lg); padding: 0.35rem 0.65rem; color: var(--color-text-primary); text-decoration: none; background: var(--color-surface-inverse); }
       .expl__btn:hover { border-color: var(--color-status-info); }
       .expl__grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; margin-top: 1rem; }
-      .card { background: var(--color-text-heading); border: 1px solid var(--color-text-heading); border-radius: var(--radius-xl); padding: 1rem; }
+      .card { background: var(--color-surface-elevated); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); padding: 1rem; }
       ol { margin: 0.5rem 0 0; padding-left: 1.25rem; }
       li { margin-bottom: 0.6rem; }
-      .expl__json pre { margin: 0.35rem 0 0; background: var(--color-surface-inverse); border: 1px solid var(--color-text-heading); border-radius: var(--radius-lg); padding: 0.6rem; max-height: 240px; overflow: auto; }
+      .expl__json pre { margin: 0.35rem 0 0; background: var(--color-surface-inverse); border: 1px solid var(--color-border-primary); border-radius: var(--radius-lg); padding: 0.6rem; max-height: 240px; overflow: auto; }
       @media (max-width: 1024px) { .expl__grid { grid-template-columns: 1fr; } }
     `,
     ]
diff --git a/src/Web/StellaOps.Web/src/app/features/policy-studio/rule-builder/policy-rule-builder.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-studio/rule-builder/policy-rule-builder.component.ts
index d8b1cf34e..74fbbf1e8 100644
--- a/src/Web/StellaOps.Web/src/app/features/policy-studio/rule-builder/policy-rule-builder.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/policy-studio/rule-builder/policy-rule-builder.component.ts
@@ -72,17 +72,17 @@ import { ActivatedRoute } from '@angular/router';
   `,
     styles: [
         `
-      :host { display: block; background: var(--color-surface-inverse); color: var(--color-border-primary); min-height: 100vh; }
+      :host { display: block; background: var(--color-surface-inverse); color: var(--color-text-primary); min-height: 100vh; }
       .rb { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
       .rb__header { display: flex; justify-content: space-between; gap: 1rem; }
       .rb__eyebrow { margin: 0; color: var(--color-status-info); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; }
       .rb__lede { margin: 0.2rem 0 0; color: var(--color-text-muted); }
       .rb__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) 1fr; gap: 1rem; margin-top: 1rem; }
-      .rb__form { background: var(--color-text-heading); border: 1px solid var(--color-text-heading); border-radius: var(--radius-xl); padding: 1rem; display: grid; gap: 0.65rem; }
+      .rb__form { background: var(--color-surface-elevated); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); padding: 1rem; display: grid; gap: 0.65rem; }
       label { display: grid; gap: 0.25rem; color: rgba(212, 201, 168, 0.5); }
-      input, select { background: var(--color-surface-inverse); color: var(--color-border-primary); border: 1px solid var(--color-text-heading); border-radius: var(--radius-lg); padding: 0.5rem; }
-      .rb__preview { background: var(--color-text-heading); border: 1px solid var(--color-text-heading); border-radius: var(--radius-xl); padding: 1rem; }
-      pre { margin: 0; max-height: 420px; overflow: auto; background: var(--color-surface-inverse); border: 1px solid var(--color-text-heading); border-radius: var(--radius-xl); padding: 0.75rem; }
+      input, select { background: var(--color-surface-inverse); color: var(--color-text-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-lg); padding: 0.5rem; }
+      .rb__preview { background: var(--color-surface-elevated); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); padding: 1rem; }
+      pre { margin: 0; max-height: 420px; overflow: auto; background: var(--color-surface-inverse); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); padding: 0.75rem; }
       @media (max-width: 1024px) { .rb__grid { grid-template-columns: 1fr; } }
     `,
     ]
diff --git a/src/Web/StellaOps.Web/src/app/features/policy-studio/simulation/policy-simulation.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-studio/simulation/policy-simulation.component.ts
index d541d338e..f59911ba4 100644
--- a/src/Web/StellaOps.Web/src/app/features/policy-studio/simulation/policy-simulation.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/policy-studio/simulation/policy-simulation.component.ts
@@ -225,7 +225,7 @@ import { PolicyApiService } from '../services/policy-api.service';
           radial-gradient(circle at 80% 0%, rgba(16, 185, 129, 0.08), transparent 22%),
           var(--color-surface-inverse);
         min-height: 100vh;
-        color: var(--color-border-primary);
+        color: var(--color-text-primary);
       }
 
       .sim {
@@ -263,7 +263,7 @@ import { PolicyApiService } from '../services/policy-api.service';
       }
 
       .pill {
-        border: 1px solid var(--color-text-primary);
+        border: 1px solid var(--color-border-primary);
         padding: 0.35rem 0.65rem;
         border-radius: var(--radius-full);
         font-weight: var(--font-weight-semibold);
@@ -292,8 +292,8 @@ import { PolicyApiService } from '../services/policy-api.service';
       }
 
       .sim__form {
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         padding: 1rem;
         display: grid;
@@ -312,9 +312,9 @@ import { PolicyApiService } from '../services/policy-api.service';
       select,
       input[type='checkbox'] {
         width: 100%;
-        border: 1px solid var(--color-text-heading);
+        border: 1px solid var(--color-border-primary);
         background: var(--color-surface-inverse);
-        color: var(--color-border-primary);
+        color: var(--color-text-primary);
         border-radius: var(--radius-lg);
         padding: 0.65rem;
         font-family: 'Monaco', 'Consolas', monospace;
@@ -353,15 +353,15 @@ import { PolicyApiService } from '../services/policy-api.service';
       }
 
       .card {
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         padding: 1rem;
       }
 
       .card h3 {
         margin: 0;
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
       }
 
       .card p {
@@ -382,7 +382,7 @@ import { PolicyApiService } from '../services/policy-api.service';
 
       dd {
         margin: 0;
-        color: var(--color-border-primary);
+        color: var(--color-text-primary);
         font-weight: var(--font-weight-bold);
       }
 
@@ -408,15 +408,15 @@ import { PolicyApiService } from '../services/policy-api.service';
 
       .table {
         margin-top: 1.2rem;
-        background: var(--color-text-heading);
-        border: 1px solid var(--color-text-heading);
+        background: var(--color-surface-elevated);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         padding: 1rem;
       }
 
       .table__header h3 {
         margin: 0;
-        color: var(--color-surface-secondary);
+        color: var(--color-text-heading);
       }
 
       .table__header p {
@@ -427,7 +427,7 @@ import { PolicyApiService } from '../services/policy-api.service';
       .table__scroll {
         overflow: auto;
         margin-top: 0.75rem;
-        border: 1px solid var(--color-text-heading);
+        border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
       }
 
@@ -440,7 +440,7 @@ import { PolicyApiService } from '../services/policy-api.service';
       th,
       td {
         padding: 0.65rem 0.75rem;
-        border-bottom: 1px solid var(--color-text-heading);
+        border-bottom: 1px solid var(--color-border-primary);
         text-align: left;
       }
 
diff --git a/src/Web/StellaOps.Web/src/app/features/policy-studio/workspace/policy-workspace.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-studio/workspace/policy-workspace.component.ts
index f4d5347f2..203bcbbe8 100644
--- a/src/Web/StellaOps.Web/src/app/features/policy-studio/workspace/policy-workspace.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/policy-studio/workspace/policy-workspace.component.ts
@@ -218,7 +218,7 @@ export class PolicyWorkspaceComponent {
   }
 
   private sortPacks(packs: PolicyPackSummary[]): PolicyPackSummary[] {
-    return [...packs].sort((a, b) =>
+    return [...packs].filter((p) => p && p.id).sort((a, b) =>
       (b.modifiedAt ?? '').localeCompare(a.modifiedAt ?? '') || (a.id ?? '').localeCompare(b.id ?? '')
     );
   }
diff --git a/src/Web/StellaOps.Web/src/app/features/policy-studio/yaml/policy-yaml-editor.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-studio/yaml/policy-yaml-editor.component.ts
index 2a8785cc3..0b9115ca7 100644
--- a/src/Web/StellaOps.Web/src/app/features/policy-studio/yaml/policy-yaml-editor.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/policy-studio/yaml/policy-yaml-editor.component.ts
@@ -77,24 +77,24 @@ interface YamlDiagnostic {
     `,
     styles: [
         `
-      :host { display: block; background: var(--color-surface-inverse); color: var(--color-border-primary); min-height: 100vh; }
+      :host { display: block; background: var(--color-surface-inverse); color: var(--color-text-primary); min-height: 100vh; }
       .yaml { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
       .yaml__header { display: flex; justify-content: space-between; gap: 1rem; }
       .yaml__eyebrow { margin: 0; color: var(--color-status-info); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; }
       .yaml__lede { margin: 0.2rem 0 0; color: var(--color-text-muted); }
       .yaml__meta { display: grid; justify-items: end; gap: 0.2rem; color: var(--color-text-muted); }
       .yaml__layout { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr; gap: 1rem; margin-top: 1rem; }
-      .yaml__editor { background: var(--color-text-heading); border: 1px solid var(--color-text-heading); border-radius: var(--radius-xl); padding: 1rem; display: grid; gap: 0.5rem; }
+      .yaml__editor { background: var(--color-surface-elevated); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); padding: 1rem; display: grid; gap: 0.5rem; }
       label { color: rgba(212, 201, 168, 0.5); font-weight: var(--font-weight-semibold); }
-      textarea { width: 100%; background: var(--color-surface-inverse); color: var(--color-border-primary); border: 1px solid var(--color-text-heading); border-radius: var(--radius-xl); padding: 0.75rem; font-family: 'Monaco','Consolas', monospace; }
+      textarea { width: 100%; background: var(--color-surface-inverse); color: var(--color-text-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); padding: 0.75rem; font-family: 'Monaco','Consolas', monospace; }
       .toolbar { display: flex; gap: 0.5rem; align-items: center; }
-      button { background: var(--color-status-info-text); border: 1px solid var(--color-status-info-text); color: var(--color-border-primary); border-radius: var(--radius-lg); padding: 0.4rem 0.8rem; cursor: pointer; }
+      button { background: var(--color-status-info-text); border: 1px solid var(--color-status-info-text); color: var(--color-text-primary); border-radius: var(--radius-lg); padding: 0.4rem 0.8rem; cursor: pointer; }
       button:disabled { opacity: 0.6; cursor: not-allowed; }
-      .pill { border: 1px solid var(--color-text-primary); padding: 0.3rem 0.6rem; border-radius: var(--radius-full); }
+      .pill { border: 1px solid var(--color-border-primary); padding: 0.3rem 0.6rem; border-radius: var(--radius-full); }
       .pill--ok { border-color: var(--color-status-success); color: var(--color-status-success); }
       .diag { list-style: none; margin: 0; padding: 0; color: var(--color-status-error-border); }
-      .yaml__preview { background: var(--color-text-heading); border: 1px solid var(--color-text-heading); border-radius: var(--radius-xl); padding: 1rem; }
-      pre { margin: 0; max-height: 420px; overflow: auto; background: var(--color-surface-inverse); border: 1px solid var(--color-text-heading); border-radius: var(--radius-xl); padding: 0.75rem; }
+      .yaml__preview { background: var(--color-surface-elevated); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); padding: 1rem; }
+      pre { margin: 0; max-height: 420px; overflow: auto; background: var(--color-surface-inverse); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); padding: 0.75rem; }
       @media (max-width: 1024px) { .yaml__layout { grid-template-columns: 1fr; } }
     `,
     ]