# Design Language for genpatsu.quest ## Aesthetics and Tone Pixel-art minimalism meets classical editorial calm — genpatsu.quest presents itself as a quiet urban archive. The mood is that of a rainy-afternoon zine discovered in a Tokyo secondhand bookshop: unhurried, slightly anachronistic, and deeply intentional. Pixel-rendered cityscapes dissolve into soft glitch dissolves at the edges, as if memory is slowly degrading the image. The overall feel is **calm-serene** — no urgency, no noise, just a slow editorial scroll through a city remembered in 8-bit fragments. Inspiration draws from: late-90s Japanese pixel-art fanzines, the hushed quietness of Hiroshi Sugimoto's long-exposure architecture, and the distressed bitmap typography of early Game Boy cartridge title screens. Every interaction feels like turning a page rather than clicking a button. The aesthetic avoids the loud, neon-heavy pixel-art trope. Instead, pixels here are muted and deliberate — used as a constructive grid language rather than a retro decoration. Glitch effects are subtle: a three-pixel horizontal drift, a chroma-split that lasts 200ms, scanline ghosts that appear on hover. ## Layout Motifs and Structure **Editorial-flow** column structure: a dominant 70-character measure text column sits off-center, anchored 18% from the left viewport edge — mimicking the inner margin of a sewn-bound magazine. Content flows in a single vertical ribbon, but islands of pixel-rendered city imagery break the text rhythm at irregular intervals, tipping 2–4 degrees via tilt-3d transforms on scroll. Structural rules: - No symmetrical centering. The axis of gravity pulls left, like a newspaper fold. - Pixel-art cityscapes occupy full-width horizontal bands, but cropped at unusual heights (113px, 89px) — Fibonacci-adjacent numbers that feel tuned rather than arbitrary. - Section dividers are single-pixel horizontal rules in #b0a898 — not decorative lines but typographic pauses. - Margin annotations (small-caps captions, 9px) float in the 18% left margin, rotated 90° counter-clockwise, echoing the notation style of architectural blueprints. - Whitespace is generous: 80px vertical rhythm unit. Sections breathe. - No card grids. No column splits. No dashboard panels. Tilt-3d application: pixel-art image islands respond to scroll position with a subtle CSS perspective tilt (rotateX: ±3deg, rotateY: ±2deg), giving the flat pixel surfaces a slight three-dimensional diorama quality — like viewing a city block through a slightly warped glass panel. ## Typography and Palette **Primary font:** EB Garamond (Google Fonts) — set at 18px/28px for body, with optical sizing enabled. Garamond's old-style numerals and slightly irregular stroke width echo the imprecision of pixel rendering, creating a dialogue between analog and digital grids. **Secondary font:** Share Tech Mono (Google Fonts) — used exclusively for coordinates, timestamps, pixel-art captions, and margin annotations. 11px, tracked at +0.08em. Its narrow monospace geometry mirrors the pixel grid's own orthogonal logic. **Display / headings:** EB Garamond at 48–72px, set in small-caps or italic, never bold. Headlines are understated, not loud. **Palette — muted urban ash:** - `#e8e4df` — ash white (primary background, like aged newsprint) - `#2c2825` — charcoal ink (primary text, near-black with warm undertone) - `#7a7268` — stone grey (secondary text, captions, muted UI) - `#b0a898` — warm taupe (dividers, borders, inactive states) - `#4a5568` — slate blue-grey (links, pixel-art highlight color, tilt accent) - `#c4b8a8` — sand beige (hover states, subtle fills) - `#1a1f2e` — deep navy (used sparingly: glitch overlay, deep shadow zones) No pure black (#000000). No pure white (#ffffff). The palette breathes within a narrow warm-grey register, punctuated only by the deep navy for glitch moments. ## Imagery and Motifs **Pixel-art cityscapes** are the primary visual currency. Each image is a hand-crafted 16-color pixel scene: rooftop water tanks, overhead power lines at dusk, a convenience store facade at night, a pedestrian crossing seen from above. Rendered at 200×113px native resolution and displayed at 2× (CSS: `image-rendering: pixelated`) — crisp, not blurry. **Glitch-art effects** apply to images on hover and at section transitions: - RGB channel split: a 3px lateral offset of the red channel for 200ms - Horizontal scanline shimmer: a CSS animation cycling thin 1px transparent stripes vertically - Brief static noise: a `` overlay composited at 12% opacity for 150ms on section entry **City-urban motifs** throughout: - Pixel-rendered street-level details as section backgrounds (crosswalk striping, manhole covers, utility panel hatching) — all in the muted palette, never saturated - Architectural grid overlay on the hero section: a faint 8×8px dot-grid at 6% opacity, referencing urban planning schematics - Corner registration marks (small L-shaped brackets) on key content blocks, referencing print production markup - A recurring pixel "cursor" motif — a blinking 4×4 block in #4a5568 — used as a typographic ornament before key statements **Decorative micro-patterns:** - Section end markers: a single row of 5 pixel squares (■ ■ ■ ■ ■) in #7a7268 - Running footer coordinates in Share Tech Mono: fictional lat/long references to Tokyo districts (35.6762°N, 139.6503°E) ## Prompts for Implementation The implementation should feel like reading a thoughtfully typeset urban journal. Build a single vertical scroll page with no JavaScript-heavy flourishes — the tilt-3d effect should be pure CSS transforms triggered by IntersectionObserver, keeping the experience smooth and battery-friendly. Key implementation notes: - Use CSS `perspective: 800px` on image container wrappers; apply `transform: rotateX(2deg) rotateY(-1.5deg)` as default with transition to `rotateX(0) rotateY(0)` on in-view - Pixel-art images must use `image-rendering: pixelated; image-rendering: crisp-edges` and be served at exactly 2× their canvas size - Glitch animation: a `@keyframes` chroma-shift using `filter: drop-shadow(3px 0 0 rgba(255,0,0,0.4))` combined with brief `clip-path` mask cycling - The 18% left margin column should use CSS Grid: `grid-template-columns: 18fr 62fr 20fr` — annotation, content, breathing room - Body background should use a subtle CSS noise texture at 3% opacity over `#e8e4df` to replicate newsprint grain - EB Garamond loaded with `font-optical-sizing: auto` and `font-variant-numeric: oldstyle-nums` - No `text-align: center` anywhere in the document — all text left-aligned or left-ragged - Horizontal pixel-rule dividers: `border-top: 1px solid #b0a898` with 40px top/bottom margin - Navigation (if any) should be a single line of Share Tech Mono text in the top-left margin, treated as marginalia rather than a navigation bar Story and narrative emphasis: each section should feel like a page in a city journal. Avoid generic "learn more" CTAs. If calls to action exist, they should read as editorial invitations: "continue →" set in small Garamond italic. ## Uniqueness Notes 1. **Pixel-art as structure, not decoration**: Most pixel-art sites use it as a nostalgic splash element. Here, the pixel grid governs layout logic, image display rules, and typographic ornaments cohesively. 2. **Garamond + pixel aesthetic tension**: Pairing an Old Style serif from the 16th century with pixel-art imagery creates deliberate anachronism — the calm of classical print against the fragmentation of digital urban memory. This combination is rare in frequency analysis (garamond-classic appears in only 4% of designs, never with pixel-art). 3. **Tilt-3d as diorama, not parallax**: The tilt-3d pattern is applied to static pixel-art panels to suggest depth in a flat medium, avoiding the clichéd hero-parallax scroll used across 76% of full-bleed designs. 4. **Muted palette within pixel-art context**: Pixel-art conventionally uses saturated palettes. The muted ash-grey register here subverts expectation, creating a ghostly, archival quality — a city seen through fog. 5. **Editorial-flow without centering**: The 92% frequency of centered layouts is deliberately avoided. The off-axis left-anchored column creates visual tension that keeps the reader's eye engaged without spectacle. 6. **Avoided patterns from frequency analysis**: Centered layout (92%), full-bleed photography (92%), minimal imagery (35%), photography-first visual hierarchy — all avoided in favor of the underused pixel/editorial/tilt-3d combination. Planned seed: aesthetic:pixel-art, layout:editorial-flow, typography:garamond-classic, palette:muted, patterns:tilt-3d, imagery:glitch-art, motifs:city-urban, tone:calm-serene