diff --git a/android/app/src/main/java/com/chronomind/app/ui/theme/ChronoMindTokens.generated.kt b/android/app/src/main/java/com/chronomind/app/ui/theme/ChronoMindTokens.generated.kt
new file mode 100644
index 0000000..09aafe1
--- /dev/null
+++ b/android/app/src/main/java/com/chronomind/app/ui/theme/ChronoMindTokens.generated.kt
@@ -0,0 +1,94 @@
+// Auto-generated from bytelyst.tokens.json — do not edit manually.
+// Product: chronomind
+// Regenerate: cd packages/design-tokens && tsx scripts/generate.ts
+package com.chronomind.app.theme
+
+object ChronoMindTokens {
+
+    // ── Semantic Colors (Dark Theme) ─────────────────────────────────
+    object Dark {
+        const val BG_CANVAS = 0xFF06070A
+        const val BG_ELEVATED = 0xFF0E1118
+        const val SURFACE_CARD = 0xFF121725
+        const val SURFACE_MUTED = 0xFF1A2335
+        const val TEXT_PRIMARY = 0xFFEFF4FF
+        const val TEXT_SECONDARY = 0xFFA5B1C7
+        const val TEXT_TERTIARY = 0xFF6C7C98
+        const val ACCENT_PRIMARY = 0xFF5A8CFF
+        const val ACCENT_SECONDARY = 0xFF2EE6D6
+        const val SUCCESS = 0xFF34D399
+        const val WARNING = 0xFFF59E0B
+        const val DANGER = 0xFFFF6E6E
+    }
+
+    // ── Semantic Colors (Light Theme) ────────────────────────────────
+    object Light {
+        const val BG_CANVAS = 0xFFF6F8FC
+        const val BG_ELEVATED = 0xFFEEF2FA
+        const val SURFACE_CARD = 0xFFFFFFFF
+        const val SURFACE_MUTED = 0xFFF3F5FA
+        const val TEXT_PRIMARY = 0xFF0E1320
+        const val TEXT_SECONDARY = 0xFF55637A
+        const val TEXT_TERTIARY = 0xFF6C7C98
+        const val ACCENT_PRIMARY = 0xFF5A8CFF
+        const val ACCENT_SECONDARY = 0xFF2EE6D6
+        const val SUCCESS = 0xFF13956A
+        const val WARNING = 0xFFB87504
+        const val DANGER = 0xFFD24242
+    }
+
+    // ── Chronomind Product Colors ───────────────────────────────
+    object Product {
+        const val URGENCY_CRITICAL = 0xFFFF6E6E
+        const val URGENCY_IMPORTANT = 0xFFFFD166
+        const val URGENCY_STANDARD = 0xFF5A8CFF
+        const val URGENCY_GENTLE = 0xFF34D399
+        const val URGENCY_PASSIVE = 0xFFA5B1C7
+        const val FOCUS_MODE = 0xFF7C6BFF
+        const val POMODORO_WORK = 0xFF34D399
+        const val POMODORO_BREAK = 0xFF5A8CFF
+        const val CASCADE_WARNING = 0xFFFF9F43
+        const val TIMER_COMPLETE = 0xFF34D399
+    }
+
+    // ── Spacing (8pt grid) ───────────────────────────────────────────
+    object Spacing {
+        const val X0 = 0
+        const val X1 = 4
+        const val X2 = 8
+        const val X3 = 12
+        const val X4 = 16
+        const val X5 = 20
+        const val X6 = 24
+        const val X7 = 28
+        const val X8 = 32
+        const val X10 = 40
+        const val X12 = 48
+        const val X16 = 64
+    }
+
+    // ── Radius ───────────────────────────────────────────────────────
+    object Radius {
+        const val XS = 8
+        const val SM = 12
+        const val MD = 16
+        const val LG = 20
+        const val XL = 24
+        const val PILL = 999
+    }
+
+    // ── Typography ───────────────────────────────────────────────────
+    object Typography {
+        const val FONT_DISPLAY = "Space Grotesk"
+        const val FONT_BODY = "DM Sans"
+        const val FONT_MONO = "IBM Plex Mono"
+    }
+
+    // ── Motion ───────────────────────────────────────────────────────
+    object Motion {
+        const val INSTANT = 70
+        const val FAST = 140
+        const val BASE = 220
+        const val SLOW = 320
+    }
+}
diff --git a/ios/ChronoMind/Shared/Theme/ChronoMindTheme.generated.swift b/ios/ChronoMind/Shared/Theme/ChronoMindTheme.generated.swift
new file mode 100644
index 0000000..8b4c085
--- /dev/null
+++ b/ios/ChronoMind/Shared/Theme/ChronoMindTheme.generated.swift
@@ -0,0 +1,95 @@
+// Auto-generated from bytelyst.tokens.json — do not edit manually.
+// Product: chronomind
+// Regenerate: cd packages/design-tokens && tsx scripts/generate.ts
+
+import SwiftUI
+
+enum CMColors {
+    // MARK: - Semantic (Dark Theme)
+    static let bgCanvas = Color(hex: 0x06070A)
+    static let bgElevated = Color(hex: 0x0E1118)
+    static let surfaceCard = Color(hex: 0x121725)
+    static let surfaceMuted = Color(hex: 0x1A2335)
+    static let textPrimary = Color(hex: 0xEFF4FF)
+    static let textSecondary = Color(hex: 0xA5B1C7)
+    static let textTertiary = Color(hex: 0x6C7C98)
+    static let accentPrimary = Color(hex: 0x5A8CFF)
+    static let accentSecondary = Color(hex: 0x2EE6D6)
+    static let success = Color(hex: 0x34D399)
+    static let warning = Color(hex: 0xF59E0B)
+    static let danger = Color(hex: 0xFF6E6E)
+
+    // MARK: - Chronomind Product Colors
+    static let urgencyCritical = Color(hex: 0xFF6E6E)
+    static let urgencyImportant = Color(hex: 0xFFD166)
+    static let urgencyStandard = Color(hex: 0x5A8CFF)
+    static let urgencyGentle = Color(hex: 0x34D399)
+    static let urgencyPassive = Color(hex: 0xA5B1C7)
+    static let focusMode = Color(hex: 0x7C6BFF)
+    static let pomodoroWork = Color(hex: 0x34D399)
+    static let pomodoroBreak = Color(hex: 0x5A8CFF)
+    static let cascadeWarning = Color(hex: 0xFF9F43)
+    static let timerComplete = Color(hex: 0x34D399)
+
+}
+
+enum CMColorsLight {
+    // MARK: - Semantic (Light Theme)
+    static let bgCanvas = Color(hex: 0xF6F8FC)
+    static let bgElevated = Color(hex: 0xEEF2FA)
+    static let surfaceCard = Color(hex: 0xFFFFFF)
+    static let surfaceMuted = Color(hex: 0xF3F5FA)
+    static let textPrimary = Color(hex: 0x0E1320)
+    static let textSecondary = Color(hex: 0x55637A)
+    static let textTertiary = Color(hex: 0x6C7C98)
+    static let accentPrimary = Color(hex: 0x5A8CFF)
+    static let accentSecondary = Color(hex: 0x2EE6D6)
+    static let success = Color(hex: 0x13956A)
+    static let warning = Color(hex: 0xB87504)
+    static let danger = Color(hex: 0xD24242)
+}
+
+enum CMSpacing {
+    static let x0:  CGFloat = 0
+    static let x1:  CGFloat = 4
+    static let x2:  CGFloat = 8
+    static let x3:  CGFloat = 12
+    static let x4:  CGFloat = 16
+    static let x5:  CGFloat = 20
+    static let x6:  CGFloat = 24
+    static let x7:  CGFloat = 28
+    static let x8:  CGFloat = 32
+    static let x10: CGFloat = 40
+    static let x12: CGFloat = 48
+    static let x16: CGFloat = 64
+}
+
+enum CMRadius {
+    static let xs: CGFloat = 8
+    static let sm: CGFloat = 12
+    static let md: CGFloat = 16
+    static let lg: CGFloat = 20
+    static let xl: CGFloat = 24
+    static let pill: CGFloat = 999
+}
+
+enum CMMotion {
+    static let instant: Double = 0.07
+    static let fast: Double = 0.14
+    static let base: Double = 0.22
+    static let slow: Double = 0.32
+}
+
+// MARK: - Color Hex Extension (import if not already defined)
+
+extension Color {
+    init(hex: UInt, alpha: Double = 1.0) {
+        self.init(
+            .sRGB,
+            red:   Double((hex >> 16) & 0xFF) / 255.0,
+            green: Double((hex >> 8)  & 0xFF) / 255.0,
+            blue:  Double(hex & 0xFF) / 255.0,
+            opacity: alpha
+        )
+    }
+}
diff --git a/web/src/components/CreateTimerModal.tsx b/web/src/components/CreateTimerModal.tsx
index 772a2da..45ac2af 100644
--- a/web/src/components/CreateTimerModal.tsx
+++ b/web/src/components/CreateTimerModal.tsx
@@ -228,6 +228,7 @@ export function CreateTimerModal({ isOpen, onClose }: CreateTimerModalProps) {
             onClick={onClose}
             className="p-1 rounded-lg transition-colors cursor-pointer"
             style={{ color: 'var(--cm-text-tertiary)' }}
+            aria-label="Close dialog"
           >
             <X size={20} />
           </button>
diff --git a/web/src/components/Dashboard.tsx b/web/src/components/Dashboard.tsx
index 017345f..55c3930 100644
--- a/web/src/components/Dashboard.tsx
+++ b/web/src/components/Dashboard.tsx
@@ -180,6 +180,7 @@ export function Dashboard() {
                 className="p-2 rounded-lg transition-colors"
                 style={{ color: 'var(--cm-text-tertiary)' }}
                 title="Routines"
+                aria-label="Routines"
               >
                 <ListChecks size={18} />
               </Link>
diff --git a/web/src/components/FeedbackButton.tsx b/web/src/components/FeedbackButton.tsx
index 660e63b..d659ac7 100644
--- a/web/src/components/FeedbackButton.tsx
+++ b/web/src/components/FeedbackButton.tsx
@@ -23,6 +23,7 @@ export function FeedbackButton() {
           color: 'var(--cm-white)',
         }}
         title="Send feedback"
+        aria-label="Send feedback"
       >
         <MessageSquare size={20} />
       </button>
@@ -45,6 +46,7 @@ export function FeedbackButton() {
           onClick={() => setIsOpen(false)}
           className="p-1 rounded cursor-pointer"
           style={{ color: 'var(--cm-text-tertiary)' }}
+          aria-label="Close feedback"
         >
           <X size={16} />
         </button>
diff --git a/web/src/components/RoutineEditor.tsx b/web/src/components/RoutineEditor.tsx
index 9f54af1..7864a14 100644
--- a/web/src/components/RoutineEditor.tsx
+++ b/web/src/components/RoutineEditor.tsx
@@ -99,7 +99,7 @@ export function RoutineEditor({
           <h2 className="text-lg font-semibold" style={{ color: 'var(--cm-text-primary)' }}>
             {initialName ? 'Edit Routine' : 'New Routine'}
           </h2>
-          <button onClick={onClose} className="p-1 rounded-lg cursor-pointer" style={{ color: 'var(--cm-text-tertiary)' }}>
+          <button onClick={onClose} className="p-1 rounded-lg cursor-pointer" style={{ color: 'var(--cm-text-tertiary)' }} aria-label="Close editor">
             <X size={20} />
           </button>
         </div>
@@ -238,6 +238,7 @@ export function RoutineEditor({
                       disabled={steps.length <= 1}
                       className="p-1 rounded cursor-pointer disabled:opacity-20"
                       style={{ color: 'var(--cm-danger)' }}
+                      aria-label="Remove step"
                     >
                       <Trash2 size={14} />
                     </button>
diff --git a/web/src/components/Toast.tsx b/web/src/components/Toast.tsx
index 3688904..269deb7 100644
--- a/web/src/components/Toast.tsx
+++ b/web/src/components/Toast.tsx
@@ -97,6 +97,7 @@ export function ToastContainer() {
               onClick={() => handleDismiss(toast.id)}
               className="flex-shrink-0 p-1 rounded cursor-pointer"
               style={{ color: 'var(--cm-text-tertiary)' }}
+              aria-label="Dismiss notification"
             >
               <X size={14} />
             </button>