From 908e608558c6d60fd9eea012b6057817a3933c6f Mon Sep 17 00:00:00 2001 From: Vikranth Reddimasu Date: Fri, 17 Apr 2026 18:16:08 -0400 Subject: [PATCH] feat(design-system): implement Lazy Scholar, Refined per DESIGN.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Token overhaul in apps/desktop/src/design-system/tokens.css: - Dual-accent color language: sage (action), amber cite (grounding), slate (uncertainty) - Hierarchical radius — xs/input/card/textarea/modal/pill — replacing the blanket 999px that collapsed inputs, cards, buttons into one family. Legacy sm/md/lg/xl aliased so nothing breaks during migration. - Type scale aligned to spec (11/13/15/16/18/22/28) plus serif display sizes (36/48/64/80) for hero and empty states. - Instrument Serif display face, Plus Jakarta Sans body, Geist Mono data. - shadow-cite-glow for amber citation hover, kept shadow-glow (sage) for primary-action halo. - Global .cited / .cite-marker / .uncertain primitives plus prefers-reduced-motion fallback. Fonts loaded via Bunny (privacy-friendly) with preconnect in index.html; body line-height bumped to 1.55. Serif italic applied to welcome hero, chat empty state, drag-drop overlay. Modals (command palette, keyboard shortcuts, zotero, toast, drop zones) migrated to semantic radius tokens. Citation highlight in DocumentPreview switched from warning yellow to amber cite color with glow + mono badge. Co-Authored-By: Claude Opus 4.7 (1M context) --- apps/desktop/index.html | 6 +- apps/desktop/src/DocumentPreview.css | 18 +- apps/desktop/src/components/chat/chat.css | 20 ++- .../src/components/documents/documents.css | 2 +- apps/desktop/src/components/layout/layout.css | 24 +-- .../src/components/ui/command-palette.css | 2 +- .../src/components/ui/drag-overlay.css | 9 +- .../src/components/ui/keyboard-shortcuts.css | 7 +- .../src/components/ui/setup-wizard.css | 8 +- apps/desktop/src/components/ui/toast.css | 2 +- .../src/components/ui/zotero-import.css | 2 +- apps/desktop/src/design-system/tokens.css | 166 +++++++++++++----- apps/desktop/src/index.css | 2 +- 13 files changed, 185 insertions(+), 83 deletions(-) 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);