ai4pg · transparencia-redesign

An editorial redesign for ai4pg, in transparencia register.

The ai4pg landing page — previously a scattered desk of Mac-style chrome windows — has been rebuilt as a kicker-numbered editorial publication mapped from transparencia-design.vercel.app, with ai4pg's existing dark cloth + gold-foil palette kept as the canonical surface. A custom pencil-sketch hero illustration (a generic neoclassical civic rotunda) sits seamlessly on the page — graphite on warm paper in light mode, baked into a transparent foil-cream alpha plate for dark mode.

Date: 2026-05-20 · Repo: ai4pg · Target: http://localhost:3050 · redesign shipped

Headline result

Editorial sections (00–06)

Pencil illustrations generated

Themes wired (dark + light)

3050

Dedicated dev port

What changed. The landing page now reads like an editorial publication on the design of allocation mechanisms — numbered kickers, serif H1/H2 with foil-italic emphasis, stat columns, browser-frame visuals around live content, a 4-up research-thread grid, a notes ToC, team list, supporters grid, and a closing contact bar. The chaos/order Window gallery is retired in favour of a linear, scrollable section flow. The dev server runs on :3050 (not the default :3000) so other agents using agent-browser aren't blocked.

Before → After

Before. The pre-redesign landing was a scattered desk of Mac-style chrome windows with titlebars, ASCII globe in the hero, and a chaos/order toggle. Charming but unmistakably a tech-art prototype rather than a research publication.

before · topScattered Window chrome cards; ASCII globe in the hero; chaos/order toggle pinned in the menu bar.

before · bottomNotes / team / supporters / contact, all wrapped in window titlebar chrome. Lots of ═ SECTION ═ ornament.

After (dark). Editorial publication in deep teal cloth + warm gold foil, with the rotunda rendered as foil-cream linework on transparent background.

ai4pg dark hero + stats + workshop frame

after · dark · topHero: numbered kicker, serif H1 with foil-italic emphasis, big rotunda illustration with foil halo behind the dome, accent squares overlaying the building, month timeline. Stats bar follows on cloth-2. Workshop browser-frame shows the four research threads.

ai4pg dark grants + research + notes + team

after · dark · middleGrants browser-frame with stat columns + programme timeline. Research threads as a 4-up grid with foil corner squares. Field notes ToC. Team list with workshop + grants splits.

ai4pg dark supporters + contact + footer

after · dark · bottomSupporters logo grid (8-up on lg, foil-tinted). Contact bar with foil-italic “co-sponsor” emphasis. Minimal editorial footer with chip + wordmark + edition line.

After (light). Same publication on warm sepia paper. The illustration's paper background matches the cloth exactly (#F9F2E3), so the plate disappears — the rotunda just sits on the page, the way the Palacio Nacional does on transparencia.tech.

ai4pg light hero + stats + workshop frame

after · light · topGraphite-on-paper rotunda fills the column, dome rises above the foil-haze halo, base dissolves into the page floor. Editorial italic emphasis in restrained black ink.

after · light · middleBrowser-frame visuals stay legible in light mode; stat columns, programme timeline, research-thread grid all read as architect's plates on warm paper.

after · light · bottomTeam list, supporters logo grid (tinted to ink for light mode), and the closing contact bar.

The hero, side-by-side

