diff --git a/frontend/editor/src/cloud/components/onboarding/slides/SaasOnboardingSlides.module.css b/frontend/editor/src/cloud/components/onboarding/slides/SaasOnboardingSlides.module.css
index 5931a0c71f..7fd27e11db 100644
--- a/frontend/editor/src/cloud/components/onboarding/slides/SaasOnboardingSlides.module.css
+++ b/frontend/editor/src/cloud/components/onboarding/slides/SaasOnboardingSlides.module.css
@@ -8,7 +8,7 @@
 }
 
 .freeHighlight {
-  background: linear-gradient(135deg, #6366f1, #ec4899);
+  background: linear-gradient(135deg, var(--p-indigo-500), var(--p-pink-500));
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
diff --git a/frontend/editor/src/cloud/components/shared/config/configSections/Payg.css b/frontend/editor/src/cloud/components/shared/config/configSections/Payg.css
index 860cf4a0ec..669c1e0fd7 100644
--- a/frontend/editor/src/cloud/components/shared/config/configSections/Payg.css
+++ b/frontend/editor/src/cloud/components/shared/config/configSections/Payg.css
@@ -2,8 +2,8 @@
    Uses the app's semantic theme tokens (theme.css) so it tracks light/dark. */
 
 .payg {
-  --payg-accent: #0a8bff;
-  --payg-accent-soft: rgba(10, 139, 255, 0.1);
+  --payg-accent: var(--p-azure-500);
+  --payg-accent-soft: color-mix(in srgb, var(--p-azure-500) 10%, transparent);
   --payg-radius: 14px;
   --payg-gap: 20px;
   /* Cards sit ON the modal content bg; in light that's white-on-white so we
@@ -17,7 +17,7 @@
 /* Dark mode: surfaces/borders track the neutral --c-* tokens (set on the base
    rule); only the brand-azure accent tint is tuned brighter for dark. */
 [data-mantine-color-scheme="dark"] .payg {
-  --payg-accent-soft: rgba(79, 142, 245, 0.16);
+  --payg-accent-soft: color-mix(in srgb, var(--p-azure-560) 16%, transparent);
 }
 
 /* ── Header ─────────────────────────────────────────────────────────── */
@@ -46,7 +46,7 @@
 .payg-role-pill[data-leader="true"] {
   background: var(--payg-accent-soft);
   color: var(--payg-accent);
-  border: 1px solid rgba(10, 139, 255, 0.25);
+  border: 1px solid color-mix(in srgb, var(--p-azure-500) 25%, transparent);
 }
 .payg-role-pill[data-leader="false"] {
   background: var(--c-surface-sunken);
@@ -95,7 +95,7 @@
   margin-bottom: 8px;
 }
 .payg-planhead__lbl--free {
-  color: #10b981;
+  color: var(--p-emerald-500);
 }
 .payg-planhead__lbl--meter {
   color: var(--payg-accent);
@@ -172,22 +172,22 @@
 .payg-hero[data-state="FULL"]::before {
   background: linear-gradient(
     135deg,
-    rgba(10, 139, 255, 0.12) 0%,
-    rgba(10, 139, 255, 0) 55%
+    color-mix(in srgb, var(--p-azure-500) 12%, transparent) 0%,
+    color-mix(in srgb, var(--p-azure-500) 0%, transparent) 55%
   );
 }
 .payg-hero[data-state="WARNED"]::before {
   background: linear-gradient(
     135deg,
-    rgba(234, 179, 8, 0.16) 0%,
-    rgba(234, 179, 8, 0) 55%
+    color-mix(in srgb, var(--p-yellow-500) 16%, transparent) 0%,
+    color-mix(in srgb, var(--p-yellow-500) 0%, transparent) 55%
   );
 }
 .payg-hero[data-state="DEGRADED"]::before {
   background: linear-gradient(
     135deg,
-    rgba(239, 68, 68, 0.16) 0%,
-    rgba(239, 68, 68, 0) 55%
+    color-mix(in srgb, var(--p-red-500) 16%, transparent) 0%,
+    color-mix(in srgb, var(--p-red-500) 0%, transparent) 55%
   );
 }
 .payg-hero__inner {
@@ -239,11 +239,11 @@
   font-size: 0.75rem;
   font-weight: 600;
   color: var(--color-green-700);
-  background: rgba(34, 197, 94, 0.14);
+  background: color-mix(in srgb, var(--p-green-500) 14%, transparent);
 }
 [data-mantine-color-scheme="dark"] .payg-hero__credit {
-  color: #4ade80;
-  background: rgba(34, 197, 94, 0.18);
+  color: var(--p-green-400);
+  background: color-mix(in srgb, var(--p-green-500) 18%, transparent);
 }
 
 /* Make Mantine default-variant buttons read clearly on the lifted cards in
@@ -312,7 +312,7 @@
 }
 .payg-status[data-state="FULL"] .payg-status__dot {
   background: var(--color-green-500);
-  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-green-500) 18%, transparent);
 }
 .payg-status[data-state="WARNED"] {
   background: var(--color-yellow-100);
@@ -320,7 +320,7 @@
 }
 .payg-status[data-state="WARNED"] .payg-status__dot {
   background: var(--color-yellow-500);
-  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.2);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-yellow-500) 20%, transparent);
 }
 .payg-status[data-state="DEGRADED"] {
   background: var(--color-red-100);
@@ -328,7 +328,7 @@
 }
 .payg-status[data-state="DEGRADED"] .payg-status__dot {
   background: var(--color-red-500);
-  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-red-500) 20%, transparent);
 }
 
 /* Segmented usage bar */
@@ -346,7 +346,7 @@
   transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
 }
 .payg-bar__fill[data-state="FULL"] {
-  background: linear-gradient(90deg, #0a8bff, #38bdf8);
+  background: linear-gradient(90deg, var(--p-azure-500), var(--p-azure-400));
 }
 .payg-bar__fill[data-state="WARNED"] {
   background: linear-gradient(90deg, var(--p-amber-500), var(--p-amber-400));
@@ -406,7 +406,7 @@
   padding: 13px 16px;
   border-radius: 10px;
   background: var(--payg-accent-soft);
-  border: 1px solid rgba(10, 139, 255, 0.2);
+  border: 1px solid color-mix(in srgb, var(--p-azure-500) 20%, transparent);
 }
 .payg-preview__icon {
   color: var(--payg-accent);
@@ -458,11 +458,11 @@
   flex-shrink: 0;
 }
 .payg-gate[data-enabled="true"] .payg-gate__chip {
-  background: rgba(34, 197, 94, 0.16);
+  background: color-mix(in srgb, var(--p-green-500) 16%, transparent);
   color: var(--p-green-500);
 }
 .payg-gate[data-enabled="false"] .payg-gate__chip {
-  background: rgba(239, 68, 68, 0.16);
+  background: color-mix(in srgb, var(--p-red-500) 16%, transparent);
   color: var(--p-red-400);
 }
 .payg-gate__label {
@@ -487,11 +487,11 @@
 }
 .payg-gate__tag[data-variant="pause"] {
   color: var(--c-danger);
-  background: rgba(239, 68, 68, 0.12);
+  background: color-mix(in srgb, var(--p-red-500) 12%, transparent);
 }
 [data-mantine-color-scheme="dark"] .payg-gate__tag[data-variant="pause"] {
   color: var(--c-danger);
-  background: rgba(239, 68, 68, 0.18);
+  background: color-mix(in srgb, var(--p-red-500) 18%, transparent);
 }
 
 /* ── Member rows ────────────────────────────────────────────────────── */
@@ -609,11 +609,11 @@
   gap: 16px;
   padding: 20px 24px;
   border-radius: var(--payg-radius);
-  border: 1px solid rgba(99, 91, 255, 0.28);
+  border: 1px solid color-mix(in srgb, var(--p-periwinkle-500) 28%, transparent);
   background: linear-gradient(
     135deg,
-    rgba(99, 91, 255, 0.1) 0%,
-    rgba(99, 91, 255, 0.02) 100%
+    color-mix(in srgb, var(--p-periwinkle-500) 10%, transparent) 0%,
+    color-mix(in srgb, var(--p-periwinkle-500) 2%, transparent) 100%
   );
 }
 .payg-stripe__title {
diff --git a/frontend/editor/src/cloud/components/shared/config/configSections/PaygFree.css b/frontend/editor/src/cloud/components/shared/config/configSections/PaygFree.css
index d02dd46794..e28ff541e0 100644
--- a/frontend/editor/src/cloud/components/shared/config/configSections/PaygFree.css
+++ b/frontend/editor/src/cloud/components/shared/config/configSections/PaygFree.css
@@ -145,8 +145,10 @@
   border: 1.5px solid transparent;
   background:
     linear-gradient(var(--payg-card-bg), var(--payg-card-bg)) padding-box,
-    linear-gradient(135deg, var(--payg-accent) 0%, #6c5ce7 100%) border-box;
-  box-shadow: 0 10px 28px -18px rgba(10, 139, 255, 0.4);
+    linear-gradient(135deg, var(--payg-accent) 0%, var(--p-purple-500) 100%)
+      border-box;
+  box-shadow: 0 10px 28px -18px
+    color-mix(in srgb, var(--p-azure-500) 40%, transparent);
   display: flex;
   flex-direction: column;
   gap: 16px;
@@ -161,7 +163,11 @@
   flex-shrink: 0;
   padding: 10px;
   border-radius: 12px;
-  background: linear-gradient(135deg, var(--payg-accent) 0%, #6c5ce7 100%);
+  background: linear-gradient(
+    135deg,
+    var(--payg-accent) 0%,
+    var(--p-purple-500) 100%
+  );
   color: white !important;
   font-size: 1.7rem !important;
 }
@@ -292,7 +298,7 @@
   font-size: 1rem !important;
 }
 .paygf-explainer__icon--free {
-  color: #10b981;
+  color: var(--p-emerald-500);
 }
 .paygf-explainer__icon--paid {
   color: var(--payg-accent);
diff --git a/frontend/editor/src/cloud/components/shared/config/configSections/SpendCapControl.css b/frontend/editor/src/cloud/components/shared/config/configSections/SpendCapControl.css
index 2791ce822d..bfebde210f 100644
--- a/frontend/editor/src/cloud/components/shared/config/configSections/SpendCapControl.css
+++ b/frontend/editor/src/cloud/components/shared/config/configSections/SpendCapControl.css
@@ -9,10 +9,10 @@
    Payg.css / UpgradeModal.css treatments the control sits beside. */
 
 .scc {
-  --scc-accent: #0a8bff;
-  --scc-accent-text: #0a8bff;
-  --scc-accent-soft: rgba(10, 139, 255, 0.12);
-  --scc-accent-border: rgba(10, 139, 255, 0.25);
+  --scc-accent: var(--p-azure-500);
+  --scc-accent-text: var(--p-azure-500);
+  --scc-accent-soft: color-mix(in srgb, var(--p-azure-500) 12%, transparent);
+  --scc-accent-border: color-mix(in srgb, var(--p-azure-500) 25%, transparent);
   --scc-chip-bg: var(--c-surface-sunken);
   --scc-chip-border: var(--c-border);
   /* Consistent vertical rhythm between the control row, the estimate, and any
@@ -24,8 +24,8 @@
 [data-mantine-color-scheme="dark"] .scc {
   /* Chip surface/border track the neutral --c-* tokens (base rule); only the
      brand-azure accent is tuned brighter for dark. */
-  --scc-accent-text: #66b8ff;
-  --scc-accent-soft: rgba(10, 139, 255, 0.16);
+  --scc-accent-text: var(--p-azure-300);
+  --scc-accent-soft: color-mix(in srgb, var(--p-azure-500) 16%, transparent);
 }
 
 /* ── Inline row: presets · custom · no-cap · (save) ──────────────────── */
diff --git a/frontend/editor/src/cloud/components/shared/config/configSections/UpgradeModal.css b/frontend/editor/src/cloud/components/shared/config/configSections/UpgradeModal.css
index 5f90b1bc41..9e7c4f69e0 100644
--- a/frontend/editor/src/cloud/components/shared/config/configSections/UpgradeModal.css
+++ b/frontend/editor/src/cloud/components/shared/config/configSections/UpgradeModal.css
@@ -5,10 +5,10 @@
    user feels like they're filling out one form, not navigating pages. */
 
 .upm {
-  --upm-accent: #0a8bff;
-  --upm-accent-2: #6c5ce7;
-  --upm-accent-soft: rgba(10, 139, 255, 0.08);
-  --upm-success: #10b981;
+  --upm-accent: var(--p-azure-500);
+  --upm-accent-2: var(--p-purple-500);
+  --upm-accent-soft: color-mix(in srgb, var(--p-azure-500) 8%, transparent);
+  --upm-success: var(--p-emerald-500);
   --upm-radius: 18px;
   --upm-card-bg: var(--c-surface);
   --upm-border: var(--c-border);
@@ -19,7 +19,7 @@
 [data-mantine-color-scheme="dark"] .upm {
   /* Card/border/divider track the neutral --c-* tokens (base rule); only the
      brand-azure accent tint is tuned for dark. */
-  --upm-accent-soft: rgba(79, 142, 245, 0.14);
+  --upm-accent-soft: color-mix(in srgb, var(--p-azure-560) 14%, transparent);
 }
 
 /* Backdrop locks the page and centres the modal. z-index matches
@@ -253,7 +253,7 @@
   border-radius: 6px;
 }
 .upm-step__edit:hover {
-  background: rgba(10, 139, 255, 0.12);
+  background: color-mix(in srgb, var(--p-azure-500) 12%, transparent);
 }
 
 /* Placeholder card for the loading / error / mock states — a dashed, centered
@@ -327,7 +327,9 @@
 .upm-confirm__icon {
   font-size: 64px !important;
   color: var(--upm-success);
-  filter: drop-shadow(0 6px 18px rgba(16, 185, 129, 0.35));
+  filter: drop-shadow(
+    0 6px 18px color-mix(in srgb, var(--p-emerald-500) 35%, transparent)
+  );
 }
 .upm-confirm__title {
   margin: 6px 0 0;
diff --git a/frontend/editor/src/core/components/fileEditor/FileEditor.module.css b/frontend/editor/src/core/components/fileEditor/FileEditor.module.css
index 971d125f67..0acf954de4 100644
--- a/frontend/editor/src/core/components/fileEditor/FileEditor.module.css
+++ b/frontend/editor/src/core/components/fileEditor/FileEditor.module.css
@@ -48,7 +48,7 @@
 }
 
 .headerResting {
-  background: #3b4b6e; /* dark blue for unselected in light mode */
+  background: var(--p-navy-500); /* dark blue for unselected in light mode */
   color: #ffffff;
   border-bottom: 1px solid var(--c-border);
 }
@@ -229,7 +229,7 @@
 }
 
 .pinned {
-  color: #ffc107 !important;
+  color: var(--p-gold-500) !important;
 }
 
 /* Unsupported file indicator */
@@ -299,7 +299,7 @@
 }
 
 :global([data-mantine-color-scheme="dark"]) .headerResting {
-  background: #0d1020; /* requested default unselected color */
+  background: var(--p-navy-950); /* requested default unselected color */
   color: var(--c-accent-fg); /* var(--p-gray-300) */
   border-bottom-color: var(--c-border); /* #3A4047 */
 }
diff --git a/frontend/editor/src/core/components/fileEditor/FileEditorThumbnail.module.css b/frontend/editor/src/core/components/fileEditor/FileEditorThumbnail.module.css
index 8e1cc28448..51d3c5ea49 100644
--- a/frontend/editor/src/core/components/fileEditor/FileEditorThumbnail.module.css
+++ b/frontend/editor/src/core/components/fileEditor/FileEditorThumbnail.module.css
@@ -183,7 +183,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(220, 38, 38, 0.12);
+  background: color-mix(in srgb, var(--p-red-600) 12%, transparent);
   border-radius: 12px;
   z-index: 2;
   pointer-events: none;
diff --git a/frontend/editor/src/core/components/filesPage/FilesPage.css b/frontend/editor/src/core/components/filesPage/FilesPage.css
index 2cfcc6e246..2322424947 100644
--- a/frontend/editor/src/core/components/filesPage/FilesPage.css
+++ b/frontend/editor/src/core/components/filesPage/FilesPage.css
@@ -564,7 +564,7 @@
   gap: 0.35rem;
   padding: 0.22rem 0.55rem;
   border-radius: 999px;
-  background: var(--mantine-color-teal-6, #10b981);
+  background: var(--mantine-color-teal-6, var(--p-emerald-500));
   color: #ffffff;
   font-size: 0.68rem;
   font-weight: 700;
@@ -600,7 +600,7 @@
 .files-page-card.is-in-workspace {
   border-color: color-mix(
     in srgb,
-    var(--mantine-color-teal-6, #10b981) 35%,
+    var(--mantine-color-teal-6, var(--p-emerald-500)) 35%,
     var(--c-border-subtle)
   );
 }
@@ -613,7 +613,12 @@
   pointer-events: none;
   background: linear-gradient(
     180deg,
-    color-mix(in srgb, var(--mantine-color-teal-6, #10b981) 6%, transparent) 0%,
+    color-mix(
+        in srgb,
+        var(--mantine-color-teal-6, var(--p-emerald-500)) 6%,
+        transparent
+      )
+      0%,
     transparent 40%
   );
   z-index: 0;
@@ -625,7 +630,7 @@
   gap: 0.3rem;
   padding: 0.12rem 0.5rem;
   border-radius: 999px;
-  background: var(--mantine-color-teal-6, #10b981);
+  background: var(--mantine-color-teal-6, var(--p-emerald-500));
   color: #ffffff;
   font-size: 0.68rem;
   font-weight: 700;
@@ -639,7 +644,7 @@
 .files-page-list-row.is-in-workspace {
   background: color-mix(
     in srgb,
-    var(--mantine-color-teal-6, #10b981) 4%,
+    var(--mantine-color-teal-6, var(--p-emerald-500)) 4%,
     transparent
   );
 }
diff --git a/frontend/editor/src/core/components/onboarding/InitialOnboardingModal/InitialOnboardingModal.module.css b/frontend/editor/src/core/components/onboarding/InitialOnboardingModal/InitialOnboardingModal.module.css
index b088524877..dfdc8c7837 100644
--- a/frontend/editor/src/core/components/onboarding/InitialOnboardingModal/InitialOnboardingModal.module.css
+++ b/frontend/editor/src/core/components/onboarding/InitialOnboardingModal/InitialOnboardingModal.module.css
@@ -22,7 +22,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18);
+  box-shadow: 0 16px 32px
+    color-mix(in srgb, var(--p-slate-900) 18%, transparent);
   animation: heroLogoScale 0.25s ease forwards;
 }
 
@@ -52,7 +53,8 @@
   background: var(--c-surface, #ffffff);
   border-radius: 16px;
   padding: 20px;
-  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
+  box-shadow: 0 12px 32px
+    color-mix(in srgb, var(--p-slate-900) 12%, transparent);
   display: flex;
   flex-direction: column;
   gap: 16px;
@@ -80,7 +82,8 @@
   background: var(--c-surface, #ffffff);
   border-radius: 16px;
   padding: 20px;
-  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
+  box-shadow: 0 12px 32px
+    color-mix(in srgb, var(--p-slate-900) 12%, transparent);
 }
 
 .mfaSetupGrid {
@@ -94,7 +97,7 @@
   padding: 12px;
   background: #ffffff;
   border-radius: 12px;
-  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.12);
+  box-shadow: 0 8px 16px color-mix(in srgb, var(--p-slate-900) 12%, transparent);
   display: flex;
   justify-content: center;
 }
@@ -262,7 +265,7 @@
   opacity: 1;
   border: 1px solid rgba(255, 255, 255, 0.9);
   background: rgba(255, 255, 255, 0.9);
-  color: #1f2933;
+  color: var(--p-slate-850);
   box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
 }
 
@@ -334,7 +337,7 @@
 
 /* Icon styles */
 .heroIcon {
-  color: var(--c-text, #0f172a);
+  color: var(--c-text, var(--p-slate-900));
 }
 
 /* ===================================================================== */
@@ -372,7 +375,7 @@
   font-size: 17px;
   font-weight: 700;
   letter-spacing: -0.01em;
-  color: var(--c-text, #0f172a);
+  color: var(--c-text, var(--p-slate-900));
 }
 
 .headerRight {
@@ -384,8 +387,8 @@
 .stepPill {
   font-size: 12px;
   font-weight: 600;
-  color: var(--c-text-muted, #64748b);
-  background: var(--c-surface-sunken, #f1f5f9);
+  color: var(--c-text-muted, var(--p-slate-500));
+  background: var(--c-surface-sunken, var(--p-slate-100));
   padding: 5px 11px;
   border-radius: 9999px;
   white-space: nowrap;
@@ -412,7 +415,10 @@
 
 .divider {
   height: 1px;
-  background: var(--c-border-subtle, rgba(15, 23, 42, 0.08));
+  background: var(
+    --c-border-subtle,
+    color-mix(in srgb, var(--p-slate-900) 8%, transparent)
+  );
 }
 
 /* ---- content ---- */
@@ -434,7 +440,12 @@
   min-height: 128px;
   border-radius: 14px;
   overflow: hidden;
-  background: linear-gradient(155deg, #eef1fb 0%, #f6f4fc 55%, #fbf4f7 100%);
+  background: linear-gradient(
+    155deg,
+    var(--p-tint-blue) 0%,
+    var(--p-tint-violet) 55%,
+    var(--p-tint-pink) 100%
+  );
 }
 
 .heroArt {
@@ -448,7 +459,9 @@
   height: 62px;
   border-radius: 15px;
   object-fit: contain;
-  filter: drop-shadow(0 10px 20px rgba(15, 23, 42, 0.16));
+  filter: drop-shadow(
+    0 10px 20px color-mix(in srgb, var(--p-slate-900) 16%, transparent)
+  );
 }
 
 .heroTile {
@@ -459,7 +472,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14);
+  box-shadow: 0 10px 22px
+    color-mix(in srgb, var(--p-slate-900) 14%, transparent);
 }
 
 /* ---- title + body (left-aligned, clean) ---- */
@@ -468,14 +482,14 @@
   font-weight: 600;
   letter-spacing: -0.01em;
   line-height: 1.3;
-  color: var(--c-text, #0f172a);
+  color: var(--c-text, var(--p-slate-900));
   text-align: left;
 }
 
 .bodyNew {
   font-size: 14px;
   line-height: 1.5;
-  color: var(--c-text-muted, #475569);
+  color: var(--c-text-muted, var(--p-slate-600));
   text-align: left;
 }
 
@@ -504,10 +518,15 @@
 
 /* ---- dark theme surface tuning ---- */
 :global([data-mantine-color-scheme="dark"]) .heroPanel {
-  background: linear-gradient(155deg, #1a2236 0%, #171e30 55%, #201a28 100%);
+  background: linear-gradient(
+    155deg,
+    var(--p-navy-850) 0%,
+    var(--p-navy-880) 55%,
+    var(--p-plum-900) 100%
+  );
 }
 
 :global([data-mantine-color-scheme="dark"]) .heroTile {
-  background: #0f1626;
+  background: var(--p-navy-900);
   box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
 }
diff --git a/frontend/editor/src/core/components/onboarding/OnboardingTour.css b/frontend/editor/src/core/components/onboarding/OnboardingTour.css
index a1cbd4f3d8..58fdddbfea 100644
--- a/frontend/editor/src/core/components/onboarding/OnboardingTour.css
+++ b/frontend/editor/src/core/components/onboarding/OnboardingTour.css
@@ -13,7 +13,7 @@
   box-shadow:
     0 0 0 2px var(--mantine-primary-color-filled),
     0 0 15px var(--mantine-primary-color-filled),
-    inset 0 0 15px rgba(59, 130, 246, 0.1);
+    inset 0 0 15px color-mix(in srgb, var(--p-blue-500) 10%, transparent);
   border-radius: 8px;
 }
 
@@ -23,13 +23,13 @@
     box-shadow:
       0 0 0 3px var(--mantine-primary-color-filled),
       0 0 20px var(--mantine-primary-color-filled),
-      inset 0 0 20px rgba(59, 130, 246, 0.1);
+      inset 0 0 20px color-mix(in srgb, var(--p-blue-500) 10%, transparent);
   }
   50% {
     box-shadow:
       0 0 0 3px var(--mantine-primary-color-filled),
       0 0 30px var(--mantine-primary-color-filled),
-      inset 0 0 30px rgba(59, 130, 246, 0.2);
+      inset 0 0 30px color-mix(in srgb, var(--p-blue-500) 20%, transparent);
   }
 }
 
diff --git a/frontend/editor/src/core/components/onboarding/slides/AnimatedSlideBackground.module.css b/frontend/editor/src/core/components/onboarding/slides/AnimatedSlideBackground.module.css
index e278703955..65c3e241af 100644
--- a/frontend/editor/src/core/components/onboarding/slides/AnimatedSlideBackground.module.css
+++ b/frontend/editor/src/core/components/onboarding/slides/AnimatedSlideBackground.module.css
@@ -40,7 +40,8 @@
   position: absolute;
   border-radius: 50%;
   pointer-events: none;
-  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
+  box-shadow: 0 18px 36px
+    color-mix(in srgb, var(--p-slate-900) 12%, transparent);
   animation-name: circleSway;
   animation-timing-function: ease-in-out;
   animation-iteration-count: infinite;
diff --git a/frontend/editor/src/core/components/shared/AppConfigModal.css b/frontend/editor/src/core/components/shared/AppConfigModal.css
index 9571d55115..9a94b622be 100644
--- a/frontend/editor/src/core/components/shared/AppConfigModal.css
+++ b/frontend/editor/src/core/components/shared/AppConfigModal.css
@@ -63,7 +63,8 @@
 }
 
 .modal-nav-scroll:hover {
-  scrollbar-color: rgba(128, 128, 128, 0.5) transparent;
+  scrollbar-color: color-mix(in srgb, var(--p-gray-mid) 50%, transparent)
+    transparent;
 }
 
 .modal-nav-scroll::-webkit-scrollbar {
@@ -81,11 +82,11 @@
 }
 
 .modal-nav-scroll:hover::-webkit-scrollbar-thumb {
-  background-color: rgba(128, 128, 128, 0.5);
+  background-color: color-mix(in srgb, var(--p-gray-mid) 50%, transparent);
 }
 
 .modal-nav-scroll::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(128, 128, 128, 0.7);
+  background-color: color-mix(in srgb, var(--p-gray-mid) 70%, transparent);
 }
 
 .modal-nav-section {
@@ -131,7 +132,8 @@
 }
 
 .modal-content-scroll:hover {
-  scrollbar-color: rgba(128, 128, 128, 0.5) transparent;
+  scrollbar-color: color-mix(in srgb, var(--p-gray-mid) 50%, transparent)
+    transparent;
 }
 
 .modal-content-scroll::-webkit-scrollbar {
@@ -149,11 +151,11 @@
 }
 
 .modal-content-scroll:hover::-webkit-scrollbar-thumb {
-  background-color: rgba(128, 128, 128, 0.5);
+  background-color: color-mix(in srgb, var(--p-gray-mid) 50%, transparent);
 }
 
 .modal-content-scroll::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(128, 128, 128, 0.7);
+  background-color: color-mix(in srgb, var(--p-gray-mid) 70%, transparent);
 }
 
 .modal-header {
diff --git a/frontend/editor/src/core/components/shared/FileSidebar.css b/frontend/editor/src/core/components/shared/FileSidebar.css
index cd27aacf6d..f6220db2ea 100644
--- a/frontend/editor/src/core/components/shared/FileSidebar.css
+++ b/frontend/editor/src/core/components/shared/FileSidebar.css
@@ -363,7 +363,10 @@
 }
 /* Hover reads neutral (not the default blue tint); selected stays blue. */
 .file-sidebar-group-items .file-sidebar-file-item:hover:not(.selected) {
-  background-color: var(--c-hover, rgba(120, 120, 120, 0.1));
+  background-color: var(
+    --c-hover,
+    color-mix(in srgb, var(--p-gray-mid) 10%, transparent)
+  );
 }
 /* A plain circle where the selected check sits — on hover, and blue when selected. */
 .file-sidebar-group-items .file-sidebar-file-checkbox-hover,
@@ -424,7 +427,10 @@
   display: none;
 }
 .file-sidebar-view-all:hover {
-  background: var(--c-hover, rgba(120, 120, 120, 0.1));
+  background: var(
+    --c-hover,
+    color-mix(in srgb, var(--p-gray-mid) 10%, transparent)
+  );
 }
 
 .file-sidebar-file-list::-webkit-scrollbar {
diff --git a/frontend/editor/src/core/components/shared/ObscuredOverlay/ObscuredOverlay.module.css b/frontend/editor/src/core/components/shared/ObscuredOverlay/ObscuredOverlay.module.css
index 5651993c4c..0905a9f38f 100644
--- a/frontend/editor/src/core/components/shared/ObscuredOverlay/ObscuredOverlay.module.css
+++ b/frontend/editor/src/core/components/shared/ObscuredOverlay/ObscuredOverlay.module.css
@@ -12,7 +12,7 @@
   padding: 16px;
   color: #ffffff;
   font-weight: 600;
-  background: rgba(16, 18, 27, 0.55);
+  background: color-mix(in srgb, var(--p-zinc-900) 55%, transparent);
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
   border: 1px solid rgba(255, 255, 255, 0.06);
diff --git a/frontend/editor/src/core/components/tools/ToolPanel.css b/frontend/editor/src/core/components/tools/ToolPanel.css
index e76c1ed797..52c22a4a6f 100644
--- a/frontend/editor/src/core/components/tools/ToolPanel.css
+++ b/frontend/editor/src/core/components/tools/ToolPanel.css
@@ -78,17 +78,20 @@
   );
   --fullscreen-shadow-primary: color-mix(
     in srgb,
-    var(--shadow-color, rgba(15, 23, 42, 0.55)) 25%,
+    var(--shadow-color, color-mix(in srgb, var(--p-slate-900) 55%, transparent))
+      25%,
     transparent
   );
   --fullscreen-shadow-secondary: color-mix(
     in srgb,
-    var(--shadow-color, rgba(15, 23, 42, 0.35)) 30%,
+    var(--shadow-color, color-mix(in srgb, var(--p-slate-900) 35%, transparent))
+      30%,
     transparent
   );
   --fullscreen-shadow-group: color-mix(
     in srgb,
-    var(--shadow-color, rgba(15, 23, 42, 0.45)) 18%,
+    var(--shadow-color, color-mix(in srgb, var(--p-slate-900) 45%, transparent))
+      18%,
     transparent
   );
   --fullscreen-accent-hover: color-mix(
@@ -538,7 +541,10 @@
 .tool-panel__fullscreen-item:hover:not([aria-disabled="true"]):not(:disabled) {
   transform: translateY(-2px);
   border-color: var(--fullscreen-accent-hover);
-  box-shadow: var(--shadow-xl, 0 18px 34px rgba(15, 23, 42, 0.14));
+  box-shadow: var(
+    --shadow-xl,
+    0 18px 34px color-mix(in srgb, var(--p-slate-900) 14%, transparent)
+  );
 }
 
 .tool-panel__fullscreen-item--selected {
diff --git a/frontend/editor/src/core/components/tools/ToolPanelModePrompt.css b/frontend/editor/src/core/components/tools/ToolPanelModePrompt.css
index eb29813c24..48f64db906 100644
--- a/frontend/editor/src/core/components/tools/ToolPanelModePrompt.css
+++ b/frontend/editor/src/core/components/tools/ToolPanelModePrompt.css
@@ -4,7 +4,11 @@
   box-shadow: 0 32px 64px
     color-mix(
       in srgb,
-      var(--shadow-color, rgba(15, 23, 42, 0.55)) 20%,
+      var(
+          --shadow-color,
+          color-mix(in srgb, var(--p-slate-900) 55%, transparent)
+        )
+        20%,
       transparent
     );
   max-width: min(46rem, 100%);
diff --git a/frontend/editor/src/core/components/tools/compare/compareView.css b/frontend/editor/src/core/components/tools/compare/compareView.css
index 6ca6b45b91..097888f916 100644
--- a/frontend/editor/src/core/components/tools/compare/compareView.css
+++ b/frontend/editor/src/core/components/tools/compare/compareView.css
@@ -243,29 +243,55 @@
 /* Flash/pulse highlight for navigated change */
 @keyframes compare-flash {
   0% {
-    outline: 4px solid rgba(255, 235, 59, 0);
-    box-shadow: 0 0 0 rgba(255, 235, 59, 0);
-    background-color: rgba(255, 235, 59, 0.2) !important;
+    outline: 4px solid color-mix(in srgb, var(--p-flash-yellow) 0%, transparent);
+    box-shadow: 0 0 0 color-mix(in srgb, var(--p-flash-yellow) 0%, transparent);
+    background-color: color-mix(
+      in srgb,
+      var(--p-flash-yellow) 20%,
+      transparent
+    ) !important;
   }
   25% {
-    outline: 4px solid rgba(255, 235, 59, 1);
-    box-shadow: 0 0 20px rgba(255, 235, 59, 0.8);
-    background-color: rgba(255, 235, 59, 0.4) !important;
+    outline: 4px solid
+      color-mix(in srgb, var(--p-flash-yellow) 100%, transparent);
+    box-shadow: 0 0 20px
+      color-mix(in srgb, var(--p-flash-yellow) 80%, transparent);
+    background-color: color-mix(
+      in srgb,
+      var(--p-flash-yellow) 40%,
+      transparent
+    ) !important;
   }
   50% {
-    outline: 4px solid rgba(255, 235, 59, 1);
-    box-shadow: 0 0 30px rgba(255, 235, 59, 0.9);
-    background-color: rgba(255, 235, 59, 0.5) !important;
+    outline: 4px solid
+      color-mix(in srgb, var(--p-flash-yellow) 100%, transparent);
+    box-shadow: 0 0 30px
+      color-mix(in srgb, var(--p-flash-yellow) 90%, transparent);
+    background-color: color-mix(
+      in srgb,
+      var(--p-flash-yellow) 50%,
+      transparent
+    ) !important;
   }
   75% {
-    outline: 4px solid rgba(255, 235, 59, 0.8);
-    box-shadow: 0 0 15px rgba(255, 235, 59, 0.6);
-    background-color: rgba(255, 235, 59, 0.3) !important;
+    outline: 4px solid
+      color-mix(in srgb, var(--p-flash-yellow) 80%, transparent);
+    box-shadow: 0 0 15px
+      color-mix(in srgb, var(--p-flash-yellow) 60%, transparent);
+    background-color: color-mix(
+      in srgb,
+      var(--p-flash-yellow) 30%,
+      transparent
+    ) !important;
   }
   100% {
-    outline: 4px solid rgba(255, 235, 59, 0);
-    box-shadow: 0 0 0 rgba(255, 235, 59, 0);
-    background-color: rgba(255, 235, 59, 0) !important;
+    outline: 4px solid color-mix(in srgb, var(--p-flash-yellow) 0%, transparent);
+    box-shadow: 0 0 0 color-mix(in srgb, var(--p-flash-yellow) 0%, transparent);
+    background-color: color-mix(
+      in srgb,
+      var(--p-flash-yellow) 0%,
+      transparent
+    ) !important;
   }
 }
 
@@ -274,14 +300,18 @@
   z-index: 1000;
   position: relative;
   /* Bonus: temporarily override red/green to yellow during flash for clarity */
-  background-color: rgba(255, 235, 59, 0.5) !important;
+  background-color: color-mix(
+    in srgb,
+    var(--p-flash-yellow) 50%,
+    transparent
+  ) !important;
 }
 
 /* Union overlay for group flash */
 .compare-diff-flash-overlay {
   animation: compare-flash 1.5s ease-in-out 1;
   z-index: 999;
-  background-color: rgba(255, 235, 59, 0.4);
+  background-color: color-mix(in srgb, var(--p-flash-yellow) 40%, transparent);
   pointer-events: none;
   border-radius: 2px;
 }
@@ -514,7 +544,7 @@
   padding-bottom: 32px;
 }
 .compare-pixel-page {
-  border: 1px solid var(--mantine-color-default-border, #dee2e6);
+  border: 1px solid var(--mantine-color-default-border, var(--p-slate-200));
   border-radius: 8px;
   padding: 12px;
   background: var(--mantine-color-body, #fff);
@@ -532,13 +562,13 @@
 }
 .compare-pixel-triptych figure img {
   display: block;
-  border: 1px solid var(--mantine-color-default-border, #dee2e6);
+  border: 1px solid var(--mantine-color-default-border, var(--p-slate-200));
   background: #fff;
 }
 .compare-pixel-triptych figcaption {
   font-size: 11px;
   text-align: center;
-  color: var(--mantine-color-dimmed, #868e96);
+  color: var(--mantine-color-dimmed, var(--p-gray-450));
 }
 .compare-pixel-overlay {
   position: relative;
@@ -547,7 +577,7 @@
 .compare-pixel-overlay-img {
   display: block;
   width: 100%;
-  border: 1px solid var(--mantine-color-default-border, #dee2e6);
+  border: 1px solid var(--mantine-color-default-border, var(--p-slate-200));
 }
 .compare-pixel-overlay-top {
   position: absolute;
diff --git a/frontend/editor/src/core/components/tools/showJS/ShowJSView.css b/frontend/editor/src/core/components/tools/showJS/ShowJSView.css
index 4ab6c9f97d..7632b2ba4a 100644
--- a/frontend/editor/src/core/components/tools/showJS/ShowJSView.css
+++ b/frontend/editor/src/core/components/tools/showJS/ShowJSView.css
@@ -72,11 +72,19 @@
   margin-left: 6px;
 }
 .search-hit {
-  background: rgba(255, 235, 59, 0.4); /* yellow highlight */
+  background: color-mix(
+    in srgb,
+    var(--p-flash-yellow) 40%,
+    transparent
+  ); /* yellow highlight */
   border-radius: 2px;
 }
 .search-hit-active {
-  background: rgba(33, 150, 243, 0.4); /* active blue */
+  background: color-mix(
+    in srgb,
+    var(--p-material-blue) 40%,
+    transparent
+  ); /* active blue */
 }
 
 .showjs-root {
diff --git a/frontend/editor/src/core/components/tools/validateSignature/reportView/styles.css b/frontend/editor/src/core/components/tools/validateSignature/reportView/styles.css
index 1d7c43f53d..003d65f2e5 100644
--- a/frontend/editor/src/core/components/tools/validateSignature/reportView/styles.css
+++ b/frontend/editor/src/core/components/tools/validateSignature/reportView/styles.css
@@ -111,19 +111,29 @@
 /* Flash highlight animation for section navigation */
 @keyframes section-flash {
   0% {
-    background-color: rgba(255, 235, 59, 0);
+    background-color: color-mix(in srgb, var(--p-flash-yellow) 0%, transparent);
     box-shadow: none;
   }
   20% {
-    background-color: rgba(255, 235, 59, 0.35);
-    box-shadow: 0 0 20px rgba(255, 235, 59, 0.5);
+    background-color: color-mix(
+      in srgb,
+      var(--p-flash-yellow) 35%,
+      transparent
+    );
+    box-shadow: 0 0 20px
+      color-mix(in srgb, var(--p-flash-yellow) 50%, transparent);
   }
   50% {
-    background-color: rgba(255, 235, 59, 0.25);
-    box-shadow: 0 0 15px rgba(255, 235, 59, 0.4);
+    background-color: color-mix(
+      in srgb,
+      var(--p-flash-yellow) 25%,
+      transparent
+    );
+    box-shadow: 0 0 15px
+      color-mix(in srgb, var(--p-flash-yellow) 40%, transparent);
   }
   100% {
-    background-color: rgba(255, 235, 59, 0);
+    background-color: color-mix(in srgb, var(--p-flash-yellow) 0%, transparent);
     box-shadow: none;
   }
 }
diff --git a/frontend/editor/src/core/components/viewer/SidebarBase.css b/frontend/editor/src/core/components/viewer/SidebarBase.css
index 6ff26bfeb7..106cf1c7d6 100644
--- a/frontend/editor/src/core/components/viewer/SidebarBase.css
+++ b/frontend/editor/src/core/components/viewer/SidebarBase.css
@@ -14,7 +14,11 @@
   box-shadow: -2px 0 16px
     color-mix(
       in srgb,
-      var(--shadow-color, rgba(15, 23, 42, 0.35)) 20%,
+      var(
+          --shadow-color,
+          color-mix(in srgb, var(--p-slate-900) 35%, transparent)
+        )
+        20%,
       transparent
     );
   backdrop-filter: blur(12px);
diff --git a/frontend/editor/src/core/styles/index.css b/frontend/editor/src/core/styles/index.css
index 66a98cc8c8..5527c25b52 100644
--- a/frontend/editor/src/core/styles/index.css
+++ b/frontend/editor/src/core/styles/index.css
@@ -79,5 +79,5 @@ code {
 }
 
 .viewer-file-tab[data-active] {
-  background-color: rgba(147, 197, 253, 0.5);
+  background-color: color-mix(in srgb, var(--p-blue-200) 50%, transparent);
 }
diff --git a/frontend/editor/src/core/styles/theme.css b/frontend/editor/src/core/styles/theme.css
index 72f18c267d..a4dd149122 100644
--- a/frontend/editor/src/core/styles/theme.css
+++ b/frontend/editor/src/core/styles/theme.css
@@ -38,18 +38,16 @@
   );
 
   /* File Manager active file colors */
-  --file-active-badge-bg: rgba(
-    34,
-    197,
-    94,
-    0.15
+  --file-active-badge-bg: color-mix(
+    in srgb,
+    var(--p-green-500) 15%,
+    transparent
   ); /* Transparent green for active badge */
   --file-active-badge-fg: var(--p-green-700); /* Green text for active badge */
-  --file-active-badge-border: rgba(
-    34,
-    197,
-    94,
-    0.3
+  --file-active-badge-border: color-mix(
+    in srgb,
+    var(--p-green-500) 30%,
+    transparent
   ); /* Green border for active badge */
 }
 
@@ -490,7 +488,7 @@
 }
 
 [data-mantine-color-scheme="dark"] .plan-card [data-size="sm"] {
-  color: rgb(194, 200, 224) !important;
+  color: var(--p-periwinkle-200) !important;
 }
 
 /* Current plan badge - use light mode green in dark mode */
@@ -500,12 +498,12 @@
 
 /* Plan section button colors */
 .plan-button:not(:disabled):not([data-disabled]) {
-  background-color: #0a8bff !important;
+  background-color: var(--p-azure-500) !important;
 }
 
 [data-mantine-color-scheme="dark"]
   .plan-button:not(:disabled):not([data-disabled]) {
-  background-color: #2040a0 !important;
+  background-color: var(--p-royal-700) !important;
 }
 
 /* Lighter grey for disabled plan buttons */
@@ -534,19 +532,29 @@
 /* Flash highlight for comment card (e.g. "View comment" from annotation menu) */
 @keyframes comment-card-flash {
   0% {
-    background-color: rgba(255, 235, 59, 0);
+    background-color: color-mix(in srgb, var(--p-flash-yellow) 0%, transparent);
     box-shadow: none;
   }
   20% {
-    background-color: rgba(255, 235, 59, 0.35);
-    box-shadow: 0 0 20px rgba(255, 235, 59, 0.5);
+    background-color: color-mix(
+      in srgb,
+      var(--p-flash-yellow) 35%,
+      transparent
+    );
+    box-shadow: 0 0 20px
+      color-mix(in srgb, var(--p-flash-yellow) 50%, transparent);
   }
   50% {
-    background-color: rgba(255, 235, 59, 0.25);
-    box-shadow: 0 0 15px rgba(255, 235, 59, 0.4);
+    background-color: color-mix(
+      in srgb,
+      var(--p-flash-yellow) 25%,
+      transparent
+    );
+    box-shadow: 0 0 15px
+      color-mix(in srgb, var(--p-flash-yellow) 40%, transparent);
   }
   100% {
-    background-color: rgba(255, 235, 59, 0);
+    background-color: color-mix(in srgb, var(--p-flash-yellow) 0%, transparent);
     box-shadow: none;
   }
 }
@@ -697,7 +705,7 @@
 
 .pdf-link-toolbar-btn--delete:hover {
   background: color-mix(in srgb, var(--p-red-500) 15%, transparent);
-  color: #fca5a5;
+  color: var(--p-art-red-light);
 }
 
 .pdf-link-toolbar-sep {
@@ -769,19 +777,19 @@
 
 /* Modern logo icon */
 .logo-icon-modern__path1 {
-  fill: #acacac;
+  fill: var(--p-art-gray);
   fill-opacity: 0.3;
 }
 .logo-icon-modern__path2 {
-  fill: #fc9999;
+  fill: var(--p-art-red-soft);
   fill-opacity: 0.5;
 }
 [data-mantine-color-scheme="dark"] .logo-icon-modern__path1 {
-  fill: #e6e6e6;
+  fill: var(--p-gray-200);
   fill-opacity: 0.4;
 }
 [data-mantine-color-scheme="dark"] .logo-icon-modern__path2 {
-  fill: #e6e6e6;
+  fill: var(--p-gray-200);
   fill-opacity: 0.7;
 }
 
@@ -790,13 +798,13 @@
   opacity: 0.2;
 }
 .logo-icon-classic__body {
-  fill: #ff4b4b;
+  fill: var(--p-art-red);
 }
 .logo-icon-classic__flap {
-  fill: #545454;
+  fill: var(--p-gray-550);
 }
 .logo-icon-classic__triangle {
-  fill: #d0dbdc;
+  fill: var(--p-cool-gray-200);
 }
 .logo-icon-classic__s {
   fill: white;
@@ -808,10 +816,10 @@
   fill: white;
 }
 [data-mantine-color-scheme="dark"] .logo-icon-classic__flap {
-  fill: #d3d3d3;
+  fill: var(--p-gray-300);
 }
 [data-mantine-color-scheme="dark"] .logo-icon-classic__triangle {
-  fill: #d0dbdc;
+  fill: var(--p-cool-gray-200);
 }
 [data-mantine-color-scheme="dark"] .logo-icon-classic__s {
   fill: var(--mantine-color-body);
@@ -827,11 +835,11 @@
 }
 /* PDF text: dimmed red in light mode, standard red in dark */
 .wordmark__pdf--muted {
-  fill: #d62626;
+  fill: var(--p-art-red-strong);
   fill-opacity: 0.7;
 }
 [data-mantine-color-scheme="dark"] .wordmark__pdf--muted {
-  fill: #c56565;
+  fill: var(--p-art-red-muted);
   fill-opacity: 1;
 }
 
diff --git a/frontend/editor/src/core/theme/primitives.css b/frontend/editor/src/core/theme/primitives.css
index e805313dfa..c622833517 100644
--- a/frontend/editor/src/core/theme/primitives.css
+++ b/frontend/editor/src/core/theme/primitives.css
@@ -42,4 +42,95 @@
   --p-red-400: #f87171;
   --p-red-500: #ef4444;
   --p-red-600: #dc2626;
+  /* Extended palette — brand, data-viz, illustration & vendor/OS fixed colours (added by app-wide literal migration) */
+  --p-art-gray: #acacac;
+  --p-art-red: #ff4b4b;
+  --p-art-red-light: #fca5a5;
+  --p-art-red-muted: #c56565;
+  --p-art-red-soft: #fc9999;
+  --p-art-red-strong: #d62626;
+  --p-azure-300: #66b8ff;
+  --p-azure-400: #38bdf8;
+  --p-azure-450: #5b9bf7;
+  --p-azure-500: #0a8bff;
+  --p-azure-550: #4c8bf5;
+  --p-azure-560: #4f8ef5;
+  --p-azure-650: #3a7be8;
+  --p-blue-200: #93c5fd;
+  --p-brand-red: #af3434;
+  --p-brand-red-200: #d9a8a8;
+  --p-brand-red-300: #d98a8a;
+  --p-brand-red-600: #9a2e2e;
+  --p-brand-red-650: #8e3131;
+  --p-brand-red-700: #7a2929;
+  --p-brand-red-900: #5a2424;
+  --p-cool-gray-200: #d0dbdc;
+  --p-cyan-400: #22d3ee;
+  --p-cyan-500: #06b6d4;
+  --p-emerald-400: #34d399;
+  --p-emerald-500: #10b981;
+  --p-emerald-600: #059669;
+  --p-flash-yellow: #ffeb3b;
+  --p-gold-500: #ffc107;
+  --p-gray-450: #868e96;
+  --p-gray-550: #545454;
+  --p-gray-b0: #b0b0b0;
+  --p-gray-mid: #808080;
+  --p-green-400: #4ade80;
+  --p-indigo-200: #c7d2fe;
+  --p-indigo-300: #a5b4fc;
+  --p-indigo-400: #818cf8;
+  --p-indigo-500: #6366f1;
+  --p-indigo-800: #3730a3;
+  --p-material-blue: #2196f3;
+  --p-navy-500: #3b4b6e;
+  --p-navy-700: #16213e;
+  --p-navy-850: #1a2236;
+  --p-navy-880: #171e30;
+  --p-navy-900: #0f1626;
+  --p-navy-950: #0d1020;
+  --p-notion-blue: #2383e2;
+  --p-notion-blue-border: #b8d5f2;
+  --p-notion-blue-strong: #1b6ec2;
+  --p-notion-blue-tint: #eaf2fb;
+  --p-notion-border: #e3e1dc;
+  --p-notion-border-2: #eae8e3;
+  --p-notion-border-cool: #d3d1cb;
+  --p-notion-gray: #9b9a97;
+  --p-notion-gray-strong: #787774;
+  --p-notion-ink: #37352f;
+  --p-notion-paper: #f5f4f1;
+  --p-notion-paper-2: #f0eee9;
+  --p-periwinkle-200: #c2c8e0;
+  --p-periwinkle-500: #635bff;
+  --p-pink-500: #ec4899;
+  --p-plum-900: #201a28;
+  --p-purple-500: #6c5ce7;
+  --p-royal-700: #2040a0;
+  --p-slate-100: #f1f5f9;
+  --p-slate-200: #dee2e6;
+  --p-slate-300: #cbd5e1;
+  --p-slate-400: #94a3b8;
+  --p-slate-50: #e3e8ee;
+  --p-slate-500: #64748b;
+  --p-slate-600: #475569;
+  --p-slate-700: #334155;
+  --p-slate-850: #1f2933;
+  --p-slate-900: #0f172a;
+  --p-teal-700: #0f7b6c;
+  --p-tint-blue: #eef1fb;
+  --p-tint-pink: #fbf4f7;
+  --p-tint-violet: #f6f4fc;
+  --p-vendor-green: #66bb6a;
+  --p-vendor-red: #ef5350;
+  --p-vendor-red-bg: #ffebee;
+  --p-vendor-red-bg-dark: #3d2020;
+  --p-vendor-red-border: #ffcdd2;
+  --p-vendor-red-border-dark: #5d3030;
+  --p-vendor-red-soft: #ef9a9a;
+  --p-vendor-red-text: #c62828;
+  --p-violet-400: #a78bfa;
+  --p-violet-500: #8b5cf6;
+  --p-violet-600: #7c3aed;
+  --p-yellow-500: #eab308;
 }
diff --git a/frontend/editor/src/core/tokens/tokens.css b/frontend/editor/src/core/tokens/tokens.css
index 55e502d2c1..d0d74c12bd 100644
--- a/frontend/editor/src/core/tokens/tokens.css
+++ b/frontend/editor/src/core/tokens/tokens.css
@@ -93,21 +93,21 @@
   /* Gradients */
   --grad-blue-btn: linear-gradient(
     180deg,
-    #5b9bf7 0%,
-    #4c8bf5 50%,
-    #3a7be8 100%
+    var(--p-azure-450) 0%,
+    var(--p-azure-550) 50%,
+    var(--p-azure-650) 100%
   );
   --grad-purple-btn: linear-gradient(
     180deg,
-    #a78bfa 0%,
-    #8b5cf6 50%,
-    #7c3aed 100%
+    var(--p-violet-400) 0%,
+    var(--p-violet-500) 50%,
+    var(--p-violet-600) 100%
   );
   --grad-green-btn: linear-gradient(
     180deg,
-    #34d399 0%,
-    #10b981 50%,
-    #059669 100%
+    var(--p-emerald-400) 0%,
+    var(--p-emerald-500) 50%,
+    var(--p-emerald-600) 100%
   );
   --grad-amber-btn: linear-gradient(
     180deg,
diff --git a/frontend/editor/src/core/ui/ChatFABWindow.css b/frontend/editor/src/core/ui/ChatFABWindow.css
index 5772e4ff93..29f4e3d11e 100644
--- a/frontend/editor/src/core/ui/ChatFABWindow.css
+++ b/frontend/editor/src/core/ui/ChatFABWindow.css
@@ -7,10 +7,10 @@
   /* Use Mantine variables in the editor; fall back to shared tokens in storybook */
   background: var(--mantine-color-body, var(--c-surface, #ffffff));
   border-radius: 16px;
-  border: 1px solid var(--c-border-subtle, var(--c-border, #e3e8ee));
+  border: 1px solid var(--c-border-subtle, var(--c-border, var(--p-slate-50)));
   box-shadow:
-    0 8px 32px rgba(15, 23, 42, 0.14),
-    0 2px 8px rgba(15, 23, 42, 0.06);
+    0 8px 32px color-mix(in srgb, var(--p-slate-900) 14%, transparent),
+    0 2px 8px color-mix(in srgb, var(--p-slate-900) 6%, transparent);
   overflow: hidden;
 
   /* Closed state: collapsed toward bottom-right origin */
diff --git a/frontend/editor/src/core/ui/Drawer.css b/frontend/editor/src/core/ui/Drawer.css
index 7d07610b67..545637ccd6 100644
--- a/frontend/editor/src/core/ui/Drawer.css
+++ b/frontend/editor/src/core/ui/Drawer.css
@@ -1,7 +1,7 @@
 .sui-drawer__backdrop {
   position: fixed;
   inset: 0;
-  background: rgba(15, 23, 42, 0.32);
+  background: color-mix(in srgb, var(--p-slate-900) 32%, transparent);
   z-index: var(--z-drawer);
   animation: fadeIn 0.18s ease both;
 }
@@ -21,13 +21,14 @@
 .sui-drawer--right {
   right: 0;
   border-left: 1px solid var(--c-border);
-  box-shadow: -4px 0 24px rgba(15, 23, 42, 0.12);
+  box-shadow: -4px 0 24px
+    color-mix(in srgb, var(--p-slate-900) 12%, transparent);
 }
 
 .sui-drawer--left {
   left: 0;
   border-right: 1px solid var(--c-border);
-  box-shadow: 4px 0 24px rgba(15, 23, 42, 0.12);
+  box-shadow: 4px 0 24px color-mix(in srgb, var(--p-slate-900) 12%, transparent);
   animation-name: slideInLeft;
 }
 
diff --git a/frontend/editor/src/core/ui/Modal.css b/frontend/editor/src/core/ui/Modal.css
index 9c02e85511..2ca8a30b57 100644
--- a/frontend/editor/src/core/ui/Modal.css
+++ b/frontend/editor/src/core/ui/Modal.css
@@ -1,7 +1,7 @@
 .sui-modal__backdrop {
   position: fixed;
   inset: 0;
-  background: rgba(15, 23, 42, 0.55);
+  background: color-mix(in srgb, var(--p-slate-900) 55%, transparent);
   display: flex;
   align-items: flex-start;
   justify-content: center;
@@ -19,7 +19,7 @@
   border: 1px solid var(--c-border);
   border-radius: var(--radius-xl);
   box-shadow:
-    0 1.25rem 3rem rgba(15, 23, 42, 0.35),
+    0 1.25rem 3rem color-mix(in srgb, var(--p-slate-900) 35%, transparent),
     0 0 0 1px var(--c-border-subtle);
   display: flex;
   flex-direction: column;
diff --git a/frontend/editor/src/core/ui/accents.css b/frontend/editor/src/core/ui/accents.css
index 824a302c42..b5c2773b32 100644
--- a/frontend/editor/src/core/ui/accents.css
+++ b/frontend/editor/src/core/ui/accents.css
@@ -49,57 +49,57 @@ html[data-app-theme="custom"] .sui-acc-default {
 
 /* neutral: low-emphasis grey — no palette token, so explicit. */
 .sui-acc-neutral {
-  --_solid: #475569;
-  --_solid-hover: #334155;
+  --_solid: var(--p-slate-600);
+  --_solid-hover: var(--p-slate-700);
   --_on: #ffffff;
-  --_text: #475569;
-  --_bd: #cbd5e1;
-  --_tint: rgba(71, 85, 105, 0.1);
+  --_text: var(--p-slate-600);
+  --_bd: var(--p-slate-300);
+  --_tint: color-mix(in srgb, var(--p-slate-600) 10%, transparent);
 }
 [data-theme="dark"] .sui-acc-neutral {
-  --_solid: #64748b;
-  --_solid-hover: #475569;
-  --_text: #cbd5e1;
-  --_bd: #334155;
-  --_tint: rgba(148, 163, 184, 0.16);
+  --_solid: var(--p-slate-500);
+  --_solid-hover: var(--p-slate-600);
+  --_text: var(--p-slate-300);
+  --_bd: var(--p-slate-700);
+  --_tint: color-mix(in srgb, var(--p-slate-400) 16%, transparent);
 }
 /* brand: Stirling red — a bespoke brand colour, not part of the token palette. */
 .sui-acc-brand {
-  --_solid: #8e3131;
-  --_solid-hover: #7a2929;
+  --_solid: var(--p-brand-red-650);
+  --_solid-hover: var(--p-brand-red-700);
   --_on: #ffffff;
-  --_text: #8e3131;
-  --_bd: #d9a8a8;
-  --_tint: rgba(142, 49, 49, 0.09);
+  --_text: var(--p-brand-red-650);
+  --_bd: var(--p-brand-red-200);
+  --_tint: color-mix(in srgb, var(--p-brand-red-650) 9%, transparent);
 }
 [data-theme="dark"] .sui-acc-brand {
-  --_text: #d98a8a;
-  --_bd: #5a2424;
-  --_tint: rgba(217, 138, 138, 0.16);
+  --_text: var(--p-brand-red-300);
+  --_bd: var(--p-brand-red-900);
+  --_tint: color-mix(in srgb, var(--p-brand-red-300) 16%, transparent);
 }
 /* ai: multi-hue gradient for AI features — no single-colour token. */
 .sui-acc-ai {
   --_solid: linear-gradient(
     135deg,
-    #8b5cf6 0%,
-    #6366f1 38%,
+    var(--p-violet-500) 0%,
+    var(--p-indigo-500) 38%,
     var(--p-blue-500) 72%,
-    #22d3ee 100%
+    var(--p-cyan-400) 100%
   );
   --_solid-hover: linear-gradient(
     135deg,
-    #8b5cf6 0%,
-    #6366f1 38%,
+    var(--p-violet-500) 0%,
+    var(--p-indigo-500) 38%,
     var(--p-blue-500) 72%,
-    #22d3ee 100%
+    var(--p-cyan-400) 100%
   );
   --_on: #ffffff;
-  --_text: #6366f1;
-  --_bd: #c7d2fe;
-  --_tint: rgba(99, 102, 241, 0.1);
+  --_text: var(--p-indigo-500);
+  --_bd: var(--p-indigo-200);
+  --_tint: color-mix(in srgb, var(--p-indigo-500) 10%, transparent);
 }
 [data-theme="dark"] .sui-acc-ai {
-  --_text: #a5b4fc;
-  --_bd: #3730a3;
-  --_tint: rgba(129, 140, 248, 0.18);
+  --_text: var(--p-indigo-300);
+  --_bd: var(--p-indigo-800);
+  --_tint: color-mix(in srgb, var(--p-indigo-400) 18%, transparent);
 }
diff --git a/frontend/editor/src/output.css b/frontend/editor/src/output.css
index c77b20bc87..8869b72c56 100644
--- a/frontend/editor/src/output.css
+++ b/frontend/editor/src/output.css
@@ -1,362 +1,375 @@
-*, ::before, ::after {
-    --tw-border-spacing-x: 0;
-    --tw-border-spacing-y: 0;
-    --tw-translate-x: 0;
-    --tw-translate-y: 0;
-    --tw-rotate: 0;
-    --tw-skew-x: 0;
-    --tw-skew-y: 0;
-    --tw-scale-x: 1;
-    --tw-scale-y: 1;
-    --tw-pan-x:  ;
-    --tw-pan-y:  ;
-    --tw-pinch-zoom:  ;
-    --tw-scroll-snap-strictness: proximity;
-    --tw-gradient-from-position:  ;
-    --tw-gradient-via-position:  ;
-    --tw-gradient-to-position:  ;
-    --tw-ordinal:  ;
-    --tw-slashed-zero:  ;
-    --tw-numeric-figure:  ;
-    --tw-numeric-spacing:  ;
-    --tw-numeric-fraction:  ;
-    --tw-ring-inset:  ;
-    --tw-ring-offset-width: 0px;
-    --tw-ring-offset-color: #fff;
-    --tw-ring-color: rgb(59 130 246 / 0.5);
-    --tw-ring-offset-shadow: 0 0 #0000;
-    --tw-ring-shadow: 0 0 #0000;
-    --tw-shadow: 0 0 #0000;
-    --tw-shadow-colored: 0 0 #0000;
-    --tw-blur:  ;
-    --tw-brightness:  ;
-    --tw-contrast:  ;
-    --tw-grayscale:  ;
-    --tw-hue-rotate:  ;
-    --tw-invert:  ;
-    --tw-saturate:  ;
-    --tw-sepia:  ;
-    --tw-drop-shadow:  ;
-    --tw-backdrop-blur:  ;
-    --tw-backdrop-brightness:  ;
-    --tw-backdrop-contrast:  ;
-    --tw-backdrop-grayscale:  ;
-    --tw-backdrop-hue-rotate:  ;
-    --tw-backdrop-invert:  ;
-    --tw-backdrop-opacity:  ;
-    --tw-backdrop-saturate:  ;
-    --tw-backdrop-sepia:  ;
-    --tw-contain-size:  ;
-    --tw-contain-layout:  ;
-    --tw-contain-paint:  ;
-    --tw-contain-style:  
+*,
+::before,
+::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:   
+;
 }
 ::backdrop {
-    --tw-border-spacing-x: 0;
-    --tw-border-spacing-y: 0;
-    --tw-translate-x: 0;
-    --tw-translate-y: 0;
-    --tw-rotate: 0;
-    --tw-skew-x: 0;
-    --tw-skew-y: 0;
-    --tw-scale-x: 1;
-    --tw-scale-y: 1;
-    --tw-pan-x:  ;
-    --tw-pan-y:  ;
-    --tw-pinch-zoom:  ;
-    --tw-scroll-snap-strictness: proximity;
-    --tw-gradient-from-position:  ;
-    --tw-gradient-via-position:  ;
-    --tw-gradient-to-position:  ;
-    --tw-ordinal:  ;
-    --tw-slashed-zero:  ;
-    --tw-numeric-figure:  ;
-    --tw-numeric-spacing:  ;
-    --tw-numeric-fraction:  ;
-    --tw-ring-inset:  ;
-    --tw-ring-offset-width: 0px;
-    --tw-ring-offset-color: #fff;
-    --tw-ring-color: rgb(59 130 246 / 0.5);
-    --tw-ring-offset-shadow: 0 0 #0000;
-    --tw-ring-shadow: 0 0 #0000;
-    --tw-shadow: 0 0 #0000;
-    --tw-shadow-colored: 0 0 #0000;
-    --tw-blur:  ;
-    --tw-brightness:  ;
-    --tw-contrast:  ;
-    --tw-grayscale:  ;
-    --tw-hue-rotate:  ;
-    --tw-invert:  ;
-    --tw-saturate:  ;
-    --tw-sepia:  ;
-    --tw-drop-shadow:  ;
-    --tw-backdrop-blur:  ;
-    --tw-backdrop-brightness:  ;
-    --tw-backdrop-contrast:  ;
-    --tw-backdrop-grayscale:  ;
-    --tw-backdrop-hue-rotate:  ;
-    --tw-backdrop-invert:  ;
-    --tw-backdrop-opacity:  ;
-    --tw-backdrop-saturate:  ;
-    --tw-backdrop-sepia:  ;
-    --tw-contain-size:  ;
-    --tw-contain-layout:  ;
-    --tw-contain-paint:  ;
-    --tw-contain-style:  
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:   
+;
 }
 .mb-3 {
-    margin-bottom: 0.75rem
+  margin-bottom: 0.75rem;
 }
 .mb-4 {
-    margin-bottom: 1rem
+  margin-bottom: 1rem;
 }
 .mr-2 {
-    margin-right: 0.5rem
+  margin-right: 0.5rem;
 }
 .mt-2 {
-    margin-top: 0.5rem
+  margin-top: 0.5rem;
 }
 .mt-4 {
-    margin-top: 1rem
+  margin-top: 1rem;
 }
 .block {
-    display: block
+  display: block;
 }
 .flex {
-    display: flex
+  display: flex;
 }
 .hidden {
-    display: none
+  display: none;
 }
 .h-6 {
-    height: 1.5rem
+  height: 1.5rem;
 }
 .h-full {
-    height: 100%
+  height: 100%;
 }
 .h-screen {
-    height: 100vh
+  height: 100vh;
 }
 .w-6 {
-    width: 1.5rem
+  width: 1.5rem;
 }
 .w-64 {
-    width: 16rem
+  width: 16rem;
 }
 .w-72 {
-    width: 18rem
+  width: 18rem;
 }
 .w-full {
-    width: 100%
+  width: 100%;
 }
 .max-w-3xl {
-    max-width: 48rem
+  max-width: 48rem;
 }
 .flex-1 {
-    flex: 1 1 0%
+  flex: 1 1 0%;
 }
 .cursor-pointer {
-    cursor: pointer
+  cursor: pointer;
 }
 .list-disc {
-    list-style-type: disc
+  list-style-type: disc;
 }
 .flex-col {
-    flex-direction: column
+  flex-direction: column;
 }
 .items-center {
-    align-items: center
+  align-items: center;
 }
 .justify-center {
-    justify-content: center
+  justify-content: center;
 }
 .justify-between {
-    justify-content: space-between
+  justify-content: space-between;
 }
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 .space-x-3 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(0.75rem * var(--tw-space-x-reverse));
-    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)))
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
 }
 .space-y-2 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-y-reverse: 0;
-    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 .space-y-3 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-y-reverse: 0;
-    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse))
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
 }
 .space-y-4 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-y-reverse: 0;
-    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(1rem * var(--tw-space-y-reverse))
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 .overflow-hidden {
-    overflow: hidden
+  overflow: hidden;
 }
 .overflow-y-auto {
-    overflow-y: auto
+  overflow-y: auto;
 }
 .rounded {
-    border-radius: 0.25rem
+  border-radius: 0.25rem;
 }
 .rounded-md {
-    border-radius: 0.375rem
+  border-radius: 0.375rem;
 }
 .border {
-    border-width: 1px
+  border-width: 1px;
 }
 .border-b {
-    border-bottom-width: 1px
+  border-bottom-width: 1px;
 }
 .border-l {
-    border-left-width: 1px
+  border-left-width: 1px;
 }
 .border-r {
-    border-right-width: 1px
+  border-right-width: 1px;
 }
 .border-none {
-    border-style: none
+  border-style: none;
 }
 .bg-blue-600 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1))
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
 }
 .bg-gray-100 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1))
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
 }
 .bg-gray-50 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1))
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
 }
 .bg-green-600 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1))
