docs: add DESIGN.md — Lazy Scholar, Refined design system#9
Merged
Merged
Conversation
Establishes the documented source of truth for Offline Notebook LM's design language, evolving the existing tokens.css direction without breaking it. Key additions: - Dual-accent system: sage (your action) + amber (citation/grounding) + slate (uncertainty) — three distinct signals, no overlap - Instrument Serif italic for display (welcome hero, document titles, empty states) — the editorial signature that sets this apart from every other RAG tool using a grotesque for everything - Hierarchical radius scale, retiring the blanket 999px pill for inputs, cards, and modals. Pill stays for buttons, tags, and status - Typographic citation pattern: cited sentences render with a thin amber left-rule + small mono '[N]' marker, instead of footnote chips - CLAUDE.md pointer so future visual/UI work reads DESIGN.md first Tokens file (apps/desktop/src/design-system/tokens.css) is untouched by this commit — the spec lands first, the code changes follow in a separate implementation pass. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Establishes DESIGN.md as the documented source of truth for Offline Notebook LM's visual language. Evolves the existing
apps/desktop/src/design-system/tokens.cssdirection ("Lazy Scholar") rather than starting over.Generated via the
/design-consultationskill after research across NotebookLM, Obsidian, Granola, Reflect, Mem, Raycast, Cursor, and Linear, plus an outside design-voice subagent.What changed
DESIGN.mdat repo root — full design system spec with rationale, decisions log, and implementation notesCLAUDE.md— appended a "Design System" section pointing future visual/UI work atDESIGN.mdand flagging off-palette code in QAThe three design risks this documents
Instrument Serif italic display face — used at 36–80px for welcome hero, document titles, and empty states. Every other RAG tool uses a grotesque for everything; we don't. This is the single biggest visual differentiator.
Dual-accent color system — sage
#7c9a82stays as primary action, new warm amber#d9925abecomes the citation/grounding color. A third semantic, dusty slate#6b7a8f, signals low-confidence retrievals. Rationale: users should see at a glance which parts of an answer are grounded vs synthesized.Hierarchical radius — retires the blanket
999pxpill for inputs, cards, and modals. Pills stay for buttons, tags, and status. Fixes a real visual problem where everything in the UI currently reads as the same shape family.What's NOT in this PR
tokens.cssis untouched. The spec lands first, the code changes follow in a separate implementation pass. Reviewers don't need to re-test the running app for this PR.Test plan
DESIGN.mdend-to-end for clarity and coherenceCLAUDE.md"Design System" section reads as expected/tmp/notebook-lm-design-preview-*.html) visually confirms the system — not checked in, regenerate with/design-consultationif neededFollow-ups (separate PRs)
apps/desktop/src/design-system/tokens.css(new amber + slate vars, hierarchical radius, display text scale)apps/desktop/index.html(Instrument Serif + Plus Jakarta Sans + Geist Mono via Bunny Fonts).citedcomponent in chat rendering so the typographic citation treatment actually ships🤖 Generated with Claude Code