Skip to content

Bookshelf design: tokens, typography, and navbar#407

Merged
realproject7 merged 1 commit intomainfrom
task/404-design-tokens-typography
Mar 21, 2026
Merged

Bookshelf design: tokens, typography, and navbar#407
realproject7 merged 1 commit intomainfrom
task/404-design-tokens-typography

Conversation

@realproject7
Copy link
Copy Markdown
Owner

Summary

  • Design tokens: Replace all dark terminal CSS vars with warm bookshelf palette (cream bg, white cards, deep brown text, warm gold accent, beige borders)
  • Typography: Swap Geist Mono for Montserrat (headings, 500/600) + Libre Caslon Text (body, 400) via Google Fonts
  • Navbar: Remove SVG logo — text-only "PlotLink" in Montserrat SemiBold. Remove > active link prefix. Replace [=]/[x] hamburger with SVG icon. Capitalize labels.
  • Footer: Remove $ terminal prefix, apply warm muted text

Files Changed

File Change
src/app/globals.css All design tokens replaced, heading/body font vars added
src/app/layout.tsx Geist Mono → Montserrat + Libre Caslon Text
src/components/NavBar.tsx Logo, terminal symbols, styling
src/components/Footer.tsx Terminal prefix removed

Not changed (per scope)

Test plan

  • Page loads with warm cream background, not dark
  • Headings render in Montserrat, body in Libre Caslon Text
  • Navbar shows text "PlotLink" (no SVG), no > on active links
  • Mobile hamburger shows SVG icon (not [=]/[x]), menu works
  • Footer has no $ prefix
  • npm run typecheck passes
  • npm run lint passes

Fixes #404

🤖 Generated with Claude Code

- globals.css: swap all design tokens to warm cream/beige/gold palette,
  add --bg-shelf and --shelf-shadow tokens, set heading/body font vars
- layout.tsx: replace Geist Mono with Montserrat (500/600) + Libre
  Caslon Text (400) via Google Fonts
- NavBar.tsx: remove SVG logo (text-only "PlotLink" in Montserrat
  SemiBold), remove > prefix on active links, replace [=]/[x] hamburger
  with SVG icon, capitalize nav labels
- Footer.tsx: remove $ terminal prefix, use warm muted text color

Fixes #404

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Copy link
Copy Markdown
Collaborator

@project7-interns project7-interns left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All ticket requirements met — tokens match spec exactly, fonts load correctly, terminal symbols removed, scope respected (no StoryCard/layout changes). Minor nit: logo link has both className="font-[var(--font-heading)]" and an inline style={{ fontFamily }} — the inline style wins so the className is redundant. Not blocking. LGTM.

Copy link
Copy Markdown
Collaborator

@project7-interns project7-interns left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verdict: APPROVE

Summary

The PR matches issue #404: it swaps the design tokens and typography, removes the terminal-specific navbar/footer elements, and keeps the change set within the intended scope.

Findings

  • No blocking findings.

Decision

Approve because the acceptance criteria are covered by the diff and the required lint/typecheck workflow is passing.

@realproject7 realproject7 merged commit 560e95e into main Mar 21, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Design] Sub-1: Design tokens, typography, and navbar

2 participants