diff --git a/apps/desktop/index.html b/apps/desktop/index.html
index e5bf702..107925a 100644
--- a/apps/desktop/index.html
+++ b/apps/desktop/index.html
@@ -4,7 +4,11 @@
-
+
+
Notebook LM
diff --git a/apps/desktop/src/DocumentPreview.css b/apps/desktop/src/DocumentPreview.css
index de178a1..58a73b7 100644
--- a/apps/desktop/src/DocumentPreview.css
+++ b/apps/desktop/src/DocumentPreview.css
@@ -217,21 +217,25 @@
background: white;
}
-/* PDF text highlight */
+/* PDF text highlight — citation grounding, uses amber cite color */
.pdf-highlight {
- background: rgba(251, 191, 36, 0.35);
+ background: rgba(217, 146, 90, 0.32);
border-radius: 2px;
padding: 1px 0;
+ box-shadow: 0 0 12px var(--color-cite-glow);
}
.preview-highlight-badge {
- font-size: 12px;
- color: #fbbf24;
+ font-family: var(--font-mono);
+ font-size: 11px;
+ font-variant-numeric: tabular-nums;
+ letter-spacing: 0.02em;
+ color: var(--color-cite);
font-weight: 500;
padding: 3px 10px;
- background: rgba(251, 191, 36, 0.1);
- border: 1px solid rgba(251, 191, 36, 0.2);
- border-radius: 12px;
+ background: var(--color-cite-subtle);
+ border: 1px solid rgba(217, 146, 90, 0.22);
+ border-radius: var(--radius-pill);
white-space: nowrap;
}
diff --git a/apps/desktop/src/components/chat/chat.css b/apps/desktop/src/components/chat/chat.css
index 59b3c44..2640dfe 100644
--- a/apps/desktop/src/components/chat/chat.css
+++ b/apps/desktop/src/components/chat/chat.css
@@ -106,20 +106,24 @@
flex-direction: column;
justify-content: center;
color: var(--color-text-muted);
- gap: var(--space-2);
- padding: var(--space-12) var(--space-8);
+ gap: var(--space-3);
+ padding: var(--space-16) var(--space-8);
}
.chat-empty p:first-child {
- font-size: var(--text-xl);
- font-weight: 500;
- color: var(--color-text-secondary);
- letter-spacing: -0.02em;
+ font-family: var(--font-serif);
+ font-style: italic;
+ font-size: var(--text-display-sm);
+ font-weight: 400;
+ color: var(--color-text-primary);
+ letter-spacing: -0.015em;
+ line-height: 1.1;
+ margin: 0;
}
.chat-empty-hint {
- font-size: var(--text-sm);
- color: var(--color-text-muted);
+ font-size: var(--text-md);
+ color: var(--color-text-secondary);
}
/* ---- Input area ---- */
diff --git a/apps/desktop/src/components/documents/documents.css b/apps/desktop/src/components/documents/documents.css
index 60eeb51..c8b77ab 100644
--- a/apps/desktop/src/components/documents/documents.css
+++ b/apps/desktop/src/components/documents/documents.css
@@ -63,7 +63,7 @@
margin: var(--space-3) var(--space-3);
padding: var(--space-5);
border: 1px dashed var(--color-border);
- border-radius: var(--radius-md);
+ border-radius: var(--radius-card);
text-align: center;
color: var(--color-text-muted);
font-size: var(--text-sm);
diff --git a/apps/desktop/src/components/layout/layout.css b/apps/desktop/src/components/layout/layout.css
index 5b7a1f5..db7cfbf 100644
--- a/apps/desktop/src/components/layout/layout.css
+++ b/apps/desktop/src/components/layout/layout.css
@@ -527,23 +527,27 @@
flex-direction: column;
align-items: center;
text-align: center;
- max-width: 400px;
- padding: var(--space-8);
+ max-width: 520px;
+ padding: var(--space-10) var(--space-8);
}
.welcome-title {
- font-size: var(--text-2xl);
- font-weight: 700;
+ font-family: var(--font-serif);
+ font-style: italic;
+ font-size: var(--text-display-md);
+ font-weight: 400;
color: var(--color-text-primary);
- margin: 0 0 var(--space-2);
- letter-spacing: -0.03em;
+ margin: 0 0 var(--space-4);
+ letter-spacing: -0.02em;
+ line-height: 1.05;
}
.welcome-subtitle {
- font-size: var(--text-lg);
- color: var(--color-text-muted);
- margin: 0 0 var(--space-6);
- line-height: 1.5;
+ font-size: var(--text-md);
+ color: var(--color-text-secondary);
+ margin: 0 0 var(--space-8);
+ line-height: 1.55;
+ max-width: 38ch;
}
.welcome-browse-btn {
diff --git a/apps/desktop/src/components/ui/command-palette.css b/apps/desktop/src/components/ui/command-palette.css
index 9e3b28d..874a1f4 100644
--- a/apps/desktop/src/components/ui/command-palette.css
+++ b/apps/desktop/src/components/ui/command-palette.css
@@ -14,7 +14,7 @@
max-width: 90vw;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
- border-radius: var(--radius-lg);
+ border-radius: var(--radius-modal);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
diff --git a/apps/desktop/src/components/ui/drag-overlay.css b/apps/desktop/src/components/ui/drag-overlay.css
index d50c806..98f08d4 100644
--- a/apps/desktop/src/components/ui/drag-overlay.css
+++ b/apps/desktop/src/components/ui/drag-overlay.css
@@ -22,7 +22,7 @@
gap: var(--space-4);
padding: var(--space-12);
border: 2px dashed rgba(124, 154, 130, 0.4);
- border-radius: var(--radius-xl);
+ border-radius: var(--radius-modal);
}
.drag-overlay-icon {
@@ -33,8 +33,11 @@
}
.drag-overlay-text {
- font-size: var(--text-lg);
+ font-family: var(--font-serif);
+ font-style: italic;
+ font-size: var(--text-display-sm);
color: var(--color-text-secondary);
margin: 0;
- font-weight: 500;
+ font-weight: 400;
+ letter-spacing: -0.01em;
}
diff --git a/apps/desktop/src/components/ui/keyboard-shortcuts.css b/apps/desktop/src/components/ui/keyboard-shortcuts.css
index ec3df7b..290a1d7 100644
--- a/apps/desktop/src/components/ui/keyboard-shortcuts.css
+++ b/apps/desktop/src/components/ui/keyboard-shortcuts.css
@@ -14,7 +14,7 @@
padding: var(--space-6);
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
- border-radius: var(--radius-lg);
+ border-radius: var(--radius-modal);
box-shadow: var(--shadow-lg);
}
@@ -39,12 +39,13 @@
}
.shortcuts-keys {
- font-family: 'SF Mono', 'Fira Code', monospace;
+ font-family: var(--font-mono);
font-size: 12px;
+ font-variant-numeric: tabular-nums;
padding: 3px 8px;
background: var(--color-bg-primary);
border: 1px solid var(--color-border);
- border-radius: var(--radius-sm);
+ border-radius: var(--radius-xs);
color: var(--color-text-secondary);
}
diff --git a/apps/desktop/src/components/ui/setup-wizard.css b/apps/desktop/src/components/ui/setup-wizard.css
index 88a509f..3d22186 100644
--- a/apps/desktop/src/components/ui/setup-wizard.css
+++ b/apps/desktop/src/components/ui/setup-wizard.css
@@ -114,8 +114,8 @@
padding: var(--space-2) var(--space-4);
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
- border-radius: var(--radius-md);
- font-family: 'SF Mono', 'Fira Code', monospace;
+ border-radius: var(--radius-input);
+ font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-text-primary);
user-select: all;
@@ -152,7 +152,7 @@
padding: var(--space-3) var(--space-4);
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
- border-radius: var(--radius-md);
+ border-radius: var(--radius-card);
cursor: pointer;
transition: border-color 120ms ease, background 120ms ease;
font-family: var(--font-sans);
@@ -189,7 +189,7 @@
justify-content: center;
gap: var(--space-2);
border: 2px dashed var(--color-border);
- border-radius: var(--radius-lg);
+ border-radius: var(--radius-card);
cursor: pointer;
font-size: var(--text-sm);
color: var(--color-text-secondary);
diff --git a/apps/desktop/src/components/ui/toast.css b/apps/desktop/src/components/ui/toast.css
index 21f2f7d..ecc27b3 100644
--- a/apps/desktop/src/components/ui/toast.css
+++ b/apps/desktop/src/components/ui/toast.css
@@ -12,7 +12,7 @@
.toast {
padding: 12px 24px;
- border-radius: var(--radius-lg);
+ border-radius: var(--radius-card);
font-size: var(--text-sm);
font-weight: 450;
color: var(--color-text-primary);
diff --git a/apps/desktop/src/components/ui/zotero-import.css b/apps/desktop/src/components/ui/zotero-import.css
index b47eece..5b293ed 100644
--- a/apps/desktop/src/components/ui/zotero-import.css
+++ b/apps/desktop/src/components/ui/zotero-import.css
@@ -15,7 +15,7 @@
padding: var(--space-6);
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
- border-radius: var(--radius-lg);
+ border-radius: var(--radius-modal);
box-shadow: var(--shadow-lg);
display: flex;
flex-direction: column;
diff --git a/apps/desktop/src/design-system/tokens.css b/apps/desktop/src/design-system/tokens.css
index f18ad67..15183e3 100644
--- a/apps/desktop/src/design-system/tokens.css
+++ b/apps/desktop/src/design-system/tokens.css
@@ -1,14 +1,17 @@
:root {
/*
- * "Lazy Scholar" — warm stone blacks with sage accent.
- * Calm, generous, readable. The tool disappears, the content is everything.
+ * Lazy Scholar, Refined — warm-dark reading room.
+ * Dual-accent: sage (your action) + amber (citation / grounding) + slate (uncertainty).
+ * Source of truth: DESIGN.md. Keep this file in sync.
*/
- /* Backgrounds — warm stone tones, not cold gray */
- --color-bg-primary: #0c0a09;
- --color-bg-secondary: #161412;
- --color-bg-surface: #1c1917;
- --color-bg-elevated: #262220;
+ /* ===== Color ===== */
+
+ /* Backgrounds — warm stone, not cold gray */
+ --color-bg-primary: #0c0a09; /* warm ink */
+ --color-bg-secondary: #161412; /* sidebar, source panel */
+ --color-bg-surface: #1c1917; /* cards */
+ --color-bg-elevated: #262220; /* hovered cards, modals */
--color-bg-hover: rgba(245, 240, 234, 0.04);
--color-bg-active: rgba(245, 240, 234, 0.07);
@@ -18,40 +21,54 @@
--color-border-hover: rgba(245, 240, 234, 0.14);
/* Text — warm off-whites, never pure white */
- --color-text-primary: #f5f0ea;
+ --color-text-primary: #f5f0ea; /* aged vellum */
--color-text-secondary: #a8a29e;
--color-text-muted: #57534e;
- /* Accent — cool sage */
+ /* Primary — your action (sage) */
--color-accent: #7c9a82;
--color-accent-hover: #6a8a70;
--color-accent-subtle: rgba(124, 154, 130, 0.10);
--color-accent-glow: rgba(124, 154, 130, 0.15);
- /* Status */
+ /* Citation — grounding (warm amber) */
+ --color-cite: #d9925a;
+ --color-cite-hover: #c67f49;
+ --color-cite-subtle: rgba(217, 146, 90, 0.10);
+ --color-cite-glow: rgba(217, 146, 90, 0.22);
+
+ /* Uncertainty — low-confidence (dusty slate) */
+ --color-uncertain: #6b7a8f;
+ --color-uncertain-subtle: rgba(107, 122, 143, 0.10);
+
+ /* Semantic */
--color-success: #4ade80;
--color-error: #fb7185;
--color-warning: #fbbf24;
- /* Shadows — warm black base */
+ /* ===== Shadows — warm black base ===== */
--shadow-sm: 0 1px 2px rgba(10, 8, 6, 0.5);
--shadow-md: 0 4px 16px rgba(10, 8, 6, 0.45);
--shadow-lg: 0 12px 40px rgba(10, 8, 6, 0.55);
--shadow-inset: inset 0 1px 0 rgba(245, 240, 234, 0.03);
- --shadow-glow: 0 0 24px rgba(124, 154, 130, 0.12);
-
- /* Radius — Soft Pill system */
- --radius-xs: 6px;
- --radius-sm: 999px;
- --radius-md: 999px;
- --radius-lg: 999px;
- --radius-xl: 20px;
- --radius-card: 14px;
- --radius-input: 999px;
- --radius-textarea: 20px;
- --radius-modal: 20px;
-
- /* Spacing (4px base) */
+ --shadow-glow: 0 0 24px rgba(124, 154, 130, 0.12); /* sage — primary action */
+ --shadow-cite-glow: 0 0 24px rgba(217, 146, 90, 0.14); /* amber — citation hover only */
+
+ /* ===== Radius — hierarchical. Pill for action + identity; step-down for containers. ===== */
+ --radius-xs: 6px; /* context menu items, tiny chips */
+ --radius-input: 10px; /* text inputs, search fields */
+ --radius-card: 14px; /* source cards, message bubbles */
+ --radius-textarea: 16px; /* composer, multi-line inputs */
+ --radius-modal: 20px; /* modals, command palette, preview dialogs */
+ --radius-pill: 999px; /* buttons, tags, status pills, sidebar items */
+
+ /* Legacy aliases — old tokens mapped to the new hierarchy. Migrate callsites over time. */
+ --radius-sm: var(--radius-pill); /* was blanket 999px; buttons & chips are pill */
+ --radius-md: var(--radius-pill);
+ --radius-lg: var(--radius-modal); /* was 999px; overlays/panels are modal */
+ --radius-xl: var(--radius-modal);
+
+ /* ===== Spacing (4px base) ===== */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
@@ -61,25 +78,38 @@
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
+ --space-16: 64px;
+ --space-20: 80px;
+ --space-24: 96px;
- /* Typography — system San Francisco on macOS */
+ /* ===== Typography ===== */
+ --font-serif: 'Instrument Serif', ui-serif, Georgia, serif;
--font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
- --font-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', monospace;
- --text-xs: 12px;
- --text-sm: 14px;
- --text-base: 16px;
- --text-lg: 18px;
- --text-xl: 24px;
- --text-2xl: 32px;
-
- /* Transitions */
- --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
- --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
- --duration-fast: 120ms;
- --duration-normal: 200ms;
- --duration-slow: 350ms;
-
- /* Layout */
+ --font-mono: 'Geist Mono', 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
+
+ /* Body / UI scale */
+ --text-xs: 11px; /* metadata, micro-caps, timestamps */
+ --text-sm: 13px; /* UI labels, chips, source card names */
+ --text-base: 15px; /* body, chat messages */
+ --text-md: 16px; /* welcome subtitle, prominent body */
+ --text-lg: 18px; /* section titles in dense UI */
+ --text-xl: 22px; /* card titles */
+ --text-2xl: 28px; /* reserved */
+
+ /* Display scale — serif, italic by convention */
+ --text-display-sm: 36px; /* document titles, section headers */
+ --text-display-md: 48px; /* empty states */
+ --text-display-lg: 64px; /* hero */
+ --text-display-xl: 80px; /* welcome marquee */
+
+ /* ===== Motion ===== */
+ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* enter, hover */
+ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* move */
+ --duration-fast: 120ms; /* hover, focus */
+ --duration-normal: 200ms; /* state change, card lift */
+ --duration-slow: 350ms; /* entrance, relevance bar fill */
+
+ /* ===== Layout ===== */
--sidebar-width: 240px;
--source-panel-width: 280px;
--titlebar-height: 52px;
@@ -123,3 +153,55 @@
*::-webkit-scrollbar-thumb:hover {
background-color: rgba(168, 162, 158, 0.22);
}
+
+/* ===== Citation pattern — the signature treatment =====
+ When the assistant returns a grounded sentence, wrap it in …[1].
+ Left amber rule = "this came from a source". Hover = subtle amber halo.
+ Non-cited prose uses normal paragraph styling — the visual split is instant and typographic.
+*/
+
+.cited {
+ display: block;
+ padding: 4px 0 4px 16px;
+ border-left: 2px solid var(--color-cite);
+ margin: var(--space-2) 0;
+ border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
+ transition: background var(--duration-normal) var(--ease-out),
+ box-shadow var(--duration-normal) var(--ease-out);
+}
+
+.cited:hover {
+ background: var(--color-cite-subtle);
+ box-shadow: var(--shadow-cite-glow);
+}
+
+.cite-marker {
+ color: var(--color-cite);
+ font-family: var(--font-mono);
+ font-size: 0.7em;
+ font-variant-numeric: tabular-nums;
+ vertical-align: super;
+ margin-left: 4px;
+ letter-spacing: 0.04em;
+}
+
+/* Uncertainty banner — when retrieval confidence is low */
+.uncertain {
+ color: var(--color-uncertain);
+ background: var(--color-uncertain-subtle);
+ border-left: 2px solid var(--color-uncertain);
+ padding: var(--space-2) var(--space-4);
+ border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
+}
+
+/* ===== Reduced motion ===== */
+@media (prefers-reduced-motion: reduce) {
+ *,
+ *::before,
+ *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ scroll-behavior: auto !important;
+ }
+}
diff --git a/apps/desktop/src/index.css b/apps/desktop/src/index.css
index 2ff957d..b7d7986 100644
--- a/apps/desktop/src/index.css
+++ b/apps/desktop/src/index.css
@@ -10,7 +10,7 @@ body {
min-height: 100vh;
font-family: var(--font-sans);
font-size: var(--text-base);
- line-height: 1.5;
+ line-height: 1.55;
font-weight: 400;
color: var(--color-text-primary);
background-color: var(--color-bg-primary);