+  --tw-bg-opacity: 1;
+  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
 }
 .bg-white {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
 .p-2 {
-    padding: 0.5rem
+  padding: 0.5rem;
 }
 .p-4 {
-    padding: 1rem
+  padding: 1rem;
 }
 .px-2 {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
 }
 .px-4 {
-    padding-left: 1rem;
-    padding-right: 1rem
+  padding-left: 1rem;
+  padding-right: 1rem;
 }
 .py-1 {
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
 }
 .py-2 {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 .pl-5 {
-    padding-left: 1.25rem
+  padding-left: 1.25rem;
 }
 .text-left {
-    text-align: left
+  text-align: left;
 }
 .text-center {
-    text-align: center
+  text-align: center;
 }
 .text-lg {
-    font-size: 1.125rem;
-    line-height: 1.75rem
+  font-size: 1.125rem;
+  line-height: 1.75rem;
 }
 .text-sm {
-    font-size: 0.875rem;
-    line-height: 1.25rem
+  font-size: 0.875rem;
+  line-height: 1.25rem;
 }
 .text-xl {
-    font-size: 1.25rem;
-    line-height: 1.75rem
+  font-size: 1.25rem;
+  line-height: 1.75rem;
 }
 .text-xs {
-    font-size: 0.75rem;
-    line-height: 1rem
+  font-size: 0.75rem;
+  line-height: 1rem;
 }
 .font-medium {
-    font-weight: 500
+  font-weight: 500;
 }
 .font-semibold {
-    font-weight: 600
+  font-weight: 600;
 }
 .leading-none {
-    line-height: 1
+  line-height: 1;
 }
 .text-blue-600 {
-    --tw-text-opacity: 1;
-    color: rgb(37 99 235 / var(--tw-text-opacity, 1))
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
 }
 .text-gray-500 {
-    --tw-text-opacity: 1;
-    color: rgb(107 114 128 / var(--tw-text-opacity, 1))
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
 }
 .text-gray-600 {
-    --tw-text-opacity: 1;
-    color: rgb(75 85 99 / var(--tw-text-opacity, 1))
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
 }
 .text-red-500 {
-    --tw-text-opacity: 1;
-    color: rgb(239 68 68 / var(--tw-text-opacity, 1))
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
 }
 .text-red-600 {
-    --tw-text-opacity: 1;
-    color: rgb(220 38 38 / var(--tw-text-opacity, 1))
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
 }
 .text-white {
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 .underline {
-    text-decoration-line: underline
+  text-decoration-line: underline;
 }
 .shadow {
-    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored:
+    0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
 }
 .shadow-sm {
-    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
 }
 .grayscale {
-    --tw-grayscale: grayscale(100%);
-    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
+  --tw-grayscale: grayscale(100%);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
+    var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
+    var(--tw-sepia) var(--tw-drop-shadow);
 }
 .filter {
-    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
+    var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
+    var(--tw-sepia) var(--tw-drop-shadow);
 }
 .hover\:bg-blue-700:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1))
+  --tw-bg-opacity: 1;
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
 }
 .hover\:bg-gray-200:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1))
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
 }
 .hover\:bg-green-700:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1))
