diff --git a/ui/src/components/ProcessDiagram/CompoundNode.tsx b/ui/src/components/ProcessDiagram/CompoundNode.tsx
index 8e53702a..2e20f5d4 100644
--- a/ui/src/components/ProcessDiagram/CompoundNode.tsx
+++ b/ui/src/components/ProcessDiagram/CompoundNode.tsx
@@ -69,9 +69,7 @@ export function CompoundNode({
   // Gate state: filter rejected or idempotent duplicate → amber container
   const ownState = node.id ? executionOverlay?.get(node.id) : undefined;
   const isGated = ownState?.filterMatched === false || ownState?.duplicateMessage === true;
-  const GATE_COLOR = '#C6820E'; // --amber
-  const GATE_BG = '#FDF6E9';   // --amber-bg
-  const effectiveColor = isGated ? GATE_COLOR : color;
+  const effectiveColor = isGated ? 'var(--amber)' : color;
 
   // _TRY_BODY / _CB_MAIN: transparent wrapper — no header, no border, just layout
   if (node.type === '_TRY_BODY' || node.type === '_CB_MAIN') {
@@ -126,7 +124,7 @@ export function CompoundNode({
   }
 
   // Default compound rendering (DO_TRY, EIP_CHOICE, EIP_FILTER, EIP_IDEMPOTENT_CONSUMER, etc.)
-  const containerFill = isGated ? GATE_BG : 'white';
+  const containerFill = isGated ? 'var(--amber-bg)' : 'white';
   return (
     <g data-node-id={node.id} transform={`translate(${x}, ${y})`}>
       {/* Container body */}