diff --git a/packages/design-tokens/generated/actiontrail.css b/packages/design-tokens/generated/actiontrail.css
new file mode 100644
index 00000000..521beb54
--- /dev/null
+++ b/packages/design-tokens/generated/actiontrail.css
@@ -0,0 +1,97 @@
+/* Auto-generated actiontrail tokens from bytelyst.tokens.json — do not edit manually */
+
+:root {
+  --at-bg-canvas: #06070A;
+  --at-bg-elevated: #0E1118;
+  --at-surface-card: #121725;
+  --at-surface-muted: #1A2335;
+  --at-border-default: rgba(255,255,255,0.12);
+  --at-border-strong: rgba(255,255,255,0.22);
+  --at-text-primary: #EFF4FF;
+  --at-text-secondary: #A5B1C7;
+  --at-text-tertiary: #6C7C98;
+  --at-accent-primary: #5A8CFF;
+  --at-accent-secondary: #2EE6D6;
+  --at-success: #34D399;
+  --at-warning: #F59E0B;
+  --at-danger: #FF6E6E;
+  --at-focus-ring: rgba(90,140,255,0.45);
+  --at-overlay-scrim: rgba(5,8,18,0.72);
+
+  /* actiontrail product colors */
+  --at-bg: #07111F;
+  --at-surface: #0F1B2D;
+  --at-surface-elevated: #152338;
+  --at-border: #24344D;
+  --at-text: #EFF4FF;
+  --at-text-muted: #A8B4C8;
+  --at-primary: #5A8CFF;
+  --at-accent: #5AE68C;
+  --at-warning: #F59E0B;
+  --at-danger: #FF6E6E;
+  --at-risk-low: #5AE68C;
+  --at-risk-medium: #F59E0B;
+  --at-risk-high: #FF8C42;
+  --at-risk-critical: #FF6E6E;
+  --at-status-pending: #F59E0B;
+  --at-status-applied: #5AE68C;
+  --at-status-rejected: #FF6E6E;
+  --at-status-reverted: #A66BFF;
+
+  --at-font-display: "Space Grotesk", "SF Pro Display", sans-serif;
+  --at-font-body: "DM Sans", "SF Pro Text", sans-serif;
+  --at-font-mono: "IBM Plex Mono", "SF Mono", monospace;
+
+  --at-fs-xs: 12px;
+  --at-fs-sm: 14px;
+  --at-fs-md: 16px;
+  --at-fs-lg: 18px;
+  --at-fs-xl: 22px;
+  --at-fs-2xl: 28px;
+  --at-fs-3xl: 36px;
+
+  --at-space-0: 0;
+  --at-space-1: 4px;
+  --at-space-2: 8px;
+  --at-space-3: 12px;
+  --at-space-4: 16px;
+  --at-space-5: 20px;
+  --at-space-6: 24px;
+  --at-space-7: 28px;
+  --at-space-8: 32px;
+  --at-space-10: 40px;
+  --at-space-12: 48px;
+  --at-space-16: 64px;
+
+  --at-radius-xs: 8px;
+  --at-radius-sm: 12px;
+  --at-radius-md: 16px;
+  --at-radius-lg: 20px;
+  --at-radius-xl: 24px;
+  --at-radius-pill: 999px;
+
+  --at-elevation-sm: 0 4px 12px rgba(0,0,0,0.12);
+  --at-elevation-md: 0 12px 28px rgba(0,0,0,0.18);
+  --at-elevation-lg: 0 20px 48px rgba(0,0,0,0.24);
+
+  --at-motion-fast: 140ms;
+  --at-motion-base: 220ms;
+  --at-motion-slow: 320ms;
+  --at-easing-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
+}
+
+[data-theme="light"] {
+  --at-bg-canvas: #F6F8FC;
+  --at-bg-elevated: #EEF2FA;
+  --at-surface-card: #FFFFFF;
+  --at-surface-muted: #F3F5FA;
+  --at-border-default: rgba(14,19,32,0.12);
+  --at-border-strong: rgba(14,19,32,0.24);
+  --at-text-primary: #0E1320;
+  --at-text-secondary: #55637A;
+  --at-success: #13956A;
+  --at-warning: #B87504;
+  --at-danger: #D24242;
+  --at-focus-ring: rgba(90,140,255,0.35);
+  --at-overlay-scrim: rgba(10,13,23,0.5);
+}
diff --git a/packages/design-tokens/generated/chronomind.css b/packages/design-tokens/generated/chronomind.css
new file mode 100644
index 00000000..8e9d6426
--- /dev/null
+++ b/packages/design-tokens/generated/chronomind.css
@@ -0,0 +1,89 @@
+/* Auto-generated chronomind tokens from bytelyst.tokens.json — do not edit manually */
+
+:root {
+  --cm-bg-canvas: #06070A;
+  --cm-bg-elevated: #0E1118;
+  --cm-surface-card: #121725;
+  --cm-surface-muted: #1A2335;
+  --cm-border-default: rgba(255,255,255,0.12);
+  --cm-border-strong: rgba(255,255,255,0.22);
+  --cm-text-primary: #EFF4FF;
+  --cm-text-secondary: #A5B1C7;
+  --cm-text-tertiary: #6C7C98;
+  --cm-accent-primary: #5A8CFF;
+  --cm-accent-secondary: #2EE6D6;
+  --cm-success: #34D399;
+  --cm-warning: #F59E0B;
+  --cm-danger: #FF6E6E;
+  --cm-focus-ring: rgba(90,140,255,0.45);
+  --cm-overlay-scrim: rgba(5,8,18,0.72);
+
+  /* chronomind product colors */
+  --cm-urgency-critical: #FF6E6E;
+  --cm-urgency-important: #FFD166;
+  --cm-urgency-standard: #5A8CFF;
+  --cm-urgency-gentle: #34D399;
+  --cm-urgency-passive: #A5B1C7;
+  --cm-focus-mode: #7C6BFF;
+  --cm-pomodoro-work: #34D399;
+  --cm-pomodoro-break: #5A8CFF;
+  --cm-cascade-warning: #FF9F43;
+  --cm-timer-complete: #34D399;
+
+  --cm-font-display: "Space Grotesk", "SF Pro Display", sans-serif;
+  --cm-font-body: "DM Sans", "SF Pro Text", sans-serif;
+  --cm-font-mono: "IBM Plex Mono", "SF Mono", monospace;
+
+  --cm-fs-xs: 12px;
+  --cm-fs-sm: 14px;
+  --cm-fs-md: 16px;
+  --cm-fs-lg: 18px;
+  --cm-fs-xl: 22px;
+  --cm-fs-2xl: 28px;
+  --cm-fs-3xl: 36px;
+
+  --cm-space-0: 0;
+  --cm-space-1: 4px;
+  --cm-space-2: 8px;
+  --cm-space-3: 12px;
+  --cm-space-4: 16px;
+  --cm-space-5: 20px;
+  --cm-space-6: 24px;
+  --cm-space-7: 28px;
+  --cm-space-8: 32px;
+  --cm-space-10: 40px;
+  --cm-space-12: 48px;
+  --cm-space-16: 64px;
+
+  --cm-radius-xs: 8px;
+  --cm-radius-sm: 12px;
+  --cm-radius-md: 16px;
+  --cm-radius-lg: 20px;
+  --cm-radius-xl: 24px;
+  --cm-radius-pill: 999px;
+
+  --cm-elevation-sm: 0 4px 12px rgba(0,0,0,0.12);
+  --cm-elevation-md: 0 12px 28px rgba(0,0,0,0.18);
+  --cm-elevation-lg: 0 20px 48px rgba(0,0,0,0.24);
+
+  --cm-motion-fast: 140ms;
+  --cm-motion-base: 220ms;
+  --cm-motion-slow: 320ms;
+  --cm-easing-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
+}
+
+[data-theme="light"] {
+  --cm-bg-canvas: #F6F8FC;
+  --cm-bg-elevated: #EEF2FA;
+  --cm-surface-card: #FFFFFF;
+  --cm-surface-muted: #F3F5FA;
+  --cm-border-default: rgba(14,19,32,0.12);
+  --cm-border-strong: rgba(14,19,32,0.24);
+  --cm-text-primary: #0E1320;
+  --cm-text-secondary: #55637A;
+  --cm-success: #13956A;
+  --cm-warning: #B87504;
+  --cm-danger: #D24242;
+  --cm-focus-ring: rgba(90,140,255,0.35);
+  --cm-overlay-scrim: rgba(10,13,23,0.5);
+}
diff --git a/packages/design-tokens/generated/flowmonk.css b/packages/design-tokens/generated/flowmonk.css
new file mode 100644
index 00000000..16e264f1
--- /dev/null
+++ b/packages/design-tokens/generated/flowmonk.css
@@ -0,0 +1,99 @@
+/* Auto-generated flowmonk tokens from bytelyst.tokens.json — do not edit manually */
+
+:root {
+  --fm-bg-canvas: #06070A;
+  --fm-bg-elevated: #0E1118;
+  --fm-surface-card: #121725;
+  --fm-surface-muted: #1A2335;
+  --fm-border-default: rgba(255,255,255,0.12);
+  --fm-border-strong: rgba(255,255,255,0.22);
+  --fm-text-primary: #EFF4FF;
+  --fm-text-secondary: #A5B1C7;
+  --fm-text-tertiary: #6C7C98;
+  --fm-accent-primary: #5A8CFF;
+  --fm-accent-secondary: #2EE6D6;
+  --fm-success: #34D399;
+  --fm-warning: #F59E0B;
+  --fm-danger: #FF6E6E;
+  --fm-focus-ring: rgba(90,140,255,0.45);
+  --fm-overlay-scrim: rgba(5,8,18,0.72);
+
+  /* flowmonk product colors */
+  --fm-bg: #07111F;
+  --fm-surface: #0F1B2D;
+  --fm-surface-elevated: #152338;
+  --fm-border: #24344D;
+  --fm-text: #EFF4FF;
+  --fm-text-muted: #A8B4C8;
+  --fm-primary: #5A8CFF;
+  --fm-accent: #5AE68C;
+  --fm-warning: #F59E0B;
+  --fm-zonework: #5A8CFF;
+  --fm-zone-personal: #5AE68C;
+  --fm-zone-health: #FF6B6B;
+  --fm-zone-admin: #FECA57;
+  --fm-zone-learning: #A66BFF;
+  --fm-urgent-badge: #FF6E6E;
+  --fm-schedule-entry: #5A8CFF;
+  --fm-overflow-warning: #F59E0B;
+  --fm-recommendation-info: #5A8CFF;
+  --fm-recommendation-warning: #F59E0B;
+  --fm-recommendation-critical: #FF6E6E;
+
+  --fm-font-display: "Space Grotesk", "SF Pro Display", sans-serif;
+  --fm-font-body: "DM Sans", "SF Pro Text", sans-serif;
+  --fm-font-mono: "IBM Plex Mono", "SF Mono", monospace;
+
+  --fm-fs-xs: 12px;
+  --fm-fs-sm: 14px;
+  --fm-fs-md: 16px;
+  --fm-fs-lg: 18px;
+  --fm-fs-xl: 22px;
+  --fm-fs-2xl: 28px;
+  --fm-fs-3xl: 36px;
+
+  --fm-space-0: 0;
+  --fm-space-1: 4px;
+  --fm-space-2: 8px;
+  --fm-space-3: 12px;
+  --fm-space-4: 16px;
+  --fm-space-5: 20px;
+  --fm-space-6: 24px;
+  --fm-space-7: 28px;
+  --fm-space-8: 32px;
+  --fm-space-10: 40px;
+  --fm-space-12: 48px;
+  --fm-space-16: 64px;
+
+  --fm-radius-xs: 8px;
+  --fm-radius-sm: 12px;
+  --fm-radius-md: 16px;
+  --fm-radius-lg: 20px;
+  --fm-radius-xl: 24px;
+  --fm-radius-pill: 999px;
+
+  --fm-elevation-sm: 0 4px 12px rgba(0,0,0,0.12);
+  --fm-elevation-md: 0 12px 28px rgba(0,0,0,0.18);
+  --fm-elevation-lg: 0 20px 48px rgba(0,0,0,0.24);
+
+  --fm-motion-fast: 140ms;
+  --fm-motion-base: 220ms;
+  --fm-motion-slow: 320ms;
+  --fm-easing-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
+}
+
+[data-theme="light"] {
+  --fm-bg-canvas: #F6F8FC;
+  --fm-bg-elevated: #EEF2FA;
+  --fm-surface-card: #FFFFFF;
+  --fm-surface-muted: #F3F5FA;
+  --fm-border-default: rgba(14,19,32,0.12);
+  --fm-border-strong: rgba(14,19,32,0.24);
+  --fm-text-primary: #0E1320;
+  --fm-text-secondary: #55637A;
+  --fm-success: #13956A;
+  --fm-warning: #B87504;
+  --fm-danger: #D24242;
+  --fm-focus-ring: rgba(90,140,255,0.35);
+  --fm-overlay-scrim: rgba(10,13,23,0.5);
+}
diff --git a/packages/design-tokens/generated/jarvisjr.css b/packages/design-tokens/generated/jarvisjr.css
new file mode 100644
index 00000000..7fa5832b
--- /dev/null
+++ b/packages/design-tokens/generated/jarvisjr.css
@@ -0,0 +1,88 @@
+/* Auto-generated jarvisjr tokens from bytelyst.tokens.json — do not edit manually */
+
+:root {
+  --jj-bg-canvas: #06070A;
+  --jj-bg-elevated: #0E1118;
+  --jj-surface-card: #121725;
+  --jj-surface-muted: #1A2335;
+  --jj-border-default: rgba(255,255,255,0.12);
+  --jj-border-strong: rgba(255,255,255,0.22);
+  --jj-text-primary: #EFF4FF;
+  --jj-text-secondary: #A5B1C7;
+  --jj-text-tertiary: #6C7C98;
+  --jj-accent-primary: #5A8CFF;
+  --jj-accent-secondary: #2EE6D6;
+  --jj-success: #34D399;
+  --jj-warning: #F59E0B;
+  --jj-danger: #FF6E6E;
+  --jj-focus-ring: rgba(90,140,255,0.45);
+  --jj-overlay-scrim: rgba(5,8,18,0.72);
+
+  /* jarvisjr product colors */
+  --jj-accent-primary: #7C6BFF;
+  --jj-accent-secondary: #5AE6C8;
+  --jj-accent-voice: #FF6B8A;
+  --jj-agent-coach: #5A8CFF;
+  --jj-agent-lingua: #FFB74D;
+  --jj-agent-spark: #E040FB;
+  --jj-agent-mentor: #34D399;
+  --jj-agent-mirror: #2EE6D6;
+  --jj-agent-orator: #FF9F43;
+
+  --jj-font-display: "Space Grotesk", "SF Pro Display", sans-serif;
+  --jj-font-body: "DM Sans", "SF Pro Text", sans-serif;
+  --jj-font-mono: "IBM Plex Mono", "SF Mono", monospace;
+
+  --jj-fs-xs: 12px;
+  --jj-fs-sm: 14px;
+  --jj-fs-md: 16px;
+  --jj-fs-lg: 18px;
+  --jj-fs-xl: 22px;
+  --jj-fs-2xl: 28px;
+  --jj-fs-3xl: 36px;
+
+  --jj-space-0: 0;
+  --jj-space-1: 4px;
+  --jj-space-2: 8px;
+  --jj-space-3: 12px;
+  --jj-space-4: 16px;
+  --jj-space-5: 20px;
+  --jj-space-6: 24px;
+  --jj-space-7: 28px;
+  --jj-space-8: 32px;
+  --jj-space-10: 40px;
+  --jj-space-12: 48px;
+  --jj-space-16: 64px;
+
+  --jj-radius-xs: 8px;
+  --jj-radius-sm: 12px;
+  --jj-radius-md: 16px;
+  --jj-radius-lg: 20px;
+  --jj-radius-xl: 24px;
+  --jj-radius-pill: 999px;
+
+  --jj-elevation-sm: 0 4px 12px rgba(0,0,0,0.12);
+  --jj-elevation-md: 0 12px 28px rgba(0,0,0,0.18);
+  --jj-elevation-lg: 0 20px 48px rgba(0,0,0,0.24);
+
+  --jj-motion-fast: 140ms;
+  --jj-motion-base: 220ms;
+  --jj-motion-slow: 320ms;
+  --jj-easing-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
+}
+
+[data-theme="light"] {
+  --jj-bg-canvas: #F6F8FC;
+  --jj-bg-elevated: #EEF2FA;
+  --jj-surface-card: #FFFFFF;
+  --jj-surface-muted: #F3F5FA;
+  --jj-border-default: rgba(14,19,32,0.12);
+  --jj-border-strong: rgba(14,19,32,0.24);
+  --jj-text-primary: #0E1320;
+  --jj-text-secondary: #55637A;
+  --jj-success: #13956A;
+  --jj-warning: #B87504;
+  --jj-danger: #D24242;
+  --jj-focus-ring: rgba(90,140,255,0.35);
+  --jj-overlay-scrim: rgba(10,13,23,0.5);
+}
diff --git a/packages/design-tokens/generated/localllmlab.css b/packages/design-tokens/generated/localllmlab.css
new file mode 100644
index 00000000..2a621009
--- /dev/null
+++ b/packages/design-tokens/generated/localllmlab.css
@@ -0,0 +1,94 @@
+/* Auto-generated localllmlab tokens from bytelyst.tokens.json — do not edit manually */
+
+:root {
+  --llm-bg-canvas: #06070A;
+  --llm-bg-elevated: #0E1118;
+  --llm-surface-card: #121725;
+  --llm-surface-muted: #1A2335;
+  --llm-border-default: rgba(255,255,255,0.12);
+  --llm-border-strong: rgba(255,255,255,0.22);
+  --llm-text-primary: #EFF4FF;
+  --llm-text-secondary: #A5B1C7;
+  --llm-text-tertiary: #6C7C98;
+  --llm-accent-primary: #5A8CFF;
+  --llm-accent-secondary: #2EE6D6;
+  --llm-success: #34D399;
+  --llm-warning: #F59E0B;
+  --llm-danger: #FF6E6E;
+  --llm-focus-ring: rgba(90,140,255,0.45);
+  --llm-overlay-scrim: rgba(5,8,18,0.72);
+
+  /* localllmlab product colors */
+  --llm-bg-canvas: #06070A;
+  --llm-bg-elevated: #0E1118;
+  --llm-surface-card: #121725;
+  --llm-surface-muted: #1A2335;
+  --llm-border-subtle: #1E293B;
+  --llm-border-default: #2A3654;
+  --llm-text-primary: #EFF4FF;
+  --llm-text-secondary: #A5B1C7;
+  --llm-text-tertiary: #6C7C98;
+  --llm-accent-primary: #5A8CFF;
+  --llm-accent-secondary: #2EE6D6;
+  --llm-success: #34D399;
+  --llm-warning: #F59E0B;
+  --llm-danger: #FF6E6E;
+  --llm-purple: #A78BFA;
+
+  --llm-font-display: "Space Grotesk", "SF Pro Display", sans-serif;
+  --llm-font-body: "DM Sans", "SF Pro Text", sans-serif;
+  --llm-font-mono: "IBM Plex Mono", "SF Mono", monospace;
+
+  --llm-fs-xs: 12px;
+  --llm-fs-sm: 14px;
+  --llm-fs-md: 16px;
+  --llm-fs-lg: 18px;
+  --llm-fs-xl: 22px;
+  --llm-fs-2xl: 28px;
+  --llm-fs-3xl: 36px;
+
+  --llm-space-0: 0;
+  --llm-space-1: 4px;
+  --llm-space-2: 8px;
+  --llm-space-3: 12px;
+  --llm-space-4: 16px;
+  --llm-space-5: 20px;
+  --llm-space-6: 24px;
+  --llm-space-7: 28px;
+  --llm-space-8: 32px;
+  --llm-space-10: 40px;
+  --llm-space-12: 48px;
+  --llm-space-16: 64px;
+
+  --llm-radius-xs: 8px;
+  --llm-radius-sm: 12px;
+  --llm-radius-md: 16px;
+  --llm-radius-lg: 20px;
+  --llm-radius-xl: 24px;
+  --llm-radius-pill: 999px;
+
+  --llm-elevation-sm: 0 4px 12px rgba(0,0,0,0.12);
+  --llm-elevation-md: 0 12px 28px rgba(0,0,0,0.18);
+  --llm-elevation-lg: 0 20px 48px rgba(0,0,0,0.24);
+
+  --llm-motion-fast: 140ms;
+  --llm-motion-base: 220ms;
+  --llm-motion-slow: 320ms;
+  --llm-easing-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
+}
+
+[data-theme="light"] {
+  --llm-bg-canvas: #F6F8FC;
+  --llm-bg-elevated: #EEF2FA;
+  --llm-surface-card: #FFFFFF;
+  --llm-surface-muted: #F3F5FA;
+  --llm-border-default: rgba(14,19,32,0.12);
+  --llm-border-strong: rgba(14,19,32,0.24);
+  --llm-text-primary: #0E1320;
+  --llm-text-secondary: #55637A;
+  --llm-success: #13956A;
+  --llm-warning: #B87504;
+  --llm-danger: #D24242;
+  --llm-focus-ring: rgba(90,140,255,0.35);
+  --llm-overlay-scrim: rgba(10,13,23,0.5);
+}
diff --git a/packages/design-tokens/generated/localmemgpt.css b/packages/design-tokens/generated/localmemgpt.css
new file mode 100644
index 00000000..05beae54
--- /dev/null
+++ b/packages/design-tokens/generated/localmemgpt.css
@@ -0,0 +1,93 @@
+/* Auto-generated localmemgpt tokens from bytelyst.tokens.json — do not edit manually */
+
+:root {
+  --lmg-bg-canvas: #06070A;
+  --lmg-bg-elevated: #0E1118;
+  --lmg-surface-card: #121725;
+  --lmg-surface-muted: #1A2335;
+  --lmg-border-default: rgba(255,255,255,0.12);
+  --lmg-border-strong: rgba(255,255,255,0.22);
+  --lmg-text-primary: #EFF4FF;
+  --lmg-text-secondary: #A5B1C7;
+  --lmg-text-tertiary: #6C7C98;
+  --lmg-accent-primary: #5A8CFF;
+  --lmg-accent-secondary: #2EE6D6;
+  --lmg-success: #34D399;
+  --lmg-warning: #F59E0B;
+  --lmg-danger: #FF6E6E;
+  --lmg-focus-ring: rgba(90,140,255,0.45);
+  --lmg-overlay-scrim: rgba(5,8,18,0.72);
+
+  /* localmemgpt product colors */
+  --lmg-bg-primary: #0A0A0A;
+  --lmg-bg-secondary: #141414;
+  --lmg-bg-tertiary: #1E1E1E;
+  --lmg-bg-hover: #252525;
+  --lmg-bg-input: #1A1A1A;
+  --lmg-border: #2A2A2A;
+  --lmg-text-primary: #F0F0F0;
+  --lmg-text-secondary: #999999;
+  --lmg-text-muted: #666666;
+  --lmg-accent: #6366F1;
+  --lmg-accent-hover: #818CF8;
+  --lmg-success: #22C55E;
+  --lmg-warning: #F59E0B;
+  --lmg-error: #EF4444;
+
+  --lmg-font-display: "Space Grotesk", "SF Pro Display", sans-serif;
+  --lmg-font-body: "DM Sans", "SF Pro Text", sans-serif;
+  --lmg-font-mono: "IBM Plex Mono", "SF Mono", monospace;
+
+  --lmg-fs-xs: 12px;
+  --lmg-fs-sm: 14px;
+  --lmg-fs-md: 16px;
+  --lmg-fs-lg: 18px;
+  --lmg-fs-xl: 22px;
+  --lmg-fs-2xl: 28px;
+  --lmg-fs-3xl: 36px;
+
+  --lmg-space-0: 0;
+  --lmg-space-1: 4px;
+  --lmg-space-2: 8px;
+  --lmg-space-3: 12px;
+  --lmg-space-4: 16px;
+  --lmg-space-5: 20px;
+  --lmg-space-6: 24px;
+  --lmg-space-7: 28px;
+  --lmg-space-8: 32px;
+  --lmg-space-10: 40px;
+  --lmg-space-12: 48px;
+  --lmg-space-16: 64px;
+
+  --lmg-radius-xs: 8px;
+  --lmg-radius-sm: 12px;
+  --lmg-radius-md: 16px;
+  --lmg-radius-lg: 20px;
+  --lmg-radius-xl: 24px;
+  --lmg-radius-pill: 999px;
+
+  --lmg-elevation-sm: 0 4px 12px rgba(0,0,0,0.12);
+  --lmg-elevation-md: 0 12px 28px rgba(0,0,0,0.18);
+  --lmg-elevation-lg: 0 20px 48px rgba(0,0,0,0.24);
+
+  --lmg-motion-fast: 140ms;
+  --lmg-motion-base: 220ms;
+  --lmg-motion-slow: 320ms;
+  --lmg-easing-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
+}
+
+[data-theme="light"] {
+  --lmg-bg-canvas: #F6F8FC;
+  --lmg-bg-elevated: #EEF2FA;
+  --lmg-surface-card: #FFFFFF;
+  --lmg-surface-muted: #F3F5FA;
+  --lmg-border-default: rgba(14,19,32,0.12);
+  --lmg-border-strong: rgba(14,19,32,0.24);
+  --lmg-text-primary: #0E1320;
+  --lmg-text-secondary: #55637A;
+  --lmg-success: #13956A;
+  --lmg-warning: #B87504;
+  --lmg-danger: #D24242;
+  --lmg-focus-ring: rgba(90,140,255,0.35);
+  --lmg-overlay-scrim: rgba(10,13,23,0.5);
+}
diff --git a/packages/design-tokens/generated/lysnrai.css b/packages/design-tokens/generated/lysnrai.css
new file mode 100644
index 00000000..383be4a9
--- /dev/null
+++ b/packages/design-tokens/generated/lysnrai.css
@@ -0,0 +1,86 @@
+/* Auto-generated lysnrai tokens from bytelyst.tokens.json — do not edit manually */
+
+:root {
+  --lys-bg-canvas: #06070A;
+  --lys-bg-elevated: #0E1118;
+  --lys-surface-card: #121725;
+  --lys-surface-muted: #1A2335;
+  --lys-border-default: rgba(255,255,255,0.12);
+  --lys-border-strong: rgba(255,255,255,0.22);
+  --lys-text-primary: #EFF4FF;
+  --lys-text-secondary: #A5B1C7;
+  --lys-text-tertiary: #6C7C98;
+  --lys-accent-primary: #5A8CFF;
+  --lys-accent-secondary: #2EE6D6;
+  --lys-success: #34D399;
+  --lys-warning: #F59E0B;
+  --lys-danger: #FF6E6E;
+  --lys-focus-ring: rgba(90,140,255,0.45);
+  --lys-overlay-scrim: rgba(5,8,18,0.72);
+
+  /* lysnrai product colors */
+  --lys-recording-active: #FF6E6E;
+  --lys-recording-paused: #FFD166;
+  --lys-processing: #5A8CFF;
+  --lys-transcribed: #34D399;
+  --lys-dictation-mode: #7C6BFF;
+  --lys-command-mode: #2EE6D6;
+  --lys-hotkey-active: #FF6B8A;
+
+  --lys-font-display: "Space Grotesk", "SF Pro Display", sans-serif;
+  --lys-font-body: "DM Sans", "SF Pro Text", sans-serif;
+  --lys-font-mono: "IBM Plex Mono", "SF Mono", monospace;
+
+  --lys-fs-xs: 12px;
+  --lys-fs-sm: 14px;
+  --lys-fs-md: 16px;
+  --lys-fs-lg: 18px;
+  --lys-fs-xl: 22px;
+  --lys-fs-2xl: 28px;
+  --lys-fs-3xl: 36px;
+
+  --lys-space-0: 0;
+  --lys-space-1: 4px;
+  --lys-space-2: 8px;
+  --lys-space-3: 12px;
+  --lys-space-4: 16px;
+  --lys-space-5: 20px;
+  --lys-space-6: 24px;
+  --lys-space-7: 28px;
+  --lys-space-8: 32px;
+  --lys-space-10: 40px;
+  --lys-space-12: 48px;
+  --lys-space-16: 64px;
+
+  --lys-radius-xs: 8px;
+  --lys-radius-sm: 12px;
+  --lys-radius-md: 16px;
+  --lys-radius-lg: 20px;
+  --lys-radius-xl: 24px;
+  --lys-radius-pill: 999px;
+
+  --lys-elevation-sm: 0 4px 12px rgba(0,0,0,0.12);
+  --lys-elevation-md: 0 12px 28px rgba(0,0,0,0.18);
+  --lys-elevation-lg: 0 20px 48px rgba(0,0,0,0.24);
+
+  --lys-motion-fast: 140ms;
+  --lys-motion-base: 220ms;
+  --lys-motion-slow: 320ms;
+  --lys-easing-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
+}
+
+[data-theme="light"] {
+  --lys-bg-canvas: #F6F8FC;
+  --lys-bg-elevated: #EEF2FA;
+  --lys-surface-card: #FFFFFF;
+  --lys-surface-muted: #F3F5FA;
+  --lys-border-default: rgba(14,19,32,0.12);
+  --lys-border-strong: rgba(14,19,32,0.24);
+  --lys-text-primary: #0E1320;
+  --lys-text-secondary: #55637A;
+  --lys-success: #13956A;
+  --lys-warning: #B87504;
+  --lys-danger: #D24242;
+  --lys-focus-ring: rgba(90,140,255,0.35);
+  --lys-overlay-scrim: rgba(10,13,23,0.5);
+}
diff --git a/packages/design-tokens/generated/mindlyst.css b/packages/design-tokens/generated/mindlyst.css
new file mode 100644
index 00000000..327e6900
--- /dev/null
+++ b/packages/design-tokens/generated/mindlyst.css
@@ -0,0 +1,89 @@
+/* Auto-generated mindlyst tokens from bytelyst.tokens.json — do not edit manually */
+
+:root {
+  --ml-bg-canvas: #06070A;
+  --ml-bg-elevated: #0E1118;
+  --ml-surface-card: #121725;
+  --ml-surface-muted: #1A2335;
+  --ml-border-default: rgba(255,255,255,0.12);
+  --ml-border-strong: rgba(255,255,255,0.22);
+  --ml-text-primary: #EFF4FF;
+  --ml-text-secondary: #A5B1C7;
+  --ml-text-tertiary: #6C7C98;
+  --ml-accent-primary: #5A8CFF;
+  --ml-accent-secondary: #2EE6D6;
+  --ml-success: #34D399;
+  --ml-warning: #F59E0B;
+  --ml-danger: #FF6E6E;
+  --ml-focus-ring: rgba(90,140,255,0.45);
+  --ml-overlay-scrim: rgba(5,8,18,0.72);
+
+  /* mindlyst product colors */
+  --ml-work-from: #5A8CFF;
+  --ml-work-to: #2EE6D6;
+  --ml-home-from: #FF6E6E;
+  --ml-home-to: #FFD166;
+  --ml-money-from: #34D399;
+  --ml-money-to: #2EE6D6;
+  --ml-health-from: #2EE6D6;
+  --ml-health-to: #9FE870;
+  --ml-global-from: #7D8FB4;
+  --ml-global-to: #A5B1C7;
+
+  --ml-font-display: "Space Grotesk", "SF Pro Display", sans-serif;
+  --ml-font-body: "DM Sans", "SF Pro Text", sans-serif;
+  --ml-font-mono: "IBM Plex Mono", "SF Mono", monospace;
+
+  --ml-fs-xs: 12px;
+  --ml-fs-sm: 14px;
+  --ml-fs-md: 16px;
+  --ml-fs-lg: 18px;
+  --ml-fs-xl: 22px;
+  --ml-fs-2xl: 28px;
+  --ml-fs-3xl: 36px;
+
+  --ml-space-0: 0;
+  --ml-space-1: 4px;
+  --ml-space-2: 8px;
+  --ml-space-3: 12px;
+  --ml-space-4: 16px;
+  --ml-space-5: 20px;
+  --ml-space-6: 24px;
+  --ml-space-7: 28px;
+  --ml-space-8: 32px;
+  --ml-space-10: 40px;
+  --ml-space-12: 48px;
+  --ml-space-16: 64px;
+
+  --ml-radius-xs: 8px;
+  --ml-radius-sm: 12px;
+  --ml-radius-md: 16px;
+  --ml-radius-lg: 20px;
+  --ml-radius-xl: 24px;
+  --ml-radius-pill: 999px;
+
+  --ml-elevation-sm: 0 4px 12px rgba(0,0,0,0.12);
+  --ml-elevation-md: 0 12px 28px rgba(0,0,0,0.18);
+  --ml-elevation-lg: 0 20px 48px rgba(0,0,0,0.24);
+
+  --ml-motion-fast: 140ms;
+  --ml-motion-base: 220ms;
+  --ml-motion-slow: 320ms;
+  --ml-easing-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
+}
+
+[data-theme="light"] {
+  --ml-bg-canvas: #F6F8FC;
+  --ml-bg-elevated: #EEF2FA;
+  --ml-surface-card: #FFFFFF;
+  --ml-surface-muted: #F3F5FA;
+  --ml-border-default: rgba(14,19,32,0.12);
+  --ml-border-strong: rgba(14,19,32,0.24);
+  --ml-text-primary: #0E1320;
+  --ml-text-secondary: #55637A;
+  --ml-success: #13956A;
+  --ml-warning: #B87504;
+  --ml-danger: #D24242;
+  --ml-focus-ring: rgba(90,140,255,0.35);
+  --ml-overlay-scrim: rgba(10,13,23,0.5);
+}
diff --git a/packages/design-tokens/generated/nomgap.css b/packages/design-tokens/generated/nomgap.css
new file mode 100644
index 00000000..18294b66
--- /dev/null
+++ b/packages/design-tokens/generated/nomgap.css
@@ -0,0 +1,89 @@
+/* Auto-generated nomgap tokens from bytelyst.tokens.json — do not edit manually */
+
+:root {
+  --ng-bg-canvas: #06070A;
+  --ng-bg-elevated: #0E1118;
+  --ng-surface-card: #121725;
+  --ng-surface-muted: #1A2335;
+  --ng-border-default: rgba(255,255,255,0.12);
+  --ng-border-strong: rgba(255,255,255,0.22);
+  --ng-text-primary: #EFF4FF;
+  --ng-text-secondary: #A5B1C7;
+  --ng-text-tertiary: #6C7C98;
+  --ng-accent-primary: #5A8CFF;
+  --ng-accent-secondary: #2EE6D6;
+  --ng-success: #34D399;
+  --ng-warning: #F59E0B;
+  --ng-danger: #FF6E6E;
+  --ng-focus-ring: rgba(90,140,255,0.45);
+  --ng-overlay-scrim: rgba(5,8,18,0.72);
+
+  /* nomgap product colors */
+  --ng-stage-fed: #FF9F43;
+  --ng-stage-early-fast: #FECA57;
+  --ng-stage-fasted: #48DBFB;
+  --ng-stage-ketosis: #5A8CFF;
+  --ng-stage-deep-autophagy: #A66BFF;
+  --ng-stage-extended: #FFD700;
+  --ng-autophagy-meter: #5AE68C;
+  --ng-hydration-reminder: #48DBFB;
+  --ng-electrolyte-alert: #FF9F43;
+  --ng-safety-warning: #FF6E6E;
+
+  --ng-font-display: "Space Grotesk", "SF Pro Display", sans-serif;
+  --ng-font-body: "DM Sans", "SF Pro Text", sans-serif;
+  --ng-font-mono: "IBM Plex Mono", "SF Mono", monospace;
+
+  --ng-fs-xs: 12px;
+  --ng-fs-sm: 14px;
+  --ng-fs-md: 16px;
+  --ng-fs-lg: 18px;
+  --ng-fs-xl: 22px;
+  --ng-fs-2xl: 28px;
+  --ng-fs-3xl: 36px;
+
+  --ng-space-0: 0;
+  --ng-space-1: 4px;
+  --ng-space-2: 8px;
+  --ng-space-3: 12px;
+  --ng-space-4: 16px;
+  --ng-space-5: 20px;
+  --ng-space-6: 24px;
+  --ng-space-7: 28px;
+  --ng-space-8: 32px;
+  --ng-space-10: 40px;
+  --ng-space-12: 48px;
+  --ng-space-16: 64px;
+
+  --ng-radius-xs: 8px;
+  --ng-radius-sm: 12px;
+  --ng-radius-md: 16px;
+  --ng-radius-lg: 20px;
+  --ng-radius-xl: 24px;
+  --ng-radius-pill: 999px;
+
+  --ng-elevation-sm: 0 4px 12px rgba(0,0,0,0.12);
+  --ng-elevation-md: 0 12px 28px rgba(0,0,0,0.18);
+  --ng-elevation-lg: 0 20px 48px rgba(0,0,0,0.24);
+
+  --ng-motion-fast: 140ms;
+  --ng-motion-base: 220ms;
+  --ng-motion-slow: 320ms;
+  --ng-easing-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
+}
+
+[data-theme="light"] {
+  --ng-bg-canvas: #F6F8FC;
+  --ng-bg-elevated: #EEF2FA;
+  --ng-surface-card: #FFFFFF;
+  --ng-surface-muted: #F3F5FA;
+  --ng-border-default: rgba(14,19,32,0.12);
+  --ng-border-strong: rgba(14,19,32,0.24);
+  --ng-text-primary: #0E1320;
+  --ng-text-secondary: #55637A;
+  --ng-success: #13956A;
+  --ng-warning: #B87504;
+  --ng-danger: #D24242;
+  --ng-focus-ring: rgba(90,140,255,0.35);
+  --ng-overlay-scrim: rgba(10,13,23,0.5);
+}
diff --git a/packages/design-tokens/generated/notelett.css b/packages/design-tokens/generated/notelett.css
new file mode 100644
index 00000000..c81806f7
--- /dev/null
+++ b/packages/design-tokens/generated/notelett.css
@@ -0,0 +1,94 @@
+/* Auto-generated notelett tokens from bytelyst.tokens.json — do not edit manually */
+
+:root {
+  --nl-bg-canvas: #06070A;
+  --nl-bg-elevated: #0E1118;
+  --nl-surface-card: #121725;
+  --nl-surface-muted: #1A2335;
+  --nl-border-default: rgba(255,255,255,0.12);
+  --nl-border-strong: rgba(255,255,255,0.22);
+  --nl-text-primary: #EFF4FF;
+  --nl-text-secondary: #A5B1C7;
+  --nl-text-tertiary: #6C7C98;
+  --nl-accent-primary: #5A8CFF;
+  --nl-accent-secondary: #2EE6D6;
+  --nl-success: #34D399;
+  --nl-warning: #F59E0B;
+  --nl-danger: #FF6E6E;
+  --nl-focus-ring: rgba(90,140,255,0.45);
+  --nl-overlay-scrim: rgba(5,8,18,0.72);
+
+  /* notelett product colors */
+  --nl-bg-canvas: #06070A;
+  --nl-bg-elevated: #0E1118;
+  --nl-surface-card: #121725;
+  --nl-surface-muted: #1A2335;
+  --nl-accent-primary: #5A8CFF;
+  --nl-accent-secondary: #2EE6D6;
+  --nl-success: #34D399;
+  --nl-warning: #F59E0B;
+  --nl-danger: #FF6E6E;
+  --nl-focus-ring: #5A8CFF;
+  --nl-agent-action: #A66BFF;
+  --nl-draft-note: #FFD166;
+  --nl-linked-note: #2EE6D6;
+  --nl-task-pending: #F59E0B;
+  --nl-task-complete: #34D399;
+
+  --nl-font-display: "Space Grotesk", "SF Pro Display", sans-serif;
+  --nl-font-body: "DM Sans", "SF Pro Text", sans-serif;
+  --nl-font-mono: "IBM Plex Mono", "SF Mono", monospace;
+
+  --nl-fs-xs: 12px;
+  --nl-fs-sm: 14px;
+  --nl-fs-md: 16px;
+  --nl-fs-lg: 18px;
+  --nl-fs-xl: 22px;
+  --nl-fs-2xl: 28px;
+  --nl-fs-3xl: 36px;
+
+  --nl-space-0: 0;
+  --nl-space-1: 4px;
+  --nl-space-2: 8px;
+  --nl-space-3: 12px;
+  --nl-space-4: 16px;
+  --nl-space-5: 20px;
+  --nl-space-6: 24px;
+  --nl-space-7: 28px;
+  --nl-space-8: 32px;
+  --nl-space-10: 40px;
+  --nl-space-12: 48px;
+  --nl-space-16: 64px;
+
+  --nl-radius-xs: 8px;
+  --nl-radius-sm: 12px;
+  --nl-radius-md: 16px;
+  --nl-radius-lg: 20px;
+  --nl-radius-xl: 24px;
+  --nl-radius-pill: 999px;
+
+  --nl-elevation-sm: 0 4px 12px rgba(0,0,0,0.12);
+  --nl-elevation-md: 0 12px 28px rgba(0,0,0,0.18);
+  --nl-elevation-lg: 0 20px 48px rgba(0,0,0,0.24);
+
+  --nl-motion-fast: 140ms;
+  --nl-motion-base: 220ms;
+  --nl-motion-slow: 320ms;
+  --nl-easing-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
+}
+
+[data-theme="light"] {
+  --nl-bg-canvas: #F6F8FC;
+  --nl-bg-elevated: #EEF2FA;
+  --nl-surface-card: #FFFFFF;
+  --nl-surface-muted: #F3F5FA;
+  --nl-border-default: rgba(14,19,32,0.12);
+  --nl-border-strong: rgba(14,19,32,0.24);
+  --nl-text-primary: #0E1320;
+  --nl-text-secondary: #55637A;
+  --nl-success: #13956A;
+  --nl-warning: #B87504;
+  --nl-danger: #D24242;
+  --nl-focus-ring: rgba(90,140,255,0.35);
+  --nl-overlay-scrim: rgba(10,13,23,0.5);
+}
diff --git a/packages/design-tokens/generated/peakpulse.css b/packages/design-tokens/generated/peakpulse.css
new file mode 100644
index 00000000..24cf13a9
--- /dev/null
+++ b/packages/design-tokens/generated/peakpulse.css
@@ -0,0 +1,89 @@
+/* Auto-generated peakpulse tokens from bytelyst.tokens.json — do not edit manually */
+
+:root {
+  --pp-bg-canvas: #06070A;
+  --pp-bg-elevated: #0E1118;
+  --pp-surface-card: #121725;
+  --pp-surface-muted: #1A2335;
+  --pp-border-default: rgba(255,255,255,0.12);
+  --pp-border-strong: rgba(255,255,255,0.22);
+  --pp-text-primary: #EFF4FF;
+  --pp-text-secondary: #A5B1C7;
+  --pp-text-tertiary: #6C7C98;
+  --pp-accent-primary: #5A8CFF;
+  --pp-accent-secondary: #2EE6D6;
+  --pp-success: #34D399;
+  --pp-warning: #F59E0B;
+  --pp-danger: #FF6E6E;
+  --pp-focus-ring: rgba(90,140,255,0.45);
+  --pp-overlay-scrim: rgba(5,8,18,0.72);
+
+  /* peakpulse product colors */
+  --pp-activity-hike: #34D399;
+  --pp-activity-ski: #5A8CFF;
+  --pp-speed-zone-slow: #34D399;
+  --pp-speed-zone-fast: #FFD166;
+  --pp-speed-zone-danger: #FF6E6E;
+  --pp-elevation-gain: #2EE6D6;
+  --pp-elevation-loss: #FF9F43;
+  --pp-personal-best: #FFD700;
+  --pp-streak-active: #34D399;
+  --pp-streak-broken: #FF6E6E;
+
+  --pp-font-display: "Space Grotesk", "SF Pro Display", sans-serif;
+  --pp-font-body: "DM Sans", "SF Pro Text", sans-serif;
+  --pp-font-mono: "IBM Plex Mono", "SF Mono", monospace;
+
+  --pp-fs-xs: 12px;
+  --pp-fs-sm: 14px;
+  --pp-fs-md: 16px;
+  --pp-fs-lg: 18px;
+  --pp-fs-xl: 22px;
+  --pp-fs-2xl: 28px;
+  --pp-fs-3xl: 36px;
+
+  --pp-space-0: 0;
+  --pp-space-1: 4px;
+  --pp-space-2: 8px;
+  --pp-space-3: 12px;
+  --pp-space-4: 16px;
+  --pp-space-5: 20px;
+  --pp-space-6: 24px;
+  --pp-space-7: 28px;
+  --pp-space-8: 32px;
+  --pp-space-10: 40px;
+  --pp-space-12: 48px;
+  --pp-space-16: 64px;
+
+  --pp-radius-xs: 8px;
+  --pp-radius-sm: 12px;
+  --pp-radius-md: 16px;
+  --pp-radius-lg: 20px;
+  --pp-radius-xl: 24px;
+  --pp-radius-pill: 999px;
+
+  --pp-elevation-sm: 0 4px 12px rgba(0,0,0,0.12);
+  --pp-elevation-md: 0 12px 28px rgba(0,0,0,0.18);
+  --pp-elevation-lg: 0 20px 48px rgba(0,0,0,0.24);
+
+  --pp-motion-fast: 140ms;
+  --pp-motion-base: 220ms;
+  --pp-motion-slow: 320ms;
+  --pp-easing-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
+}
+
+[data-theme="light"] {
+  --pp-bg-canvas: #F6F8FC;
+  --pp-bg-elevated: #EEF2FA;
+  --pp-surface-card: #FFFFFF;
+  --pp-surface-muted: #F3F5FA;
+  --pp-border-default: rgba(14,19,32,0.12);
+  --pp-border-strong: rgba(14,19,32,0.24);
+  --pp-text-primary: #0E1320;
+  --pp-text-secondary: #55637A;
+  --pp-success: #13956A;
+  --pp-warning: #B87504;
+  --pp-danger: #D24242;
+  --pp-focus-ring: rgba(90,140,255,0.35);
+  --pp-overlay-scrim: rgba(10,13,23,0.5);
+}
diff --git a/packages/design-tokens/scripts/generate.ts b/packages/design-tokens/scripts/generate.ts
index bb0a9b7d..6614cd25 100644
--- a/packages/design-tokens/scripts/generate.ts
+++ b/packages/design-tokens/scripts/generate.ts
@@ -25,6 +25,21 @@ mkdirSync(outDir, { recursive: true });
 
 const tokens = JSON.parse(readFileSync(tokensPath, 'utf-8'));
 
