diff --git a/web/src/App.css b/web/src/App.css
index 917608d..b08321e 100644
--- a/web/src/App.css
+++ b/web/src/App.css
@@ -154,11 +154,11 @@ body {
 }
 
 .mode-live {
-  color: #e67e22;
+  color: var(--bl-warning);
 }
 
 .mode-paper {
-  color: #3498db;
+  color: var(--bl-info);
 }
 
 .readiness-grid {
@@ -194,7 +194,7 @@ body {
 .ticker-count {
   font-size: 0.8rem;
   color: var(--text-dim);
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--bl-surface-muted);
   padding: 4px 10px;
   border-radius: 100px;
 }
@@ -206,8 +206,8 @@ body {
 }
 
 .ticker-item {
-  background: rgba(255, 255, 255, 0.02);
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  background: color-mix(in oklab, var(--text-main) 2%, transparent);
+  border: 1px solid var(--border);
   padding: 10px 12px;
   border-radius: 6px;
   display: flex;
@@ -217,8 +217,8 @@ body {
 }
 
 .ticker-item:hover {
-  background: rgba(255, 255, 255, 0.04);
-  border-color: rgba(255, 255, 255, 0.1);
+  background: var(--bl-surface-muted);
+  border-color: var(--border-strong);
   transform: translateY(-2px);
 }
 
@@ -262,7 +262,7 @@ body {
   padding: 30px;
   color: var(--text-dim);
   font-style: italic;
-  background: rgba(255, 255, 255, 0.02);
+  background: color-mix(in oklab, var(--text-main) 2%, transparent);
   border-radius: 8px;
   border: 1px dashed var(--border);
 }
@@ -321,7 +321,7 @@ body {
   justify-content: space-between;
   align-items: center;
   padding: 8px 12px;
-  background: rgba(255, 255, 255, 0.02);
+  background: color-mix(in oklab, var(--text-main) 2%, transparent);
   border-radius: 6px;
   font-size: 0.85rem;
 }
@@ -522,12 +522,12 @@ body {
 }
 
 .status-tag.active {
-  background: rgba(52, 152, 219, 0.2);
-  color: #3498db;
+  background: var(--bl-info-muted);
+  color: var(--bl-info);
 }
 
 .status-tag.pulse {
-  background: rgba(0, 255, 136, 0.2);
+  background: var(--bl-success-muted);
   color: var(--accent);
   animation: pulse-opac 2s infinite;
 }