+  --tw-bg-opacity: 1;
+  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
 }
 .hover\:underline:hover {
-    text-decoration-line: underline
+  text-decoration-line: underline;
 }
diff --git a/frontend/editor/src/portal/components/AssistantButton.css b/frontend/editor/src/portal/components/AssistantButton.css
index a1b79c879e..e4b55f5636 100644
--- a/frontend/editor/src/portal/components/AssistantButton.css
+++ b/frontend/editor/src/portal/components/AssistantButton.css
@@ -15,7 +15,7 @@
     var(--color-purple) 100%
   );
   box-shadow:
-    0 0.5rem 1.25rem rgba(59, 130, 246, 0.35),
+    0 0.5rem 1.25rem color-mix(in srgb, var(--p-blue-500) 35%, transparent),
     inset 0 0.0625rem 0 rgba(255, 255, 255, 0.2);
   transition:
     transform var(--motion-base),
@@ -26,7 +26,7 @@
 .portal-assistant-btn:hover {
   transform: scale(1.08);
   box-shadow:
-    0 0.75rem 1.75rem rgba(59, 130, 246, 0.45),
+    0 0.75rem 1.75rem color-mix(in srgb, var(--p-blue-500) 45%, transparent),
     inset 0 0.0625rem 0 rgba(255, 255, 255, 0.25);
 }
 
