diff --git a/webui/src/web-components/demo/sketch-timeline-viewport.demo.ts b/webui/src/web-components/demo/sketch-timeline-viewport.demo.ts
index cc4b519..e8d4a8f 100644
--- a/webui/src/web-components/demo/sketch-timeline-viewport.demo.ts
+++ b/webui/src/web-components/demo/sketch-timeline-viewport.demo.ts
@@ -21,8 +21,8 @@
     }
     .demo-header {
       padding: 20px;
-      border-bottom: 1px solid #eee;
-      background: #f8f9fa;
+      border-bottom: 1px solid var(--demo-border);
+      background: var(--demo-fixture-section-bg);
       border-radius: 8px 8px 0 0;
     }
     .demo-timeline {
@@ -31,8 +31,8 @@
     }
     .controls {
       padding: 10px 20px;
-      border-top: 1px solid #eee;
-      background: #f8f9fa;
+      border-top: 1px solid var(--demo-border);
+      background: var(--demo-fixture-section-bg);
       display: flex;
       gap: 10px;
       align-items: center;
@@ -50,7 +50,7 @@
     }
     .info {
       font-size: 12px;
-      color: #666;
+      color: var(--demo-secondary-text);
       margin-left: auto;
     }
   `,