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

[realproject7]

Parent Ticket

Part 1 of 3 for #403 (Book Shelf Design Trial)

Reference Design

T1 will upload reference images below.

Reference	Image
Color system	(upload here)
Typography	(upload here)
Navbar	(upload here)

Scope

Foundation layer: swap the design system from dark terminal to warm bookshelf light mode.

1. Design Tokens (src/app/globals.css)

Replace all current CSS custom properties:

Token	Current (dark terminal)	New (bookshelf)
--bg	#0a0a0a	#E8DFD0 (warm cream)
--bg-surface	#111111	#FFFFFF (white cards)
--text / --foreground	#e0e0e0	#2C1810 (deep brown)
--text-muted	#737373	#8B7355 (warm muted brown)
--accent	#00ff88 (neon green)	#DAAA63 (warm gold)
--accent-dim	#00cc6a	#C4944F (darker gold)
--border	#2a2a2a	#D4C5B0 (warm light border)
--error	#ff4444	#CC3333 (slightly warmer red)

Add new tokens as needed:

• --shelf-shadow: for bookshelf depth effect
• --bg-shelf: shelf surface color (slightly darker than --bg)

2. Typography (src/app/layout.tsx)

• Remove Geist Mono import
• Add Montserrat (Google Fonts) — weights: 500 (Medium), 600 (SemiBold)
• Add Libre Caslon Text (Google Fonts) — weight: 400 (Regular)
• Set --font-heading: Montserrat and --font-body: 'Libre Caslon Text'
• Update globals.css to apply: headings use Montserrat, body text uses Libre Caslon Text
• Remove all font-mono references from Tailwind classes across components

3. Navbar (src/components/NavBar.tsx)

• Remove the PlotLink SVG logo and "PlotLink" text from top-left — replace with just the text "PlotLink" in Montserrat SemiBold (no logo graphic)
• Remove terminal aesthetic elements: > prefix on active links, [=]/[x] hamburger symbols
• Restyle nav with warm palette: cream background, gold accent for active states
• Keep all navigation links and functionality intact
• Maintain mobile hamburger menu behavior (just restyle the toggle)

4. Footer (src/components/Footer.tsx)

• Remove terminal elements: $ prefix, monospace styling
• Apply warm palette, use Montserrat for headings

Files to Change

File	Change
src/app/globals.css	Replace all design tokens
src/app/layout.tsx	Swap fonts (Geist Mono → Montserrat + Libre Caslon Text)
src/components/NavBar.tsx	Remove logo SVG, restyle nav bar
src/components/Footer.tsx	Remove terminal elements, apply warm theme

DO NOT

• Do not change StoryCard, StoryGrid, or page layouts (that's Sub-2)
• Do not change any business logic or data fetching
• Do not add dark mode toggle — this is a full replacement

Acceptance Criteria

• All dark terminal tokens replaced with warm bookshelf palette
• Montserrat + Libre Caslon Text fonts loading correctly
• No Geist Mono references remain
• Navbar has no SVG logo, uses text-only "PlotLink" in Montserrat
• No terminal symbols (>, [=], [x], $) remain in UI
• Mobile nav still functions correctly
• npm run typecheck passes
• npm run lint passes

Branch

task/{issue-number}-design-tokens-typography