diff --git a/frontend/editor/src/portal/components/EditorStatusCard.css b/frontend/editor/src/portal/components/EditorStatusCard.css
index fa3e5b4e5b..734f8f947b 100644
--- a/frontend/editor/src/portal/components/EditorStatusCard.css
+++ b/frontend/editor/src/portal/components/EditorStatusCard.css
@@ -123,7 +123,7 @@
 .portal-editor-hero__action .portal-editor-hero__cta.sui-btn {
   background: #ffffff;
   border-color: #ffffff;
-  color: #16213e;
+  color: var(--p-navy-700);
 }
 .portal-editor-hero__action .portal-editor-hero__cta.sui-btn:hover {
   background: rgba(255, 255, 255, 0.88);
diff --git a/frontend/editor/src/portal/components/WelcomeBanner.css b/frontend/editor/src/portal/components/WelcomeBanner.css
index 4085e12e25..4d94c90372 100644
--- a/frontend/editor/src/portal/components/WelcomeBanner.css
+++ b/frontend/editor/src/portal/components/WelcomeBanner.css
@@ -90,7 +90,7 @@
 .portal-welcome__header .portal-welcome__cta.sui-btn {
   background: #ffffff;
   border-color: #ffffff;
-  color: #16213e;
+  color: var(--p-navy-700);
 }
 .portal-welcome__header .portal-welcome__cta.sui-btn:hover {
   background: rgba(255, 255, 255, 0.88);
diff --git a/frontend/editor/src/portal/components/billing/billing.css b/frontend/editor/src/portal/components/billing/billing.css
index ffedd2a26d..a95dd951c4 100644
--- a/frontend/editor/src/portal/components/billing/billing.css
+++ b/frontend/editor/src/portal/components/billing/billing.css
@@ -231,7 +231,7 @@
   background: linear-gradient(
     90deg,
     var(--c-primary),
-    var(--color-purple, #8b5cf6)
+    var(--color-purple, var(--p-violet-500))
   );
   border-radius: 999px;
   transition: width 200ms ease;
@@ -313,7 +313,7 @@
 }
 .payg-status[data-state="FULL"] .payg-status__dot {
   background: var(--c-success);
-  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-green-500) 18%, transparent);
 }
 .payg-status[data-state="WARNED"] {
   background: var(--c-warning-subtle);
@@ -321,7 +321,7 @@
 }
 .payg-status[data-state="WARNED"] .payg-status__dot {
   background: var(--c-warning);
-  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.2);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-yellow-500) 20%, transparent);
 }
 .payg-status[data-state="DEGRADED"] {
   background: var(--c-danger-subtle);
@@ -329,7 +329,7 @@
 }
 .payg-status[data-state="DEGRADED"] .payg-status__dot {
   background: var(--c-danger);
-  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-red-500) 20%, transparent);
 }
 
 /* Segmented usage bar */
