simocracy-v2 · transparencia-redesign

Simocracy redesign — TransparencIA editorial design language

@daviddao

Reskinned the Simocracy v2 landing in the TransparencIA editorial design language — civic-newspaper rhythm, architectural notation, cobalt accent — while keeping Simocracy’s warm-paper/foil palette and its walking pixel sims as the centerpiece.

Date: 2026-05-20 · Target: http://127.0.0.1:3047/ (dedicated dev port) · pass

Headline result

3
Files touched
6
Motifs landed
6
Sims still walking
1
Illustration generated

Headline. The landing reads as a civic publication first and a SaaS product second — serif H1 with cobalt italic emphasis, mono kicker (“01 — Una publicación cívica”), vertical sidebar tags, 44 px architectural grid, blinking plus marks, drifting cobalt + terracotta accent squares, numbered ticks (01/02/03), and a JAN…DEC mono ruler with a cobalt month marker. The walking sims still own the right-hand composition: they walk inside the cobalt halo, clickable, atop the grid. A new “02 — The publication, in numbers” stat row pulls live counts from the indexer (sims / gatherings / proposals) in the three-up newspaper-masthead pattern.

Design system tokens added

Cobalt--cobalt: #0f3bd6 · brand accent, italic emphasis, kickers, halo squares Cobalt soft / haze#3b82f6 · #dbe4f7 (hero halo) Terracotta--terracotta: #e07a3c · second accent (one square per composition) Ink ghost / faint#94a3b8 · #64748b · tick marks, mono captions Rule--rule · hairline dividers paired with kickers Utilities.grid-paper, .grid-paper-fade, .tk-kicker, .tk-kicker-mute, .tk-rule Animations.tk-anim-drift-1/2, .tk-anim-blink, .tk-anim-pulse-dots, .tk-anim-breathe (all paused under prefers-reduced-motion) Palette retained--cloth #FAF9F5, --foil #1A1A19 — Simocracy’s existing paper/ink stays primary; cobalt is added sparingly per the transparencia rules

Walkthrough

Simocracy landing before redesign
01Before — the existing fieldnotes landing. Warm, but no editorial rhythm; sims floated as a side decoration.
Simocracy landing after redesign
02After — new TransparencIA hero (top half). Mono kicker, big serif H1 with cobalt italic governance, vertical sidebar tags, cobalt halo, plus marks, accent squares, month timeline.
Hero close-up
03Hero close-up. Six sims walking inside the cobalt halo, on a 44 px architectural grid. Cobalt + terracotta accent squares drift on independent timings; plus marks blink staggered.
After: stat columns and feature grid
04“02 — The publication, in numbers” — new three-up stat columns. Live counts from the indexer (sims / gatherings / proposals), serif numerals, cobalt mono labels, hairline left rules.
Gallery page tokens unchanged
05Gallery: the cobalt accent is reserved for the landing. Internal surfaces keep the existing fieldnotes look so the redesign is additive, not destructive.
Generated Register A civic illustration
06Generated “Register A” civic illustration: graphite-pencil parliament dome on #FAF9F5 cream paper, sparse cobalt + terracotta registration marks. Drop-in editorial figure for future sections.

Findings

Hero composition reads as editorial first

The mono kicker → serif H1 (with cobalt italic emphasis on governance) → lede → CTA stack matches transparencia’s newspaper rhythm exactly. The vertical sidebar tags (ATPROTO / OPEN SOURCE / MX·SF·NYC) anchor the left edge the way transparencia anchors theirs.

Sims preserved & integrated, not removed

Per the brief: sims are a load-bearing part of the design system, so they stay animated and clickable. The walking-sim canvas now lives inside the cobalt halo (88 % of the composition box), surrounded by the architectural notation. Clicking still opens SimInfoSidebar (chat / discuss / view profile) — same wiring, new framing.

Cobalt used sparingly, not as a new theme

Simocracy’s warm-paper + black-foil palette stays primary. Cobalt only appears as: italic emphasis on one word in the H1, kicker text, the hero halo (haze tone), one accent square, the month-marker dot, the LIVE pulse, and the stat-column labels. Terracotta gets exactly one square per composition. Everywhere else — cards, buttons, navbar — is untouched.

Stat columns pull live indexer counts

The new StatColumns calls fetchAllSimsWithMeta(500), fetchGatherings(200), fetchSimocracyProposals(500) in parallel. All three are wrapped in .catch(() => []) so a flaky indexer degrades to zeros rather than 500ing the landing.

Scope: landing only, this round

Tokens (--cobalt, --terracotta, .grid-paper, .tk-* animations) are global, so any page can adopt the editorial look. This round only retargets the landing — gallery, profile, my-sims, and the world pages keep their existing fieldnotes look on purpose. Internal pages can be migrated piecewise in follow-ups.

Generated illustration parked at /tmp

The Register-A graphite parliament dome (05-civic-illustration.png) is a drop-in editorial figure for the about / proposals / docs pages. Generated on a #FAF9F5 ground (not pure white) so it sits flush on the cloth background, with cobalt + terracotta registration marks. Not yet placed in public/ — awaiting user pick.

Files changed

Tokens + motifsapp/globals.css — added cobalt/terracotta/ink-ghost tokens, .grid-paper, .tk-kicker, hairline rule, five animation utilities New herocomponents/landing/hero-editorial.tsx — replaces HeroCloth on the landing; same sim-canvas wiring, transparencia composition around it Stat columnscomponents/landing/stat-columns.tsx — new three-up newspaper-masthead section Page wiringapp/page.tsx — swap HeroCloth → HeroEditorial, fetch live counts, mount StatColumns

Reproducing

Dev portPORT=3047 npm run dev (dedicated; default 3000 is shared with other agents) Targethttp://127.0.0.1:3047/ Browser capturesagent-browser screenshot --full after navigating to / and /gallery Illustrationcodex exec --enable image_generation -i <ref.png> with a Register-A prompt · saved to /tmp/sim-civic-illustration.png Referencetransparencia-design.vercel.app