+// ── Product CSS mapping ─────────────────────────────────────────────
+const PRODUCT_CSS_MAP: Record<string, { prefix: string; colorsKey: string }> = {
+  mindlyst: { prefix: 'ml', colorsKey: 'brain' },
+  chronomind: { prefix: 'cm', colorsKey: 'chronomind' },
+  jarvisjr: { prefix: 'jj', colorsKey: 'jarvisjr' },
+  nomgap: { prefix: 'ng', colorsKey: 'nomgap' },
+  actiontrail: { prefix: 'at', colorsKey: 'actiontrail' },
+  flowmonk: { prefix: 'fm', colorsKey: 'flowmonk' },
+  notelett: { prefix: 'nl', colorsKey: 'notelett' },
+  localmemgpt: { prefix: 'lmg', colorsKey: 'localmemgpt' },
+  localllmlab: { prefix: 'llm', colorsKey: 'localllmlab' },
+  lysnrai: { prefix: 'lys', colorsKey: 'lysnrai' },
+  peakpulse: { prefix: 'pp', colorsKey: 'peakpulse' },
+};
+
 // ── Helpers ──────────────────────────────────────────────────────────
 
 function camelToKebab(str: string): string {
@@ -340,10 +355,102 @@ function generateSwift(): string {
   return lines.join('\n');
 }
 
+// ── 5. Per-product CSS ──────────────────────────────────────────────
+function generateProductCSS(productId: string, prefix: string, colorsKey: string): string {
+  const productColors = tokens.color[colorsKey];
+  if (!productColors) return `/* No palette found for ${productId} (color.${colorsKey}) */\n`;
+
+  const lines: string[] = [
+    `/* Auto-generated ${productId} tokens from bytelyst.tokens.json — do not edit manually */`,
+    '',
+    ':root {',
+  ];
+
+  // Semantic colors (dark as default) — shared across all products
+  for (const [key, value] of Object.entries(tokens.color.semantic.dark)) {
+    lines.push(`  --${prefix}-${camelToKebab(key)}: ${value};`);
+  }
+  lines.push('');
+
+  // Product-specific colors
+  lines.push(`  /* ${productId} product colors */`);
+  for (const [key, value] of Object.entries(productColors)) {
+    if (typeof value === 'string') {
+      lines.push(`  --${prefix}-${camelToKebab(key)}: ${value};`);
+    } else if (typeof value === 'object' && value !== null && 'from' in value) {
+      lines.push(`  --${prefix}-${camelToKebab(key)}-from: ${(value as { from: string }).from};`);
+      lines.push(`  --${prefix}-${camelToKebab(key)}-to: ${(value as { to: string }).to};`);
+    }
+  }
+  lines.push('');
+
+  // Typography
+  for (const [key, value] of Object.entries(tokens.typography.fontFamily)) {
+    const cssVal = typeof value === 'string' ? value.replace(/'/g, '"') : value;
+    lines.push(`  --${prefix}-font-${key}: ${cssVal};`);
+  }
+  lines.push('');
+
+  // Font sizes
+  for (const [key, value] of Object.entries(tokens.typography.fontSize)) {
+    lines.push(`  --${prefix}-fs-${key}: ${value}px;`);
+  }
+  lines.push('');
+
+  // Spacing
+  for (const [key, value] of Object.entries(tokens.spacing)) {
+    lines.push(`  --${prefix}-space-${key}: ${value === 0 ? '0' : `${value}px`};`);
+  }
+  lines.push('');
+
+  // Radius
+  for (const [key, value] of Object.entries(tokens.radius)) {
+    lines.push(`  --${prefix}-radius-${key}: ${value}px;`);
+  }
+  lines.push('');
+
+  // Elevation
+  for (const [key, value] of Object.entries(tokens.elevation)) {
+    if (key === 'none') continue;
+    lines.push(`  --${prefix}-elevation-${key}: ${value};`);
+  }
+  lines.push('');
+
+  // Motion
+  for (const [key, value] of Object.entries(tokens.motion.duration)) {
+    if (key === 'instant') continue;
+    lines.push(`  --${prefix}-motion-${key}: ${value}ms;`);
+  }
+  lines.push(`  --${prefix}-easing-standard: ${tokens.motion.easing.standard};`);
+
+  lines.push('}', '');
+
+  // Light theme overrides
+  lines.push('[data-theme="light"] {');
+  for (const [key, value] of Object.entries(tokens.color.semantic.light)) {
+    const darkVal = (tokens.color.semantic.dark as Record<string, unknown>)[key];
+    if (value !== darkVal) {
+      lines.push(`  --${prefix}-${camelToKebab(key)}: ${value};`);
+    }
+  }
+  lines.push('}', '');
+
+  return lines.join('\n');
+}
+
 // ── Write all ────────────────────────────────────────────────────────
+// Shared semantic tokens (backward compatible)
 writeFileSync(resolve(outDir, 'tokens.css'), generateCSS());
 writeFileSync(resolve(outDir, 'tokens.ts'), generateTS());
 writeFileSync(resolve(outDir, 'MindLystTokens.kt'), generateKotlin());
 writeFileSync(resolve(outDir, 'MindLystTheme.swift'), generateSwift());
 
-console.log('Generated 4 token files in generated/');
+// Per-product CSS
+for (const [productId, config] of Object.entries(PRODUCT_CSS_MAP)) {
+  const css = generateProductCSS(productId, config.prefix, config.colorsKey);
+  writeFileSync(resolve(outDir, `${productId}.css`), css);
+}
+
+console.log(
+  `Generated 4 shared + ${Object.keys(PRODUCT_CSS_MAP).length} product token files in generated/`
+);