v0.9 Phase 1: tokens + fonts (Meadow + Fraunces/Inter)

[jacuzzicoding]

Summary

Phase 1 of the v0.9.0-beta implementation plan (docs/v0.9-plan.md §6 — Phase 1, merged in #62). Plumbing only — adds the Meadow design tokens and the new type stack, but does not yet wire them into any component. Visual output should be near-identical to v0.8.2-alpha. Component restyles consuming these tokens begin in Phase 5; the Sidebar and TownManager rebuilds (Phases 2–4) come first.

Added

• Meadow palette — full token set added to src/index.css @theme block as CSS custom properties:
  • Surfaces: --bg, --surface, --surface-alt
  • Text: --ink, --ink-soft, --ink-muted
  • Borders: --border, --border-strong
  • Accent: --accent, --accent-soft, --accent-ink (oklch moss green)
  • Warn: --warn, --warn-soft (oklch clay)
  • Category chip identity tokens: --chip-fish, --chip-bugs, --chip-fossils, --chip-art, --chip-sea
• Mirror in src/lib/colors.ts — new meadow export (JS literals for any spot a CSS var can't be used) plus a fontStacks export. The legacy colors export is kept untouched per the plan ("keep colors intact as it may still be referenced elsewhere until later phases clean it up").
• Fraunces — variable, opsz axis 9..144, weights 400/500/600 + italic 400/500. Loaded in src/index.css and index.html. Registered as --font-display.
• Inter — weights 400/500/600/700. Loaded alongside Fraunces. Registered as --font-sans. Set as the global default font-family (replacing the previous Varela Round default).

Removed

• Varela Round — fully retired:
  • @import removed from src/index.css
  • <link> removed from index.html
  • <link> and font-family removed from public/version-history.html
  • Inline fontFamily: 'Varela Round, ...' in src/App.tsx loading state replaced with Inter
• grep -i "varela" returns zero matches across src/, public/, and the repo root HTML.

Intentional exclusions (per locked decisions in the plan doc)

• Parchment, Midnight, Sakura themes are explicitly not included — locked decision feat(analytics): add Vercel Analytics integration #2 in docs/v0.9-plan.md ("ship Meadow only"). No [data-theme="..."] branching, no theme-switcher state, no alternate token sets.
• No theme-switcher UI, no Settings → Appearance section.

Visual impact

Components don't consume the new tokens yet, so most of the app looks the same. The one user-facing change is the body font: Varela Round is gone, so text now renders in Inter. Fraunces will start appearing in Phase 5+ when display headings, row names, and stat values get restyled.

Test plan

• npm run build — passes (tsc + vite build, 0 errors)
• npm test — 59/59 passing
• grep -i "varela" across src/, public/, index.html returns zero matches
• Lint + prettier hooks pass on commit
• Manual: load dev preview, confirm Inter is in use site-wide and Fraunces loaded (DevTools → Network → fonts)
• Manual: confirm no font-flash / FOUC on cold load

Decisions made on ambiguous points

• @theme syntax with v3-style @tailwind directives: The repo uses Tailwind v4 (tailwindcss@^4.1.12 + @tailwindcss/postcss) but with the legacy @tailwind base/components/utilities directives. Tailwind v4's @theme block works alongside this setup, so I added @theme { ... } without migrating to @import "tailwindcss". A future phase can do that migration if needed.
• Token mirroring strategy: The plan says tokens "must be defined as CSS custom properties in src/index.css @theme block and mirrored in src/lib/colors.ts." I added both the @theme registrations (Tailwind-aware) and a plain :root block (so anything reading var(--accent) outside Tailwind context still works), plus the meadow JS export. Belt-and-braces; consolidate later if redundant.
• Global font default: With Varela Round removed, the * { font-family: ... } rule in src/index.css had to point somewhere. I set it to Inter (the new UI stack). This is technically a small visual change (text now renders in Inter), but the alternative was to leave a dangling Varela Round reference, which the plan explicitly forbids.
• public/version-history.html: This is a standalone static HTML page, not part of the React app, but it loaded Varela Round directly. Updated it to load Fraunces + Inter for consistency since the plan says "any Varela Round references."

Design handoff note

design_handoff_v0.9.2_curator/ is referenced in the plan but is not present in this worktree (likely lives outside the repo / in a sibling directory I don't have access to from the worktree). All Phase 1 specs were taken directly from docs/v0.9-plan.md §5 ("Visual Direction") which has the full token table verbatim — so handoff CSS wasn't needed for this phase. Will need access to the handoff folder for Phase 5+.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
animalcrossingwebapp	Ready	Preview, Comment	May 3, 2026 9:44pm