feat(design-system): implement Lazy Scholar, Refined per DESIGN.md#10
Merged
Merged
Conversation
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) <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
Implements the Lazy Scholar, Refined design system defined in DESIGN.md — warm-dark reading room, dual-accent color language, hierarchical radius, serif display type, and a citation signature treatment.
What changed
Tokens (
apps/desktop/src/design-system/tokens.css) — major rewrite--color-accent, your action) + amber (--color-cite*, model's grounding) + slate (--color-uncertain*, low confidence)999pxthat collapsed inputs, cards, buttons into one family:--radius-xs6px ·--radius-input10px ·--radius-card14px ·--radius-textarea16px ·--radius-modal20px ·--radius-pill999px--radius-sm/md/lg/xlkept as aliases so nothing breaks during migration--font-serif(Instrument Serif),--font-sans(Plus Jakarta Sans),--font-mono(Geist Mono, tabular-nums for counts)--shadow-cite-glowfor amber citation hover;--shadow-glow(sage) retained for primary-action halo.cited/.cite-marker/.uncertainstyles, plusprefers-reduced-motionoverrideFonts & body
apps/desktop/index.html— Instrument Serif + Plus Jakarta Sans + Geist Mono via Bunny Fonts (privacy-friendly), with preconnectapps/desktop/src/index.css— body line-height 1.5 → 1.55Serif display applied
layout.css) — 28px sans-bold → 48px Instrument Serif italicchat.css) — 22px sans → 36px Instrument Serif italicdrag-overlay.css) — display-sm serif italicRadius migrations to semantic tokens
toast.css→--radius-cardcommand-palette.css,keyboard-shortcuts.css,zotero-import.css→--radius-modalsetup-wizard.css— code block →--radius-input, model card + dropzone →--radius-carddocuments.cssdrop-zone →--radius-carddrag-overlay.css→--radius-modalCitation highlighting (
DocumentPreview.css)#fbbf24→ amber--color-cite(#d9925a) with--color-cite-glow--radius-pillwith mono tabular-numsWhy
Per DESIGN.md decisions log: category baseline is all-grotesque; serif italic at display sizes signals "made for readers". Grounding needs a signal distinct from primary action so users see which parts of an answer are sourced vs. synthesized. Uniform pill radius erased container hierarchy — this restores it.
Test plan
prefers-reduced-motiondisables animations🤖 Generated with Claude Code