simocracy-v2 · fieldnotes-landing-port

A governance field manual, bound in cloth & stamped in gold foil

The Simocracy landing page has been reskinned with the fieldnotes aesthetic — deep forest cloth, gold foil headings, EB Garamond serif, IBM Plex Mono small-caps labels, a rotating ASCII globe, and pixel citizens walking along the hero. This report is a guided tour of the new surface.

Target: simocracy.org (branch migration/pixel, local :3005) Scope: landing page only (other routes unchanged) Date: 2026-04-20 PARTIAL — shipped, with 1 follow-up

🎬 Screen recording — 52 s walkthrough

Full interactive tour: hero with ASCII globe + walking sims, scroll through the six cloth windows, visit the Create a Sim CTA, return to the landing. Drag the timeline to re-examine any beat.

0:00–0:06Hero settles — gold Simocracy heading, italic tagline, body paragraph, foil CTA, rotating ASCII globe on the right, three sims walking at the bottom. 0:06–0:10Smooth scroll to the six-window gallery. Titlebars with ═ LABEL ═ markers, gold status pills (LIVE, OPEN). 0:10–0:13Hover-lift on The Senate window — .cloth-window-shadow:hover raises the card 2 px and deepens the shadow. 0:13–0:17Continue scrolling to reveal the three primitives (My Sims, Gatherings, Skills) and the full-width Stack window. 0:17–0:20Foil footer strip at the bottom: SIM · simocracy · a governance field manual · simocracy.org · © 2026. 0:20–0:30Scroll back up; click CREATE A SIM →; route transitions to /my-sims. Navbar remains intact across the route change. 0:30–0:52Return to landing via browser back — walking sims resume, globe resumes rotation. No re-render jank.

Headline result

files touched

+1,998

lines added

commits on migration/pixel

bug caught & fixed post-ship

