# Design Language for genpatsu.io ## Aesthetics and Tone genpatsu.io occupies an uneasy, contemplative space: it is **Frutiger Aero in mourning**. The visual idiom of the early-to-mid 2000s -- glossy water droplets, blue-sky horizons, bubble-shaped iconography, the optimistic gloss of Windows Vista, the iMac G4, Bravia campaigns, and corporate brochures for Tokyo Electric -- once promised a clean, friendly, ecological future powered by nuclear energy. The word *genpatsu* (原発), Japanese for "nuclear power plant," carries the full weight of that broken promise: the seismic line drawn between March 10 and March 11, 2011. This site does not lecture, indict, or memorialize directly. Instead, it inhabits the **aesthetic afterlife of a discontinued future**: glossy bubbles still drift, but their highlights are dulled to the color of old VHS tape. Stock-photography skies appear, but they are slightly off-register, slightly vignetted, scanned from a brochure that has been sitting in a humid basement for fifteen years. The mood is **raw-authentic without being abrasive** -- a documentary-photographer's tone rather than a polemicist's. There is no shouting, no infographics, no calls-to-action. Instead, the page feels like turning the pages of a discarded company brochure (PR magazine for a power utility, c. 2003) that has been pulled from a pile of debris and gently flattened on a table. Optimism is preserved as a ghost. The visitor is invited to grieve a particular kind of corporate futurism that once felt completely safe. Key emotional registers, in priority order: - **Faded utopia** -- the glossy world has lost roughly 30% of its saturation but retains all of its shapes. - **Documentary stillness** -- nothing rushes; the camera lingers. - **Specific Japaneseness** -- vending machine blue, instructional pictograms, the unique cyan of pamphlet skies. - **Unease beneath calm** -- a single off-key element in every viewport (a dripping water droplet that never falls, a leaf rotated 3 degrees too far, a cooling tower silhouette behind a "safe" gradient). ## Layout Motifs and Structure The layout is strictly **centered** -- a single vertical column drawn down the middle of the viewport with a maximum content width of 720px, flanked by deep gutters of soft sky-into-grass gradient on either side. This is a deliberate refusal of the dashboard, the bento, the asymmetric magazine. Centering invokes the layout grammar of **mid-2000s Japanese corporate brochures**: a polite, symmetrical, almost ceremonial spine, suitable for a document that wants to be trusted. **Vertical structure (top to bottom):** 1. **The Sky Plate** -- A full-bleed but vertically short hero (60vh) consisting of a soft cyan-to-cream gradient with three drifting glossy bubbles rendered as pure CSS (radial gradients with inner highlight). Centered in the column: the word `genpatsu` in expressive variable type, its weight slowly oscillating between 200 and 700 over a 12-second loop. Below it, a subtitle in faded sans -- *a record of an aesthetic and its weather*. The bubbles parallax-drift at three different rates as the visitor scrolls. 2. **The Brochure Pages** -- Six to nine centered "pages," each occupying roughly 90vh. Each page is a single composition: one centered photograph (treated, see below), one centered paragraph of body text in 18px humanist serif, and a single decorative flowing-curve glyph rendered in SVG between the image and the text. Pages have generous internal padding (clamp(4rem, 10vh, 8rem)) and are separated by 30vh of silent, uninterrupted gradient -- the negative space between brochure spreads. 3. **The Glossary Strip** -- A horizontal-flow strip, still centered, containing six bubble-shaped chips with single Japanese terms (*safety*, *cooling tower*, *neighborhood*, *brochure*, *forgetting*, *light*). Hovering a chip reveals a small fact rendered in mono fine print. This is the only section with hover interaction. 4. **The Tide Mark** -- A final centered block: a single horizontal line drawn across the column at exactly the page's lowest point of saturation. Below it, a single date typed in mono: `2011.03.11`. No commentary. No link. The page ends. The grid is **strict, narrow, and ceremonial**. Layered-depth is achieved purely through parallax (foreground bubbles drift faster, background sky drifts slower, midground photographs are nearly stationary). There are no cards, no grids of cards, no statistics, no pricing tables, no team grids. There is one image per page, one paragraph per page, one breath per page. ## Typography and Palette **Typography (all available on Google Fonts):** - **Display / Page Titles**: **"Fraunces"** (Google Fonts) -- an expressive variable serif whose `wght`, `opsz`, and `SOFT` axes can all be animated. Used at clamp(2.4rem, 7.5vw, 5.6rem) with letter-spacing slightly tightened to -0.015em. The hero title `genpatsu` runs a slow CSS animation that oscillates `font-variation-settings: 'wght' 220 → 720, 'SOFT' 0 → 100, 'opsz' 144` over 12 seconds with `ease-in-out`, producing a breathing, wavering character that feels mournful rather than playful. Weight 300 SOFT 0 is the resting state; weight 700 SOFT 100 is the brief inhalation. This is the soul of the site -- one word, breathing. - **Body**: **"Source Serif 4"** (Google Fonts, variable) -- chosen for its calm, humanist, document-like presence. 18px on mobile, 19px on desktop, line-height 1.72, weight 400. Slightly increased optical size axis (`opsz` 30) to feel more like a printed brochure than a screen. - **Captions, dates, glossary fine print**: **"JetBrains Mono"** (Google Fonts) -- 12.5px, weight 400, letter-spacing 0.04em, color set at 55% opacity. The mono is reserved exclusively for *evidence*: dates, coordinates, technical labels, brochure section numbers like `02 / 09`. It carries the document's footnoted, archival character. - **Subtitles and secondary headings**: **"Fraunces"** at weight 250, italic axis lightly engaged (`SOFT` 50), at 1.25rem. Italics here echo the editorial italics of pamphlet captions. **Palette -- muted-vintage Frutiger Aero:** The palette takes canonical Frutiger Aero hues and runs them through a uniform desaturation filter (≈30% saturation drop) and a slight warm yellow cast, as if printed on long-stored paper. - `#c8d8d6` -- **Faded Pamphlet Sky**. The dominant background gradient stop. Once Vista's shipping cyan, now bled toward gray-green. - `#e9e2cf` -- **Storage-Yellowed Cream**. The other end of the page gradient. The color of brochure paper that has lived in a desk drawer since 2004. - `#7d96a3` -- **Dimmed Glass Blue**. The principal text color. Deep enough to read, soft enough to feel watery. - `#a8b89a` -- **Brochure Lawn**. A muted, almost hospital-green tone for the lower gradient stops, evoking the manicured grass that always appeared in front of Japanese power-plant promotional photography. - `#d6b591` -- **Silica-Gel Beige**. Used for highlights inside the glossy bubbles -- a warm, off-white that suggests aged plastic rather than fresh acrylic. - `#3a4750` -- **Magnetic-Tape Gray**. The emphasis color, used sparingly for the SVG flowing-curve glyphs and the final tide-mark line. Cool and slightly bluish. - `#b35a45` -- **Iron-Oxide Quiet**. Reserved for exactly one element: the 2011.03.11 date in the closing block. Appears nowhere else. The single warm wound on the page. Background gradients are always vertical, always mixing `#c8d8d6 → #e9e2cf` with a 65% midpoint, optionally with a subtle 5% noise overlay (an SVG `` filter at low frequency) to mimic paper grain. No pure white. No pure black. Maximum contrast on any text against any background must remain quietly readable but never crisp. ## Imagery and Motifs **Glossy Bubbles (Vintage Treatment)** -- The Frutiger Aero hallmark, reproduced honestly but desaturated. Implemented as pure CSS using nested radial gradients (one outer hue stop, one inner highlight, one bottom shadow stop), with `backdrop-filter: blur(8px)` for the larger ones. Each bubble carries a tiny crescent highlight at its 11 o'clock position in `#d6b591`. Bubbles never pop, never animate beyond gentle floating; they parallax-drift at 0.3, 0.5, and 0.8 scroll-speed multipliers. There are at most three bubbles per viewport and their `mix-blend-mode` is `multiply` against the brochure-paper grain so they look slightly dirtied. **Flowing Curves** -- A single SVG glyph appears between the image and the text on every brochure page. Each is a hand-drawn-feeling Bezier curve (drawn with `stroke: #3a4750`, `stroke-width: 1.25`, `fill: none`, `stroke-linecap: round`) that loops or doubles back on itself once. The curve is *path-draw* animated on scroll-into-view: `stroke-dasharray` and `stroke-dashoffset` are used to draw the curve over 1.6 seconds with `ease-out`. Each curve is slightly different: one resembles a steam plume, one a fish, one a power line slack between poles, one a broken cooling-tower silhouette laid on its side. Visitors can recognize the shapes only on second viewing. **Photography (the Treated Stock-Photo Layer)** -- Each brochure page has one centered photograph at clamp(280px, 50vw, 520px) wide, framed with a 1px inner border of `#7d96a3` at 30% opacity. Photos are sourced from the visual vocabulary of mid-2000s Japanese utility-company PR materials: a child's hand on a pebble, a pear on a wooden table, a power-line cresting a hill at golden hour, an empty corridor in a community hall, a vending machine in a parking lot. Each photograph is treated identically with a CSS filter stack: `saturate(0.62) sepia(0.08) contrast(0.92) brightness(0.97)`, plus a thin SVG noise overlay at 8% opacity. The result is uniform: every image looks like it was scanned from the same brochure on the same day. No image carries a caption -- only its date in JetBrains Mono below it (e.g., `c. 2003`, `c. 2007`, `unknown`). **Pamphlet Pictograms** -- A small set of three custom SVG pictograms in the glyph dictionary of 2000s public-information design (the visual cousin of train station signage): a leaf, a water droplet, a small house with a single window. These appear at 24px size next to glossary chips. They are drawn with `stroke-width: 1.5` rather than filled, to feel like xerox-faded line art. **The Off-Key Element** -- One element per viewport is deliberately, quietly wrong: a bubble whose highlight is on the wrong side, a leaf rotated 3 degrees too far, a horizon line that does not quite line up with the photograph below it. Never named, never explained. Discovery is the entire interaction. ## Prompts for Implementation **Full-screen narrative experience as the only mode.** This is a single document read top-to-bottom. There is no menu, no nav bar, no sticky header, no skip link, no back-to-top button, no footer with social icons. The only navigational affordance is scrolling. The visitor either makes it to the tide-mark or does not. **Implement the parallax with `transform: translate3d`** on three named layers via a single `requestAnimationFrame` scroll handler -- not via the deprecated `background-attachment: fixed`, and not via 90 different scroll listeners. The three layers and their multipliers: - `.layer-sky` (background gradient + grain) -- 0.15 - `.layer-bubbles` (glossy circles + drifting motes) -- 0.45 - `.layer-content` (centered text + photographs + flowing-curve SVGs) -- 1.0 (no parallax; reads naturally) Use `IntersectionObserver` to trigger: 1. The `path-draw` animation on each flowing-curve SVG when its containing brochure page enters the viewport. 2. A subtle 1.2-second `opacity: 0 → 1` and `translateY(20px) → 0` reveal for body paragraphs. 3. A delayed (300ms) ease-in for photographs, so the reader's eye lands on the curve glyph first, then the image, then the text -- the brochure reading order. **The breathing hero title.** Implement `genpatsu` in Fraunces with CSS animation on `font-variation-settings`. The animation must run continuously on the hero word only. Use 12-second `ease-in-out`. Do not add cursor-following, no hover, no click. The word breathes regardless of the visitor. **Bubble physics.** Bubbles drift slowly upward at ≈8px/second using `@keyframes` (`translateY(-100vh)` over 90 seconds, then loop with reset), combined with a horizontal sine-wave drift (`@keyframes` on `translateX` between -8px and 8px, period 6 seconds). Combine via nested wrappers, do not animate two transforms on the same element. **Audio is forbidden.** The piece is silent. **No CTAs anywhere.** No "Subscribe," no "Learn more," no buttons. The single closing element is a date in iron-oxide red. If the visitor wishes to know more, they will search for the word themselves. **No grid layouts (`display: grid` with multiple columns) anywhere on the page.** The entire site is `flex-direction: column` with `align-items: center`. Use of `grid` is permitted only within an individual SVG glyph's internal layout, never for page composition. **No pricing, no statistics, no charts, no team photos, no testimonials, no logos.** This is not a product page. It is a record. **Storytelling mandate.** The body text on the nine brochure pages is a single continuous prose poem -- a 2,200-word reflection on the way an aesthetic outlives the world it was made to advertise. Each page contains one paragraph (≈230 words). The implementer should treat the prose as load-bearing; do not pad it, do not bullet-point it, do not add subheadings within a brochure page. One image, one curve, one paragraph, one breath. **The off-key elements** must be implemented but never highlighted in code comments. The visitor finds them or does not. ## Uniqueness Notes **Three or more concrete differentiators from every other design in this batch:** 1. **Frutiger Aero in mourning is not "frutiger-aero" as canonically rendered.** Of the 1% of designs in the registry tagged with frutiger-aero, all read it forward -- glossy, optimistic, fresh. This site is the *first to render the aesthetic in its decayed state*: the desaturation filter, the storage-yellowed paper, the bubbles with `mix-blend-mode: multiply` against grain. This is a Frutiger Aero brochure pulled from a flooded basement, not Frutiger Aero rebooted as a design trend. 2. **The breathing variable-type hero word.** A single word (`genpatsu`) breathes on `font-variation-settings` over a 12-second loop using Fraunces' `wght` and `SOFT` axes. The frequency analysis shows expressive-variable typography is at 0% in the registry; this is the canonical implementation. The word is also the entire title -- there is no logotype or branding mark, just the word, breathing. 3. **A strictly centered, single-column ceremonial layout.** The frequency report shows centered at 43% (saturated) but virtually all of those instances combine centering with hero-dominant card grids or asymmetric flourishes below the fold. This site refuses any deviation from the center axis from first pixel to last. The 720px column never moves, never splits, never breaks. The closest historical reference is the Japanese mid-2000s corporate-brochure spine. 4. **Flowing-curves motif (1% in registry) implemented as nine path-drawn SVG glyphs that secretly trace silhouettes of the subject** (steam plume, fish, slack power line, broken cooling tower). Each curve is hand-drawn-feeling, animated on scroll-in via `stroke-dashoffset`. No other design uses path-drawing as iconographic camouflage. 5. **Muted-vintage palette (1% in registry) applied via a single uniform desaturation pass** to the canonical Frutiger Aero hue set -- not a vintage palette chosen freshly, but a vintage *processing* of an inherently un-vintage palette. The conceptual move (palette-as-decay-filter rather than palette-as-choice) is unique. 6. **Raw-authentic tone (1% in registry) without raw-authentic visual grammar.** Most raw-authentic designs lean brutalist, exposed-grid, low-fidelity. This site is raw-authentic *via composure*: the rawness is in the refusal to editorialize, the silence between paragraphs, the iron-oxide date that appears once and is not explained. Authenticity is achieved through restraint, not roughness. 7. **No CTAs, no nav, no pricing, no statistics, no cards, no testimonials, no team grid, no logo strip, no hero buttons, no footer links.** The frequency analysis shows card-grid at 45% saturation and bento-box at 10% -- this site contains zero card layouts and zero grid compositions. 8. **The off-key element discipline.** Every viewport contains exactly one deliberately-wrong element (rotated leaf, mirrored highlight, misaligned horizon). This is documented in the design but never surfaced in comments or hover text in implementation. A meta-pattern of quiet wrongness as a way of carrying unease through an otherwise calm page. **Chosen seed (from assignment):** - aesthetic: **frutiger-aero** (registry: 1% -- preferred / underused) - layout: **centered** (registry: 43% -- saturated, but used here in its strictest, most ceremonial form, refusing the typical centered-plus-cards composition) - typography: **expressive-variable** (registry: 0% -- preferred / underused; this is the canonical instance) - palette: **muted-vintage** (registry: 1% -- preferred / underused) - patterns: **parallax** (registry: 33% -- common; used here only with three named layers and zero scroll-jacking) - imagery: **photography** (registry: 45% -- saturated, but used here with a uniform CSS filter-stack treatment that effectively makes every image look like the same scanned brochure, which no other photography-tagged site does) - motifs: **flowing-curves** (registry: 1% -- preferred / underused) - tone: **raw-authentic** (registry: 1% -- preferred / underused) **Avoided patterns from frequency analysis:** - card-grid (45% -- saturated): zero card layouts on this site. - gradient palette (46% -- saturated): used only as a single quiet vertical sky-to-paper gradient, never multi-stop or chromatic. - mono typography (44% -- saturated): mono is restricted exclusively to dates, glossary fine print, and section numbers (≤2% of total type by area). - mysterious-moody tone (27% -- saturated): explicitly avoided; the tone is documentary and raw-authentic, not gothic. - corporate aesthetic (42% -- saturated): explicitly subverted -- the design impersonates 2000s Japanese corporate brochure language only to grieve it. - scroll-triggered patterns (43% -- saturated): used minimally, only for path-draw and one fade-up; no scroll hijacking, no pinned sections, no horizontal-on-scroll reveals.