simocracy-v2 · fieldnotes-full-port-r1
Fieldnotes Full-App Port (R1)
After the landing port proved the cloth + foil aesthetic, this run sweeps it across the rest of the app — primitives, navbar, typography, and every non-landing page — while leaving every pixel sprite, canvas, and hand-drawn background untouched.
Screen recording
~90 s tour: landing → my-sims → gallery → sim profile → events → senate → ftc-sf → skills → docs → stats. Driven on the live preview via agent-browser record.
Headline result
Headline. Tokens, fonts, shadcn primitives, and the navbar carry the new look into ~70% of the app automatically — the page-level sweep cleans up the remainder. No glass-panel, no gradient-mesh, no rounded cards. Every heading is EB Garamond; every label is IBM Plex Mono small-caps. Walking sims, the Frontier Tower, the avatar editor, emote bubbles, and the hand-drawn world backgrounds all render unchanged — the pixel layer was never touched.
Before / after
The navbar is the easiest tell. Left: the pre-port dark charcoal bar from the sprite-options-api run. Right: the fieldnotes strip — cream cloth, foil wordmark, IBM Plex Mono small-caps nav items, no pill-button sign-in.
sprite-options-api run
What shipped
Five commits on migration/pixel, all pushed to origin. Each phase of the brief is one commit.
4e70237 — chore(theme): repoint shadcn tokens to fieldnotes light palette + remove glass/mesh
Phase 1. Rewrote the :root oklch neutrals in app/globals.css to the cream/foil/ink palette from the landing, kept the shadcn token names (--background, --card, --primary, …) so every bg-*/text-* utility across the app repoints for free. Removed glass-panel, gradient-mesh, and noise-bg utilities. Neutralized the dark-mode branch — TODO(r3).
28d53f4 — feat(ui): restyle shadcn primitives to fieldnotes cloth+foil
Phase 2. Button, Card, Dialog, DropdownMenu, Input, Textarea, Select, Switch, Tabs, Badge, Tooltip, Avatar. Square corners (4 px max), single-pixel rules, ink-on-cream hover states, foil accents on primary variants. Mono labels inside form controls. The avatar component keeps its circle — sprite mechanics are sacrosanct.
561f928 — chore(styles): sweep Syne/Outfit → EB Garamond/Plex Mono + remove legacy rounding
Phase 3. Mechanical sweep across the ~65 non-landing files. Every font-syne/font-outfit becomes font-serif/font-mono; every stray rounded-xl/rounded-2xl/rounded-3xl becomes rounded-none or rounded-sm. Purely token-level — zero component rewrites.
3b98dfc — feat(navbar): fieldnotes-style top strip with foil wordmark + mono nav
Phase 4. Full rewrite of the top strip: cream background with a hairline bottom border, foil Simocracy wordmark in EB Garamond, IBM Plex Mono small-caps nav (EVENTS / GALLERY / SKILLS / DOCS), minimal SIGN IN control. No blur, no shadow, no pills.
30f04a4 — feat(pages): cloth+foil polish across my-sims, gallery, senate, events, ftc-sf, skills, docs, stats
Phase 5 + 7. Per-page cleanup where inheritance wasn't enough — sidebar panels in Senate and Frontier Tower, event cards, sim profile chrome, skill grid, docs layout, stats tables. Cards become cloth paper with single-pixel rules; pills become mono small-caps tags; status chips recolored to the editorial palette. Canvases, sprites, and backgrounds untouched.
Walkthrough
Ten stills captured on the preview deployment. The walking canvases in Senate and Frontier Tower render against their hand-drawn backgrounds exactly as before — the chrome around them is what changed.
Findings
Token-level cascade worked as planned
Repointing the shadcn tokens in one file carried the cloth + foil look into ~70% of surfaces without touching the components. The manual sweep was genuinely small: 77 files, 1 124 / 1 004 insert/delete, spread across primitives, pages, and the navbar. No page regressed to an unusable state between phases.
Pixel layer fully preserved
Walking sims, avatar editor, Frontier Tower sprites, emote bubbles, and the hand-drawn world backgrounds (senate, frontiertower, launch, oxford, pyramid, server, village, …) all render unchanged. No sprite asset, canvas hook, or rendering pipeline file was modified.
Event-card and floor-pill colours still on the old palette
Status chips on /events retain the pre-port cyan / purple tints (Funding / Governance / Hybrid / Application / Upcoming / Active / Completed). Floor pills in the /ftc-sf sidebar are readable but sit pale against the cream, losing separation. Both are colour-value tweaks only — no structural work. TODO(r3).
Stats-page chart series
The charts on /stats still render in the old bright series palette. The chrome around them is cloth; the series are not. Needs a fieldnotes-compatible categorical palette (muted foil, ink, a warmer accent). TODO(r3).
Sim name-tags still black-on-sans
The floating name-tags that render above walking sims on Senate and Frontier Tower kept their black pill / sans-serif treatment from the pre-port era. They read fine over the hand-drawn backgrounds, but stylistically they're an island. Flagged for a fieldnotes-style re-treatment (mono small-caps, cream pill) in R3.
Dark-cloth variant deferred
Per the brief's non-negotiable #6, the app ships light-only; the next-themes toggle is neutralised with a TODO(r3). A future brief reintroduces a cloth-paper dark variant (ink ground, warm-foil headings) as an opt-in.
Continuity with the landing port
This run is the follow-on to fieldnotes-landing-port. That run proved the tokens and the rotating globe on the landing; this one generalises the pattern to everything else. Read them in order to see the cascade argument the brief makes.
Reproducing
GainForest/simocracy-v2
Branchmigration/pixel
Commits4e70237 · 28d53f4 · 561f928 · 3b98dfc · 30f04a4
Previewsimocracy-v2-git-migration-pixel-gainforest.vercel.app
Briefplans/FIELDNOTES_FULL_PORT_BRIEF.md
Predecessorfieldnotes-landing-port (R1 landing only)
Videowalkthrough.webm (4.3 MB, ~90 s)
Screenshotsassets/01–10-*.png · assets/compare/navbar-{before,after}.png
Recorded withagent-browser record driving the live preview deployment