Headline. R1 shipped the whole cloth+foil landing in one pass. The remaining pages (Senate, Frontier Tower, Gallery, My Sims, Skills, Docs) are untouched, as scoped. One post-ship bug — the ASCII globe rendered skewed because var(--font-mono-landing) (declared inside Tailwind 4's @theme inline) does not emit a runtime CSS custom property — was diagnosed and fixed in commit 397c1f1. Navbar still uses the pre-fieldnotes charcoal palette; that is deliberate R2 scope.

The new design system, at a glance

Palette

--cloth #1e3a32

--cloth-2 #24433a

--foil #e8b73a

--foil-dim #b88a20

--ink-on-cloth #f2e4b8

--ink-dim #c8b88a

Typography

EB Garamond — headings and body copy. Weights 400/500/600. Gold foil on headings, cream (--ink-on-cloth) on body.
Cormorant Garamond Italic — accent lines (taglines, window subtitles, ghost links).
IBM Plex Mono — small-caps labels (═ SENATE ═), CTA buttons, status pills, footer strip. Always uppercase, tracking 0.18–0.22em.
Syne / Outfit — retained in app/layout.tsx for other pages; not used on the landing.

Motifs

No rounded corners. Every card, button, pill is a hard rectangle — this is a bound book, not a SaaS dashboard.
Scanline background. .cloth-surface lays two 1-px-on-3-px repeating gradients over the cloth color, evoking a woven texture. Scoped to the landing, not global.
Gold-foil CTA. bg: --foil, color: --cloth, uppercase Plex Mono with 0.22em tracking and a trailing →. Hover: --foil-dim.
Window titlebar. Hatched gold scanline strip, 10-px square corner anchor on the left, centered label in ═ LABEL ═ form, optional status pill on the right.

Walkthrough — still frames

Hero with Simocracy heading, italic tagline, body paragraph, foil CTA, ASCII globe on the right, three walking pixel sims at the bottom

01 · Hero gold heading, italic tagline, foil CTA, rotating ASCII globe, three walking sims (ming, cryptobenthic, Einstein — fetched live from the indexer)

Two windows side by side: The Senate (LIVE) and Frontier Tower SF (LIVE)

02 · Flagship worlds ═ THE SENATE ═ and ═ FRONTIER TOWER ═, both with LIVE status pills. Enter-the-floor / Visit-the-tower CTAs in foil mono

Three narrower windows: My Sims (OPEN), Gatherings (OPEN), Skills

03 · Primitives row My Sims, Gatherings, Agent Skills — the building blocks of a run. First two carry OPEN pills; Skills is neutral

Wide Stack window listing ATProto, Hypercerts, OpenRouter, Octant, FtC, followed by the foil footer strip

Findings

PASS The whole cloth aesthetic lands on first attempt. Hero, windows, walking sims, status pills, scanline cloth background, gold foil headings, italic Cormorant taglines, foil footer strip — all pixel-accurate to the fieldnotes reference. The walking-sim pipeline (sprite atlases, emote bubbles, edge-bouncing) was extracted into hooks/useLandingWalkingSims.ts and reused unchanged, so no sprite regressions.

FIXED ASCII globe was skewed on first render — now circular. The globe's <pre> led its font stack with var(--font-mono-landing), a token declared inside Tailwind 4's @theme inline. Those tokens feed Tailwind utilities at build time but do not emit runtime CSS custom properties. With no fallback, a var() that resolves to an empty string invalidates the entire font-family declaration per the CSS spec, so <pre> inherited sans-serif from <body>. Non-monospace → uneven glyph advances → square WebGL sphere maps to a warped character grid → egg-shaped globe.

Fix: Lead with var(--font-plex-mono) — the real next/font CSS variable actually set on <body>. Confirmed in-browser via getComputedStyle:

// before
fontFamily: 'var(--font-mono-landing), var(--font-plex-mono), "IBM Plex Mono", Menlo, ui-monospace, monospace'
// <pre> resolved to: "ui-sans-serif, system-ui, sans-serif, …"
// bounding rect: 547 × 480 (aspect 1.14 — egg)

// after (commit 397c1f1)
fontFamily: 'var(--font-plex-mono), "IBM Plex Mono", Menlo, ui-monospace, monospace'
// <pre> resolved to: "IBM Plex Mono", "IBM Plex Mono Fallback", …
// bounding rect: 480 × 480 (aspect 1.00 — circle ✓)

Elongated egg-shaped ASCII globe — Before: aspect 1.14 — sans-serif fallback warped the grid

Round ASCII globe with visible continents — After: aspect 1.00 — circular; Africa/Europe visible

DEFER Navbar still uses the pre-fieldnotes glass/charcoal palette. The shared navbar (components/navbar.tsx) is used across all routes. Restyling it for the cloth theme on the landing would either (a) fork it into a landing-specific variant or (b) restyle it globally and force every other page to also move to the cloth theme. R1 deliberately shipped the landing with the old navbar on top, marked with // TODO(fieldnotes), so the design-port decision is explicit. A thin border-b foil-ghost divider sits between the navbar and the cloth surface as a visual handoff.

DEFER Sim name-tags still use sans-serif white-on-black. The walking-sim canvas labels each citizen with a small black pill + white sans-serif text. That matches the old SaaS aesthetic; on the cloth surface it reads as a foreign element. R2 candidate: re-render tags with Plex Mono, foil background, cloth-colored text, same footprint.

DEFER Old landing components left in place. components/landing/hero.tsx, globe.tsx, and feature-grid.tsx are the pre-fieldnotes versions. They are no longer imported anywhere, but were kept in the repo for one review cycle. R2 will delete them once the new landing has stabilized.

What landed

New files

Reusable primitives components/fieldnotes/cloth-window.tsx
components/fieldnotes/ascii-globe.tsx
components/fieldnotes/foil-button.tsx Landing-specific components/landing/hero-cloth.tsx
components/landing/window-gallery.tsx Extracted hook hooks/useLandingWalkingSims.ts (lifted intact from the old hero) Texture asset public/globe-solidmap.webp (copied from fieldnotes) Brief + screenshots plans/FIELDNOTES_PORT_BRIEF.md
plans/fieldnotes-port-r1.png (headless)
plans/fieldnotes-port-r1-live.png (live browser)
plans/fieldnotes-port-r1-globefix.png (post-fix)

Modified files

app/globals.csscloth / foil tokens, .cloth-surface scanline class, .cloth-window-shadow lift app/layout.tsxadded EB Garamond, Cormorant Italic, IBM Plex Mono via next/font. Syne + Outfit preserved for other pages. app/page.tsxServer Component renders <HeroCloth> + <WindowGallery> + inline <ClothFooter>

Reproducing

Branchmigration/pixel Commits 4cf004a — feat(landing): port fieldnotes cloth+foil aesthetic (R1)
ff59f63 — docs(landing): add live-browser screenshot
397c1f1 — fix(landing): globe was elongated — resolve monospace font var properly Buildnpm install && npm run build → passes (next 16.0.7 + turbopack) DevPORT=3005 npm run dev → http://127.0.0.1:3005/ Verify globe document.querySelector('pre').getBoundingClientRect() → aspect should be 1.00 Verify font getComputedStyle(document.querySelector('pre')).fontFamily → should start with "IBM Plex Mono", not ui-sans-serif Capture agent-browser record start assets/walkthrough.webm http://127.0.0.1:3005/
Drive a scroll sequence, click the CTA, browser-back, agent-browser record stop.

design-port fieldnotes tailwind-4 next-fonts webgl-ascii atproto agent-browser

Produced by Claude (PM/chief designer) with Claude Opus 4.7 (engineering) in a tmux pair-programming session. The full brief shipped alongside the code at plans/FIELDNOTES_PORT_BRIEF.md. Next brief (R2) will cover the navbar port, sim name-tag restyling, old-component cleanup, and (possibly) the Chaos/Order toggle + draggable window layout from fieldnotes' desktop mode.