hero · darkFoil halo → dome rises above; rotunda is a transparent-bg alpha plate baked from the original sketch (negate → alpha → colour with #F0CA6E). No filter or blend-mode tricks at runtime — the asset is correct on its own.

hero · lightThe original graphite-on-warm-paper render. Its paper background colour #F9F2E3 is the new --cloth in light mode, so the illustration rectangle dissolves into the page — same recipe transparencia.tech uses.

Decisions worth flagging

The hero subject is not Columbia's Low Library

The first illustration generated was a faithful pencil sketch of Low Memorial Library at Columbia — venue of the AI4PG 2026 workshop. It looked great but anchored the entire landing to a single location and risked reading as “AI4PG is mostly about Columbia.” It's been preserved at public/illustrations/columbia-low-library.webp for the workshop detail page (/events/columbia-2026), where being location-specific is the whole point. The landing now uses an unbranded neoclassical civic rotunda — a generic “temple of the commons” — that allegorises public-goods deliberation without anchoring to any real institution.

Two illustration variants for the same subject, not one with CSS filter

First attempt rendered the same graphite-on-paper PNG in both themes and used filter: invert + sepia + hue-rotate + mix-blend-mode: lighten to convert it to cream-on-cloth for dark mode. It half-worked — there was a visible darker rectangle where the inverted paper didn't quite blend into the cloth. Final approach: bake a dedicated dark-mode asset at design time with ImageMagick (negate → use as alpha → colour with foil #F0CA6E), produce civic-rotunda-foil.webp alongside the original, and swap by theme via plain display: none CSS. No runtime filter hacks; both assets are correct on their own. (preview of the foil-cream variant on dark cloth.)

Dev server runs on `:3050`, not `:3000`

Per the brief — multiple agents currently use agent-browser with the default port, so the redesign instance runs on :3050 via npx next dev -p 3050. No collisions, no contention.

transparencia-web-v2 worktree was stashed before any work

The user flagged that the sibling repo ../transparencia-web-v2 had been previously edited by accident. Before touching anything I ran git stash there. The stash entry is named WIP on main: 64ff261 Add live DOF heatmap + Congress composition embeds, split diputados/senadores — recoverable via git stash pop in that repo. No further edits made to that repo.

Design-system mapping

Every TransparencIA token has a direct counterpart in ai4pg's existing palette, kept verbatim:

Role	Transparencia	ai4pg dark	ai4pg light
Paper (page bg)	`#f4f1ec`	`#1D332C`	`#F9F2E3`
UI chrome (cloth-2)	`#efebe3`	`#223B33`	`#F2EBD9`
Body ink	`#1a202c`	`#F2E4B8`	`#141413`
Secondary ink	`#475569`	`#C8B88A`	`#4F4E47`
Brand accent	`#0f3bd6` cobalt	`#E8B73A` foil	`#1A1A19` ink
Brand haze	`#dbe4f7`	`rgba(232,183,58,.16)`	`rgba(20,20,19,.06)`
Second accent	`#e07a3c` terracotta	`#D88A52` copper	`#C24E2C` copper
Rule / dividers	`#cbd5e1`	`rgba(232,183,58,.18)`	`rgba(20,20,19,.10)`

Type stays on ai4pg's existing register: EB Garamond for serif H1/H2/body, Cormorant Garamond Italic for inline emphasis (analogous to transparencia's italic-cobalt), IBM Plex Mono for kickers, captions, stat labels and the timeline ruler.

Motif primitives that were built

Kickernumbered section label (00 — A research initiative) in foil mono caps. EditorialTitleserif H1/H2 with optional italic foil emphasis (“Mechanism design for public goods.”). EditorialSection12-col copy-left + visual-right layout with reverse, used by Workshop + Grants sections. EditorialPillstatus chip (UPCOMING / IN REBUTTAL). BrowserFramechrome dots + URL bar + grid-paper interior, wrapping live workshop and grants content. StatColumnicon + serif number + foil mono label + caption (5-up stats bar). HeroCompositionillustration + foil halo + accent squares + plus marks + month timeline + numbered tick labels. PlusMarkSVG registration cross with staggered blink animation. SidebarTagsvertical mono tags down the left margin (MECHANISMS / PUBLIC GOODS / ALLOCATION). MonthTimelinemono ruler JAN…DEC with a foil marker on JUN (workshop month). LiveDotpulsing foil dot + label, used as the “In rebuttal · 2026” indicator. MenuBarrewritten as a flat editorial nav: foil chip + wordmark + numbered section links + edition line + theme toggle.

Detail shots

stats + workshop frame5-up stat columns (1 workshop · 4 threads · $10k · 8 supporters · publication motto) on cloth-2; below it, the workshop browser-frame visual with grid paper, status pill, serif title with italic subtitle, numbered research-thread list, and dates/venue/organizers coordinate bar.