@@ -347,7 +347,7 @@
   transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
 }
 .payg-bar__fill[data-state="FULL"] {
-  background: linear-gradient(90deg, #0a8bff, #38bdf8);
+  background: linear-gradient(90deg, var(--p-azure-500), var(--p-azure-400));
 }
 .payg-bar__fill[data-state="WARNED"] {
   background: linear-gradient(90deg, var(--p-amber-500), var(--p-amber-400));
@@ -457,15 +457,15 @@
 }
 
 .portal-billing__breakdown-fill--blue {
-  background: #0a8bff;
+  background: var(--p-azure-500);
 }
 
 .portal-billing__breakdown-fill--purple {
-  background: #8b5cf6;
+  background: var(--p-violet-500);
 }
 
 .portal-billing__breakdown-fill--teal {
-  background: #06b6d4;
+  background: var(--p-cyan-500);
 }
 
 /* ── Cap control ────────────────────────────────────────────────────────── */
@@ -570,10 +570,10 @@
    Same class names + structure so the visual is identical to the SaaS Plan
    page; when the shared-component move lands, these dedupe to one stylesheet. */
 .scc {
-  --scc-accent: #0a8bff;
-  --scc-accent-text: #0a8bff;
-  --scc-accent-soft: rgba(10, 139, 255, 0.12);
-  --scc-accent-border: rgba(10, 139, 255, 0.25);
+  --scc-accent: var(--p-azure-500);
+  --scc-accent-text: var(--p-azure-500);
+  --scc-accent-soft: color-mix(in srgb, var(--p-azure-500) 12%, transparent);
+  --scc-accent-border: color-mix(in srgb, var(--p-azure-500) 25%, transparent);
   --scc-chip-bg: var(--c-surface-sunken);
   --scc-chip-border: var(--c-border);
   --scc-text-primary: var(--c-text);
@@ -588,8 +588,8 @@
 [data-mantine-color-scheme="dark"] .scc {
   /* Brand accent lightened for dark legibility; neutral chip bg/border come
      from the adaptive --c-* base rule above. */
-  --scc-accent-text: #66b8ff;
-  --scc-accent-soft: rgba(10, 139, 255, 0.16);
+  --scc-accent-text: var(--p-azure-300);
+  --scc-accent-soft: color-mix(in srgb, var(--p-azure-500) 16%, transparent);
 }
 
 .scc-row {
@@ -736,9 +736,9 @@
   white-space: nowrap;
 }
 .portal-billing__role-pill[data-leader="true"] {
-  background: rgba(10, 139, 255, 0.12);
-  color: #0a8bff;
-  border: 1px solid rgba(10, 139, 255, 0.25);
+  background: color-mix(in srgb, var(--p-azure-500) 12%, transparent);
+  color: var(--p-azure-500);
+  border: 1px solid color-mix(in srgb, var(--p-azure-500) 25%, transparent);
 }
 .portal-billing__role-pill[data-leader="false"] {
   background: var(--c-surface-sunken);
@@ -768,10 +768,10 @@
   margin-bottom: 8px;
 }
 .portal-billing__planhead-lbl--free {
-  color: #10b981;
+  color: var(--p-emerald-500);
 }
 .portal-billing__planhead-lbl--meter {
-  color: #0a8bff;
+  color: var(--p-azure-500);
 }
 .portal-billing__planhead-title {
   margin: 0;
@@ -988,13 +988,13 @@
   height: 100%;
 }
 .portal-billing__segbar-seg--blue {
-  background: #0a8bff;
+  background: var(--p-azure-500);
 }
 .portal-billing__segbar-seg--purple {
-  background: #8b5cf6;
+  background: var(--p-violet-500);
 }
 .portal-billing__segbar-seg--teal {
-  background: #06b6d4;
+  background: var(--p-cyan-500);
 }
 .portal-billing__seglegend {
   display: flex;
@@ -1016,13 +1016,13 @@
   flex-shrink: 0;
 }
 .portal-billing__dot--blue {
-  background: #0a8bff;
+  background: var(--p-azure-500);
 }
 .portal-billing__dot--purple {
-  background: #8b5cf6;
+  background: var(--p-violet-500);
 }
 .portal-billing__dot--teal {
-  background: #06b6d4;
+  background: var(--p-cyan-500);
 }
 .portal-billing__seglegend-label {
   font-weight: 600;
diff --git a/frontend/editor/src/portal/views/Procurement.css b/frontend/editor/src/portal/views/Procurement.css
index 57aff80dda..664df89418 100644
--- a/frontend/editor/src/portal/views/Procurement.css
+++ b/frontend/editor/src/portal/views/Procurement.css
@@ -589,9 +589,9 @@
 /* ══ Quote builder — copied from the marketing prototype (tight density) ═════ */
 .portal-qb {
   background: #ffffff;
-  border: 1px solid #e3e1dc;
+  border: 1px solid var(--p-notion-border);
   border-radius: 14px;
-  box-shadow: inset 0 0 0 1px #eae8e3;
+  box-shadow: inset 0 0 0 1px var(--p-notion-border-2);
   overflow: hidden;
 }
 .portal-qb__head {
@@ -599,10 +599,10 @@
   align-items: center;
   justify-content: space-between;
   padding: 18px 24px 14px;
-  border-bottom: 1px solid #f0eee9;
+  border-bottom: 1px solid var(--p-notion-paper-2);
   background: linear-gradient(
     180deg,
-    rgba(35, 131, 226, 0.055) 0%,
+    color-mix(in srgb, var(--p-notion-blue) 5.5%, transparent) 0%,
     transparent 100%
   );
 }
@@ -610,13 +610,13 @@
   margin: 0;
   font-size: 16px;
   font-weight: 700;
-  color: #37352f;
+  color: var(--p-notion-ink);
 }
 .portal-qb__stepchip {
   font-size: 11px;
   font-weight: 700;
-  color: #9b9a97;
-  background: #f5f4f1;
+  color: var(--p-notion-gray);
+  background: var(--p-notion-paper);
   padding: 3px 10px;
   border-radius: 999px;
 }
@@ -629,11 +629,11 @@
   flex: 1;
   height: 6px;
   border-radius: 999px;
-  background: #f0eee9;
+  background: var(--p-notion-paper-2);
   transition: background 0.3s;
 }
 .portal-qb__progress span[data-on] {
-  background: #2383e2;
+  background: var(--p-notion-blue);
 }
 .portal-qb__body {
   padding: 20px 24px;
@@ -650,7 +650,7 @@
   width: 38px;
   height: 38px;
   border-radius: 10px;
-  background: #eaf2fb;
+  background: var(--p-notion-blue-tint);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -660,11 +660,11 @@
 .portal-qb__intro-title {
   font-size: 15px;
   font-weight: 700;
-  color: #37352f;
+  color: var(--p-notion-ink);
 }
 .portal-qb__intro-sub {
   font-size: 12.5px;
-  color: #9b9a97;
+  color: var(--p-notion-gray);
   margin-top: 1px;
 }
 .portal-qb__field {
@@ -675,7 +675,7 @@
   display: block;
   font-size: 12px;
   font-weight: 600;
-  color: #787774;
+  color: var(--p-notion-gray-strong);
   margin-bottom: 6px;
 }
 .portal-qb__field input,
@@ -685,11 +685,11 @@
   padding: 9px 11px;
   font-size: 13.5px;
   border-radius: 8px;
-  border: 1px solid #e3e1dc;
+  border: 1px solid var(--p-notion-border);
   font-family: inherit;
   outline: none;
   background: #fff;
-  color: #37352f;
+  color: var(--p-notion-ink);
 }
 .portal-qb__row {
   display: flex;
@@ -703,7 +703,7 @@
 .portal-qb__hint {
   margin: 7px 0 0;
   font-size: 11.5px;
-  color: #9b9a97;
+  color: var(--p-notion-gray);
   line-height: 1.4;
 }
 .portal-qb__pills {
@@ -716,20 +716,20 @@
   font-size: 13px;
   font-weight: 600;
   border-radius: 8px;
-  border: 1px solid #e3e1dc;
+  border: 1px solid var(--p-notion-border);
   background: #fff;
-  color: #37352f;
+  color: var(--p-notion-ink);
   cursor: pointer;
 }
 .portal-qb__pills button[data-on] {
-  background: #2383e2;
-  border-color: #2383e2;
+  background: var(--p-notion-blue);
+  border-color: var(--p-notion-blue);
   color: #fff;
 }
 .portal-qb__discount {
   margin: 6px 0 0;
   font-size: 11.5px;
-  color: #0f7b6c;
+  color: var(--p-teal-700);
 }
 .portal-qb__opts {
   display: flex;
@@ -742,7 +742,7 @@
   min-width: 150px;
   padding: 12px 14px;
   border-radius: 9px;
-  border: 1px solid #e3e1dc;
+  border: 1px solid var(--p-notion-border);
   background: #fff;
   cursor: pointer;
   display: flex;
@@ -750,20 +750,20 @@
   gap: 2px;
 }
 .portal-qb__opt[data-on] {
-  border-color: #2383e2;
-  background: #eaf2fb;
+  border-color: var(--p-notion-blue);
+  background: var(--p-notion-blue-tint);
 }
 .portal-qb__opt-title {
   font-size: 13px;
   font-weight: 700;
-  color: #37352f;
+  color: var(--p-notion-ink);
 }
 .portal-qb__opt[data-on] .portal-qb__opt-title {
-  color: #1b6ec2;
+  color: var(--p-notion-blue-strong);
 }
 .portal-qb__opt-sub {
   font-size: 11.5px;
-  color: #9b9a97;
+  color: var(--p-notion-gray);
   line-height: 1.4;
 }
 .portal-qb__addons {
@@ -777,21 +777,21 @@
   gap: 11px;
   padding: 11px 13px;
   border-radius: 9px;
-  border: 1px solid #e3e1dc;
+  border: 1px solid var(--p-notion-border);
   background: #fff;
   cursor: pointer;
   text-align: left;
 }
 .portal-qb__addon[data-on] {
-  border-color: #2383e2;
-  background: #eaf2fb;
+  border-color: var(--p-notion-blue);
+  background: var(--p-notion-blue-tint);
 }
 .portal-qb__addon-box {
   width: 18px;
   height: 18px;
   flex-shrink: 0;
   border-radius: 5px;
-  border: 1px solid #d3d1cb;
+  border: 1px solid var(--p-notion-border-cool);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -800,20 +800,20 @@
   background: #fff;
 }
 .portal-qb__addon[data-on] .portal-qb__addon-box {
-  background: #2383e2;
-  border-color: #2383e2;
+  background: var(--p-notion-blue);
+  border-color: var(--p-notion-blue);
   color: #fff;
 }
 .portal-qb__addon-title {
   display: block;
   font-size: 13px;
   font-weight: 600;
-  color: #37352f;
+  color: var(--p-notion-ink);
 }
 .portal-qb__addon-sub {
   display: block;
   font-size: 11.5px;
-  color: #9b9a97;
+  color: var(--p-notion-gray);
   margin-top: 1px;
 }
 .portal-qb__eula {
@@ -822,10 +822,10 @@
   gap: 10px;
   padding: 12px;
   border-radius: 9px;
-  border: 1px solid #f0eee9;
-  background: #f5f4f1;
+  border: 1px solid var(--p-notion-paper-2);
+  background: var(--p-notion-paper);
   font-size: 12.5px;
-  color: #37352f;
+  color: var(--p-notion-ink);
   line-height: 1.5;
   cursor: pointer;
 }
@@ -835,12 +835,12 @@
   justify-content: space-between;
   gap: 12px;
   padding: 14px 24px;
-  border-top: 1px solid #f0eee9;
+  border-top: 1px solid var(--p-notion-paper-2);
   flex-wrap: wrap;
 }
 .portal-qb__running {
   font-size: 11.5px;
-  color: #9b9a97;
+  color: var(--p-notion-gray);
 }
 .portal-qb__foot-btns {
   display: flex;
@@ -848,7 +848,7 @@
 }
 /* Step 4 — the itemised quote paper */
 .portal-qb__papertray {
-  background: #f5f4f1;
+  background: var(--p-notion-paper);
   padding: 18px;
   max-height: 56vh;
   overflow-y: auto;
@@ -856,26 +856,26 @@
 }
 .portal-qb__paper {
   background: #fff;
-  border: 1px solid #f0eee9;
+  border: 1px solid var(--p-notion-paper-2);
   border-radius: 12px;
   overflow: hidden;
-  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
+  box-shadow: 0 1px 3px color-mix(in srgb, var(--p-slate-900) 6%, transparent);
 }
 .portal-qb__paper-head {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   padding: 20px 24px;
-  border-bottom: 1px solid #f0eee9;
+  border-bottom: 1px solid var(--p-notion-paper-2);
 }
 .portal-qb__paper-brand {
   font-size: 13.5px;
   font-weight: 800;
-  color: #37352f;
+  color: var(--p-notion-ink);
 }
 .portal-qb__paper-eyebrow {
   font-size: 11px;
-  color: #9b9a97;
+  color: var(--p-notion-gray);
 }
 .portal-qb__paper-meta {
   text-align: right;
@@ -883,11 +883,11 @@
 .portal-qb__quote-number {
   font-size: 12.5px;
   font-weight: 700;
-  color: #37352f;
+  color: var(--p-notion-ink);
 }
 .portal-qb__paper-meta div:not(.portal-qb__quote-number) {
   font-size: 11px;
-  color: #9b9a97;
+  color: var(--p-notion-gray);
 }
 .portal-qb__paper-for {
   padding: 18px 24px 0;
@@ -895,7 +895,7 @@
 .portal-qb__paper-company {
   font-size: 14px;
   font-weight: 700;
-  color: #37352f;
+  color: var(--p-notion-ink);
 }
 .portal-qb__lines {
   list-style: none;
@@ -907,16 +907,16 @@
   justify-content: space-between;
   gap: 14px;
   padding: 10px 0;
-  border-bottom: 1px solid #f0eee9;
+  border-bottom: 1px solid var(--p-notion-paper-2);
   font-size: 13px;
   font-weight: 600;
-  color: #37352f;
+  color: var(--p-notion-ink);
 }
 .portal-qb__lines li[data-kind="DISCOUNT"] {
-  color: #0f7b6c;
+  color: var(--p-teal-700);
 }
 .portal-qb__lines li[data-kind="INCLUDED"] span:last-child {
-  color: #9b9a97;
+  color: var(--p-notion-gray);
   font-weight: 500;
 }
 .portal-qb__total {
@@ -926,17 +926,17 @@
   margin: 16px 24px 24px;
   padding: 16px 18px;
   border-radius: 10px;
-  background: #eaf2fb;
-  border: 1px solid #b8d5f2;
+  background: var(--p-notion-blue-tint);
+  border: 1px solid var(--p-notion-blue-border);
 }
 .portal-qb__total-label {
   font-size: 13px;
   font-weight: 700;
-  color: #37352f;
+  color: var(--p-notion-ink);
 }
 .portal-qb__total-tcv {
   font-size: 11.5px;
-  color: #787774;
+  color: var(--p-notion-gray-strong);
   margin-top: 2px;
 }
 .portal-qb__total-num {
@@ -946,12 +946,12 @@
   display: block;
   font-size: 23px;
   font-weight: 800;
-  color: #37352f;
+  color: var(--p-notion-ink);
   line-height: 1;
 }
 .portal-qb__total-num span {
   font-size: 11px;
-  color: #9b9a97;
+  color: var(--p-notion-gray);
   margin-top: 3px;
 }
 
@@ -968,7 +968,7 @@
   background:
     radial-gradient(
       120% 140% at 100% 0%,
-      rgba(124, 58, 237, 0.08),
+      color-mix(in srgb, var(--p-violet-600) 8%, transparent),
       transparent 55%
     ),
     var(--c-surface);
@@ -1069,7 +1069,8 @@
   background: var(--c-surface);
   border: 1px solid var(--c-border);
   border-radius: 14px;
-  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
+  box-shadow: 0 24px 64px
+    color-mix(in srgb, var(--p-slate-900) 28%, transparent);
   padding: 1.5rem 1.5rem 1.75rem;
 }
 .portal-procmodal__close {
@@ -1199,7 +1200,7 @@
 }
 .portal-hero__chip--action:hover {
   background: var(--c-surface);
-  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.1);
+  box-shadow: 0 2px 5px color-mix(in srgb, var(--p-slate-900) 10%, transparent);
   transform: translateY(-1px);
 }
 
@@ -1284,7 +1285,8 @@
   background: var(--c-surface);
   border: 1px solid var(--c-border);
   border-radius: 14px;
-  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
+  box-shadow: 0 24px 64px
+    color-mix(in srgb, var(--p-slate-900) 28%, transparent);
   padding: 1.35rem 1.4rem 1.4rem;
   max-height: 86vh;
   overflow-y: auto;
diff --git a/frontend/editor/src/proprietary/auth/ui/auth.css b/frontend/editor/src/proprietary/auth/ui/auth.css
index e6ddfca10e..2c6df08962 100644
--- a/frontend/editor/src/proprietary/auth/ui/auth.css
+++ b/frontend/editor/src/proprietary/auth/ui/auth.css
@@ -127,7 +127,7 @@
 .auth-checkbox {
   width: 1rem; /* 16px */
   height: 1rem; /* 16px */
-  accent-color: #af3434;
+  accent-color: var(--p-brand-red);
 }
 
 .auth-terms-label {
@@ -258,8 +258,8 @@
 .oauth-button-vertical-tinted {
   background: linear-gradient(
     90deg,
-    color-mix(in srgb, var(--oauth-accent) 65%, #0f172a) 0 6px,
-    #0f172a 6px 100%
+    color-mix(in srgb, var(--oauth-accent) 65%, var(--p-slate-900)) 0 6px,
+    var(--p-slate-900) 6px 100%
   );
 }
 
@@ -313,28 +313,31 @@
 
 .oauth-button-vertical-outline {
   background: transparent;
-  border: 2px solid #0f172a;
-  color: #0f172a;
+  border: 2px solid var(--p-slate-900);
+  color: var(--p-slate-900);
   box-shadow: none;
 }
 
 .oauth-button-vertical-outline:hover:not(:disabled) {
-  background: #0f172a;
+  background: var(--p-slate-900);
   color: var(--p-gray-50);
-  box-shadow: 0 0.35rem 0.9rem rgba(15, 23, 42, 0.2);
+  box-shadow: 0 0.35rem 0.9rem
+    color-mix(in srgb, var(--p-slate-900) 20%, transparent);
 }
 
 .oauth-button-vertical-light {
   background: var(--p-gray-50);
-  color: #0f172a;
-  border: 1px solid rgba(15, 23, 42, 0.12);
-  box-shadow: 0 0.25rem 0.75rem rgba(15, 23, 42, 0.12);
+  color: var(--p-slate-900);
+  border: 1px solid color-mix(in srgb, var(--p-slate-900) 12%, transparent);
+  box-shadow: 0 0.25rem 0.75rem
+    color-mix(in srgb, var(--p-slate-900) 12%, transparent);
 }
 
 .oauth-button-vertical-light:hover:not(:disabled) {
-  background: #eef2f7;
-  color: #0f172a;
-  box-shadow: 0 0.35rem 0.9rem rgba(15, 23, 42, 0.16);
+  background: var(--p-gray-150);
+  color: var(--p-slate-900);
+  box-shadow: 0 0.35rem 0.9rem
+    color-mix(in srgb, var(--p-slate-900) 16%, transparent);
 }
 
 .oauth-button-vertical:disabled {
@@ -345,7 +348,7 @@
 }
 
 .oauth-button-vertical:focus-visible {
-  outline: 3px solid rgba(59, 130, 246, 0.5);
+  outline: 3px solid color-mix(in srgb, var(--p-blue-500) 50%, transparent);
   outline-offset: 2px;
 }
 
@@ -430,8 +433,8 @@
 
 .oauth-button-vertical-outline .oauth-icon-wrapper,
 .oauth-button-vertical-light .oauth-icon-wrapper {
-  background: rgba(15, 23, 42, 0.06);
-  border-color: rgba(15, 23, 42, 0.14);
+  background: color-mix(in srgb, var(--p-slate-900) 6%, transparent);
+  border-color: color-mix(in srgb, var(--p-slate-900) 14%, transparent);
 }
 .oauth-button-right {
   display: flex;
@@ -631,18 +634,18 @@
 
 /* Email login button - red CTA style matching SaaS version */
 .auth-cta-button {
-  background-color: #af3434 !important;
+  background-color: var(--p-brand-red) !important;
   color: white !important;
   border: none !important;
   font-weight: 600 !important;
 }
 
 .auth-cta-button:hover:not(:disabled) {
-  background-color: #9a2e2e !important;
+  background-color: var(--p-brand-red-600) !important;
 }
 
 .auth-cta-button:disabled {
-  background-color: #af3434 !important;
+  background-color: var(--p-brand-red) !important;
   opacity: 0.6 !important;
 }
 
@@ -689,8 +692,8 @@
 }
 
 .auth-expandable-trigger--active {
-  border-color: #af3434 !important;
-  box-shadow: 0 0 0 3px rgba(175, 52, 52, 0.12);
+  border-color: var(--p-brand-red) !important;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-brand-red) 12%, transparent);
 }
 
 /* ── Animated expand/collapse via grid-template-rows ───────────────── */
diff --git a/frontend/editor/src/proprietary/components/chat/ChatPanel.css b/frontend/editor/src/proprietary/components/chat/ChatPanel.css
index cd2b733aaa..7abc0b34d1 100644
--- a/frontend/editor/src/proprietary/components/chat/ChatPanel.css
+++ b/frontend/editor/src/proprietary/components/chat/ChatPanel.css
@@ -325,7 +325,7 @@
   flex-shrink: 0;
   box-shadow:
     0 0 0 1px rgba(0, 0, 0, 0.04),
-    0 4px 14px rgba(15, 23, 42, 0.08);
+    0 4px 14px color-mix(in srgb, var(--p-slate-900) 8%, transparent);
   transition: box-shadow 160ms ease-out;
 }
 
