diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index 736bfc2..7e90799 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -1,61 +1,96 @@
 @import "tailwindcss";
 
-/* NoteLett design token aliases — map --nl-* to --ml-* from @bytelyst/design-tokens */
-:root,
-[data-theme="dark"] {
-  --nl-bg-canvas: var(--ml-bg-canvas);
-  --nl-bg-elevated: var(--ml-bg-elevated);
-  --nl-surface-card: var(--ml-surface-card);
-  --nl-surface-muted: var(--ml-surface-muted);
-  --nl-border-default: var(--ml-border-default);
-  --nl-border-strong: var(--ml-border-strong);
-  --nl-text-primary: var(--ml-text-primary);
-  --nl-text-secondary: var(--ml-text-secondary);
-  --nl-text-tertiary: var(--ml-text-tertiary);
-  --nl-accent-primary: var(--ml-accent-primary);
-  --nl-accent-secondary: var(--ml-accent-secondary);
-  --nl-success: var(--ml-success);
-  --nl-warning: var(--ml-warning);
-  --nl-danger: var(--ml-danger);
-  --nl-focus-ring: var(--ml-focus-ring);
-  --nl-overlay-scrim: var(--ml-overlay-scrim);
-  --nl-font-display: var(--ml-font-display);
-  --nl-font-body: var(--ml-font-body);
-  --nl-font-mono: var(--ml-font-mono);
-  --nl-fs-xs: var(--ml-fs-xs);
-  --nl-fs-sm: var(--ml-fs-sm);
-  --nl-fs-md: var(--ml-fs-md);
-  --nl-fs-lg: var(--ml-fs-lg);
-  --nl-fs-xl: var(--ml-fs-xl);
-  --nl-fs-2xl: var(--ml-fs-2xl);
-  --nl-fs-3xl: var(--ml-fs-3xl);
-  --nl-space-0: var(--ml-space-0);
-  --nl-space-1: var(--ml-space-1);
-  --nl-space-2: var(--ml-space-2);
-  --nl-space-3: var(--ml-space-3);
-  --nl-space-4: var(--ml-space-4);
-  --nl-space-5: var(--ml-space-5);
-  --nl-space-6: var(--ml-space-6);
-  --nl-space-7: var(--ml-space-7);
-  --nl-space-8: var(--ml-space-8);
-  --nl-space-10: var(--ml-space-10);
-  --nl-space-12: var(--ml-space-12);
-  --nl-space-16: var(--ml-space-16);
-  --nl-radius-xs: var(--ml-radius-xs);
-  --nl-radius-sm: var(--ml-radius-sm);
-  --nl-radius-md: var(--ml-radius-md);
-  --nl-radius-lg: var(--ml-radius-lg);
-  --nl-radius-xl: var(--ml-radius-xl);
-  --nl-radius-pill: var(--ml-radius-pill);
-  --nl-elevation-sm: var(--ml-elevation-sm);
-  --nl-elevation-md: var(--ml-elevation-md);
-  --nl-elevation-lg: var(--ml-elevation-lg);
-  --nl-motion-fast: var(--ml-motion-fast);
-  --nl-motion-base: var(--ml-motion-base);
-  --nl-motion-slow: var(--ml-motion-slow);
-  --nl-easing-standard: var(--ml-easing-standard);
+/* ============================================================
+   Design tokens — auto-generated from @bytelyst/design-tokens
+   Source: packages/design-tokens/generated/notelett.css
+   DO NOT EDIT — regenerate with: npx tsx packages/design-tokens/scripts/generate.ts
+   ============================================================ */
+
+: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-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);
+}
+
+/* === END design tokens === */
+
 * {
   box-sizing: border-box;
 }
@@ -166,3 +201,29 @@ button {
 *:focus:not(:focus-visible) {
   outline: none;
 }
+
+/* Screen-reader only utility */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* Respect OS dark/light preference */
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme="dark"]) {
+    --nl-bg-canvas: #F8FAFC;
+    --nl-bg-elevated: #FFFFFF;
+    --nl-surface-card: #FFFFFF;
+    --nl-surface-muted: #F1F5F9;
+    --nl-text-primary: #0F172A;
+    --nl-text-secondary: #475569;
+    --nl-text-tertiary: #94A3B8;
+  }
+}
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
index aaf7976..5200b9c 100644
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -1,9 +1,14 @@
 import type { Metadata, Viewport } from "next";
+import { Space_Grotesk, DM_Sans, IBM_Plex_Mono } from "next/font/google";
 import "@bytelyst/design-tokens/css";
 import "./globals.css";
 import { Providers } from "./providers";
 import { PRODUCT_NAME } from "@/lib/product-config";
 
+const spaceGrotesk = Space_Grotesk({ subsets: ["latin"], variable: "--font-display" });
+const dmSans = DM_Sans({ subsets: ["latin"], variable: "--font-body" });
+const ibmPlexMono = IBM_Plex_Mono({ weight: ["400", "500"], subsets: ["latin"], variable: "--font-mono" });
+
 export const metadata: Metadata = {
   title: PRODUCT_NAME,
   description:
@@ -23,7 +28,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" data-theme="dark">
-      <body>
+      <body className={`${spaceGrotesk.variable} ${dmSans.variable} ${ibmPlexMono.variable} antialiased`}>
         <Providers>{children}</Providers>
       </body>
     </html>