diff --git a/web/src/index.css b/web/src/index.css
index a80af69..7c1f557 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -1,3 +1,5 @@
+@import '@bytelyst/design-tokens/generated/tokens.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -30,6 +32,29 @@
   --header: rgba(255, 255, 255, 0.88);
   --card-shadow: 0 24px 70px rgba(15, 23, 42, 0.10);
   --hero-gradient: linear-gradient(135deg, #eff6ff 0%, #ffffff 45%, #eefbf5 100%);
+  --bl-accent: var(--accent);
+  --bl-accent-muted: var(--accent-soft);
+  --bl-accent-foreground: var(--primary-foreground);
+  --bl-bg-canvas: var(--background);
+  --bl-bg-elevated: var(--card-elevated);
+  --bl-surface-card: var(--card);
+  --bl-surface-muted: var(--muted);
+  --bl-text-primary: var(--foreground);
+  --bl-text-secondary: var(--muted-foreground);
+  --bl-text-tertiary: color-mix(in oklab, var(--muted-foreground) 76%, var(--background));
+  --bl-border: var(--border);
+  --bl-success: var(--ml-success);
+  --bl-success-muted: color-mix(in oklab, var(--bl-success) 12%, var(--background));
+  --bl-warning: var(--ml-warning);
+  --bl-warning-muted: color-mix(in oklab, var(--bl-warning) 14%, var(--background));
+  --bl-danger: var(--destructive);
+  --bl-danger-muted: color-mix(in oklab, var(--bl-danger) 12%, var(--background));
+  --bl-info: var(--accent);
+  --bl-info-muted: var(--accent-soft);
+  --bl-focus-ring: var(--ring);
+  --bl-focus-ring-muted: var(--ring-soft);
+  --bl-radius-control: 0.5rem;
+  --bl-radius-surface: 0.75rem;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;