diff --git a/frontend/editor/src/proprietary/components/policies/LabelsEditor.css b/frontend/editor/src/proprietary/components/policies/LabelsEditor.css
index d9c4de5542..b4ddcf2c81 100644
--- a/frontend/editor/src/proprietary/components/policies/LabelsEditor.css
+++ b/frontend/editor/src/proprietary/components/policies/LabelsEditor.css
@@ -173,7 +173,10 @@
 .labels-group-count {
   font-size: 0.75rem;
   font-weight: 500;
-  color: var(--c-text-subtle, rgba(128, 128, 128, 0.9));
+  color: var(
+    --c-text-subtle,
+    color-mix(in srgb, var(--p-gray-mid) 90%, transparent)
+  );
 }
 .labels-group-ungrouped {
   margin: 0;
diff --git a/frontend/editor/src/proprietary/routes/AuthCallback.module.css b/frontend/editor/src/proprietary/routes/AuthCallback.module.css
index 8ae947762c..810c3405ca 100644
--- a/frontend/editor/src/proprietary/routes/AuthCallback.module.css
+++ b/frontend/editor/src/proprietary/routes/AuthCallback.module.css
@@ -60,11 +60,11 @@
 
 .errorBox {
   margin-top: 20px;
-  background: #ffebee;
-  border: 1px solid #ffcdd2;
+  background: var(--p-vendor-red-bg);
+  border: 1px solid var(--p-vendor-red-border);
   border-radius: 8px;
   padding: 16px;
-  color: #c62828;
+  color: var(--p-vendor-red-text);
   font-size: 14px;
   line-height: 1.5;
   word-break: break-word;
@@ -73,23 +73,23 @@
 
 @media (prefers-color-scheme: dark) {
   .page {
-    background: #1a1a1a;
-    color: #e0e0e0;
+    background: var(--p-zinc-800);
+    color: var(--p-gray-200);
   }
 
   .card {
-    background: #2d2d2d;
+    background: var(--p-zinc-600);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
     color: var(--p-gray-200);
     border-color: var(--p-gray-700);
   }
 
   .iconSuccess {
-    color: #66bb6a;
+    color: var(--p-vendor-green);
   }
 
   .iconError {
-    color: #ef5350;
+    color: var(--p-vendor-red);
   }
 
   .iconNeutral {
@@ -102,13 +102,13 @@
 
   .message,
   .loadingExtra {
-    color: #b0b0b0;
+    color: var(--p-gray-b0);
   }
 
   .errorBox {
-    background: #3d2020;
-    border: 1px solid #5d3030;
-    color: #ef9a9a;
+    background: var(--p-vendor-red-bg-dark);
+    border: 1px solid var(--p-vendor-red-border-dark);
+    color: var(--p-vendor-red-soft);
   }
 }
 
diff --git a/frontend/editor/src/saas/components/shared/FileSidebarGroupControls.css b/frontend/editor/src/saas/components/shared/FileSidebarGroupControls.css
index a3a4c57d52..49d30c1863 100644
--- a/frontend/editor/src/saas/components/shared/FileSidebarGroupControls.css
+++ b/frontend/editor/src/saas/components/shared/FileSidebarGroupControls.css
@@ -39,7 +39,10 @@
 
 .fsg-chevron {
   font-size: 1.1rem !important;
-  color: var(--c-text-subtle, rgba(128, 128, 128, 0.9));
+  color: var(
+    --c-text-subtle,
+    color-mix(in srgb, var(--p-gray-mid) 90%, transparent)
+  );
   margin-left: -4px;
 }
 
@@ -56,7 +59,10 @@
 }
 
 .fsg-cat-name:hover {
-  background: var(--c-hover, rgba(128, 128, 128, 0.12));
+  background: var(
+    --c-hover,
+    color-mix(in srgb, var(--p-gray-mid) 12%, transparent)
+  );
 }
 
 .fsg-rename {
@@ -70,11 +76,17 @@
   padding: 2px;
   border-radius: 4px;
   cursor: pointer;
-  color: var(--c-text-subtle, rgba(128, 128, 128, 0.9));
+  color: var(
+    --c-text-subtle,
+    color-mix(in srgb, var(--p-gray-mid) 90%, transparent)
+  );
 }
 
 .fsg-cat-action:hover {
-  background: var(--c-hover, rgba(128, 128, 128, 0.12));
+  background: var(
+    --c-hover,
+    color-mix(in srgb, var(--p-gray-mid) 12%, transparent)
+  );
   color: var(--c-text, inherit);
 }
 
@@ -96,7 +108,10 @@
 .fsg-count {
   font-size: 11px;
   font-weight: 500;
-  color: var(--c-text-subtle, rgba(128, 128, 128, 0.9));
+  color: var(
+    --c-text-subtle,
+    color-mix(in srgb, var(--p-gray-mid) 90%, transparent)
+  );
 }
 
 .fsg-add,
@@ -108,7 +123,11 @@
 
 .fsg-new {
   padding-top: 4px;
-  border-top: 1px solid var(--c-border-subtle, rgba(128, 128, 128, 0.2));
+  border-top: 1px solid
+    var(
+      --c-border-subtle,
+      color-mix(in srgb, var(--p-gray-mid) 20%, transparent)
+    );
 }
 
 .fsg-add-input {
@@ -116,7 +135,11 @@
   min-width: 0;
   padding: 4px 8px;
   font-size: 12px;
-  border: 1px solid var(--c-border-subtle, rgba(128, 128, 128, 0.35));
+  border: 1px solid
+    var(
+      --c-border-subtle,
+      color-mix(in srgb, var(--p-gray-mid) 35%, transparent)
+    );
   border-radius: 6px;
   background: transparent;
   color: var(--c-text, inherit);
diff --git a/frontend/editor/src/saas/routes/authShared/saas-auth.css b/frontend/editor/src/saas/routes/authShared/saas-auth.css
index 7c2fb91a93..616208f449 100644
--- a/frontend/editor/src/saas/routes/authShared/saas-auth.css
+++ b/frontend/editor/src/saas/routes/authShared/saas-auth.css
@@ -42,7 +42,7 @@
 
 .auth-guest-button {
   background-color: #ffffff;
-  color: #af3434;
+  color: var(--p-brand-red);
   border: 2px solid currentColor;
 }
 
@@ -86,8 +86,8 @@
 }
 
 .auth-expandable-trigger--active {
-  border-color: #af3434 !important;
-  box-shadow: 0 0 0 3px rgba(175, 52, 52, 0.12);
+  border-color: var(--p-brand-red) !important;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-brand-red) 12%, transparent);
 }
 
 /* ── Animated expand/collapse via grid-template-rows ───────────────── */