grants browser frame$10k max award, 12 research areas, 7 organizers, plus a programme timeline ruler from OCT 2025 through to LATE APR 2026 with a filled foil marker on the current (rebuttal) phase.

research threads4-up grid, each card with a small foil corner-square notation, mono kicker (“Thread 01”), serif title, body lede, and a Read thread → link.

Rotunda foil-cream variant previewed on dark cloth

rotunda · foil-cream variantThe transparent-background, foil-cream-tinted variant used in dark mode, previewed here against ai4pg's deep teal cloth. Negate the original → use as alpha channel → colour with #F0CA6E (an aged-foil cream); composite with cwebp at quality 88. Lines float; no plate.

Original graphite-on-paper rotunda render

rotunda · graphite originalCodex image-generation, ChatGPT-account auth, no API key. Prompt anchored register A from transparencia-design.vercel.app: imaginary neoclassical rotunda, 12 Ionic columns, low dome, three shallow steps, bench + empty plinth, drifting birds, light cross-hatching, paper tint #FAF9F5, no people, no text, generous negative space. AI returned with paper #F9F2E3 — which became the new --cloth for light mode.

Low Library sketch preserved for the workshop detail page

low library · reserved for /events/columbia-2026The original Codex-generated Low Memorial Library sketch, now parked at public/illustrations/columbia-low-library.webp. It's the natural illustration for the Columbia 2026 workshop detail page where the venue specificity is the point — just not for the landing, where it would over-anchor.

Files touched in `ai4pg/`

src/app/globals.cssrewrote the design-token block (cloth / cloth-2 / cloth-3 / foil / foil-haze / copper / rule), added grid-paper utility, motif keyframes (hero-blink, hero-pulse-dots, hero-square, hero-breathe, pulse-dot), illustration theme-swap rules. Light-mode --cloth = #F9F2E3 to match the warm paper of the pencil sketch. src/app/page.tsxrewrote the landing as a server component with kicker-numbered editorial sections (Hero / Stats / 01 Workshop / 02 Grants / 03 Research / 04 Notes / 05 Team / 06 Supporters / Contact / Footer). Dropped the Gallery + ChaosOrderToggle layout entirely. src/components/MenuBar.tsxrewritten as the flat editorial nav described above. src/components/Motifs.tsxnew file. All the motif primitives (PlusMark / Kicker / EditorialTitle / BrowserFrame / StatColumn / SidebarTags / AccentSquares / MonthTimeline / EditorialSection / LiveDot / EditorialPill). src/components/HeroComposition.tsxnew file. The hero composition wraps the rotunda asset + halo + accent squares + plus marks + month timeline + numbered tick labels. Two image variants stacked, theme-swapped via CSS. public/illustrations/civic-rotunda.webp228 KB · 1600×1600 · graphite on warm sepia paper. Light-mode hero. public/illustrations/civic-rotunda-foil.webp443 KB · 1200×1200 · transparent background, foil-cream linework. Dark-mode hero. public/illustrations/columbia-low-library.webp298 KB · reserved for the Columbia workshop detail page; not wired in yet.

Reproducing

Repo/Users/david/Projects/ai4pg Dev servercd ai4pg && npx next dev -p 3050 — then http://localhost:3050 Image generationCodex CLI, codex exec --enable image_generation, ChatGPT-account auth, no OPENAI_API_KEY needed. Prompts saved at /tmp/ai4pg-imagegen/prompt-hero.txt + prompt.txt. Foil-cream variant

magick rotunda.webp -colorspace gray -negate -level 10%,55% rotunda-alpha.png && magick -size 1600x1600 xc:"#F0CA6E" rotunda-alpha.png -alpha off -compose copy_opacity -composite rotunda-foil.png && cwebp -q 88 -alpha_q 90 rotunda-foil.png -o civic-rotunda-foil.webp

Live referencetransparencia.tech · transparencia-design.vercel.app Screenshotsassets/*.png · split per pi-eval rules (≤ 1500 px tall, pngquant compressed).