diff --git a/web/src/components/strategy/VisualRuleBuilder.tsx b/web/src/components/strategy/VisualRuleBuilder.tsx
index 57c235a..ad64bf3 100644
--- a/web/src/components/strategy/VisualRuleBuilder.tsx
+++ b/web/src/components/strategy/VisualRuleBuilder.tsx
@@ -99,7 +99,7 @@ function RuleCard({
     alignItems: 'center',
     gap: 10,
     marginBottom: 8,
-    boxShadow: isDragging ? '0 8px 24px rgba(0,0,0,0.12)' : undefined,
+    boxShadow: isDragging ? 'var(--card-shadow)' : undefined,
   };
 
   const sel: React.CSSProperties = {
@@ -117,18 +117,18 @@ function RuleCard({
       <div
         {...attributes}
         {...listeners}
-        style={{ cursor: 'grab', color: '#D1D5DB', flexShrink: 0, touchAction: 'none' }}
+        style={{ cursor: 'grab', color: 'var(--bl-text-faint)', flexShrink: 0, touchAction: 'none' }}
       >
         <GripVertical size={16} />
       </div>
 
       {/* Rule label */}
-      <span style={{ fontSize: 11, fontWeight: 700, color: '#9CA3AF', width: 22, flexShrink: 0 }}>
+      <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--bl-text-faint)', width: 22, flexShrink: 0 }}>
         #{index + 1}
       </span>
 
       {/* IF */}
-      <span style={{ fontSize: 12, fontWeight: 600, color: '#374151' }}>IF</span>
+      <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--bl-text-quiet)' }}>IF</span>
 
       {/* Indicator */}
       <Select
@@ -164,15 +164,15 @@ function RuleCard({
       />
 
       {/* THEN */}
-      <span style={{ fontSize: 12, fontWeight: 600, color: '#374151' }}>→</span>
+      <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--bl-text-quiet)' }}>→</span>
 
       {/* Action */}
       <Select value={rule.action} style={{
         ...sel,
-        color: rule.action === 'BUY' ? '#16A34A' : '#DC2626',
+        color: rule.action === 'BUY' ? 'var(--bl-success)' : 'var(--bl-danger)',
         fontWeight: 700,
-        background: rule.action === 'BUY' ? '#F0FDF4' : '#FEF2F2',
-        border: `1px solid ${rule.action === 'BUY' ? '#86EFAC' : '#FCA5A5'}`,
+        background: rule.action === 'BUY' ? 'var(--bl-success-muted)' : 'var(--bl-danger-muted)',
+        border: `1px solid ${rule.action === 'BUY' ? 'var(--bl-success)' : 'var(--bl-danger)'}`,
       }}
         controlSize="sm"
         variant="surface"
@@ -215,7 +215,7 @@ function RuleCard({
         onClick={() => onDelete(rule.id)}
         style={{
           marginLeft: 'auto', background: 'none', border: 'none',
-          cursor: 'pointer', color: '#D1D5DB', padding: 4, borderRadius: 6,
+          cursor: 'pointer', color: 'var(--bl-text-faint)', padding: 4, borderRadius: 6,
           display: 'flex', alignItems: 'center',
           flexShrink: 0,
         }}