# Design Language for genpatsu.io ## Aesthetics and Tone **genpatsu** (原発) is the Japanese word for nuclear power plant — atoms split in stillness, releasing energy that reshapes landscapes quietly, irreversibly. The site embodies a fundamental paradox: **enormous latent energy expressed through extreme restraint**. This is wabi-sabi applied to the atomic age — the cracked glaze on a ceramic bowl that once held reactor coolant, the oxidized patina on decommissioned instrumentation, the beauty of entropy slowing to a halt. The visual language is drawn from three intersecting sources: 1. **Mingei craft aesthetics** — handmade, imperfect, material-honest objects from rural Japan. The irregularity of thrown pottery, the wabi quality of things used past their prime. 2. **Industrial archaeology** — the specific ochre-rust of weathered concrete, the grey-green of oxidized copper piping, the bleached-bone white of instrument panels that faced decades of UV through skylights. 3. **Underwater geology** — forms glimpsed through reactor cooling pools (Cherenkov blue) or industrial settling ponds. Mineral deposits that look like frozen breath. **Mood:** Contemplative. Not melancholy — *composed*. The site does not mourn or warn. It witnesses. A visitor should feel the same stillness they feel standing at the edge of a very deep, perfectly calm lake. **Tone:** Professional without formality. Authoritative without performance. The prose speaks the way a ceramicist explains how a kiln works — with precision, with love for the material, without jargon. --- ## Layout Motifs and Structure **Sparse vertical spine with asymmetric breathing room.** The canonical wabi-sabi composition: a single dominant element placed slightly off-center (30% from left on desktop, full-width on mobile), surrounded by deliberate, generous negative space. Not Swiss minimalism (which is geometric and confident) — wabi minimalism (which is organic and unsettled in a comfortable way). **Five viewport-height panels, each a separate contemplation.** No infinite scroll, no masonry grid, no card-deck. Each panel is a single thought: - Panel 1 (water): Full-viewport water-bubble animation as the only element — no hero copy, just the domain name in 14px geometric-sans at bottom-left and an ambient sound of deep water (optional). Entry is the atmosphere itself. - Panel 2 (context): One column of text (max-width 540px) pinned left with 40vw of empty space to the right. Body copy introduces the domain's purpose through a material metaphor — atoms, ceramics, cooling water. - Panel 3 (float): A collection of floating-element clusters — irregularly spaced, slightly different sizes, no uniform grid — that drift with independent parallax offsets at very low velocity (0.03–0.08x scroll rate, not the 0.5x cliché). - Panel 4 (depth): A single full-bleed image panel (or CSS-only ceramic-texture treatment) with one sentence overlaid, white on earth-tone. - Panel 5 (close): Sparse contact/colophon — two lines of text, one link, no more. **Grid:** No conventional grid. Spatial decisions made by eye, anchored to a 12px baseline grid only. Margins vary intentionally — 8vw on left, 12vw on right, creating the slightly unbalanced feel of handmade composition. **Navigation:** Single-line, bottom-fixed, horizontal list of 4–5 anchors in 11px uppercase geometric-sans, `letter-spacing: 0.18em`. No hamburger, no sticky header, no dropdown. The nav appears only when the user pauses (scroll velocity drops below threshold) and fades after 2.4 seconds. This embodies minimal-navigation: the wayfinding exists without dominating. --- ## Typography and Palette **Typography (all Google Fonts, verified):** - **Primary UI + Navigation:** [DM Sans](https://fonts.google.com/specimen/DM+Sans), weight 300, at 11–13px for navigation items and labels. Low-contrast, clean, slightly warm optical quality that complements organic aesthetics without the coldness of pure geometric grotesque. `letter-spacing: 0.16em`, `text-transform: uppercase` for nav only. - **Body Copy:** [DM Sans](https://fonts.google.com/specimen/DM+Sans), weight 400, at 16–17px, `line-height: 1.85`. Long-form text reads as steady and unhurried. No italic in body copy — italics reserved for proper Japanese terms used inline (e.g., *wabi*, *genpatsu*). - **Display / Section Titles:** [Jost](https://fonts.google.com/specimen/Jost), weight 200, at clamp(2.4rem, 5vw, 5.2rem). Jost is a geometric-sans revival of Futura with softer terminals and a more humanist `a` — it carries the clarity of industrial signage with the warmth the design requires. No decorative headlines. Display type is rare — used maximum twice per page, acting as structural punctuation rather than announcement. - **Japanese Terms (inline):** [Noto Serif JP](https://fonts.google.com/noto/specimen/Noto+Serif+JP), weight 300, inline with body copy when Japanese characters appear. This is the only serif element, chosen for its Japanese-language optical fidelity and its gentle contrast with DM Sans. **Colour Palette:** - `--deep-water`: `#1c2b2d` — near-black with a teal undertone. The colour of Cherenkov radiation light absorbed by deep cooling-pool water. Primary background. - `--ceramic-bone`: `#d8cfc0` — the white of bisque-fired stoneware, slightly warm. Primary text on dark backgrounds; also used for large display type. - `--ochre-rust`: `#a0704a` — weathered concrete oxidation, the rust that forms on reinforced infrastructure over decades. Used for accent lines, hover states, and the minimal nav indicator. - `--ash-sage`: `#8a9e8c` — the grey-green of oxidised copper embedded in concrete, lichen on stone. Used sparingly for secondary text and decorative SVG elements. - `--mineral-pale`: `#e8e2d5` — the lightest earth tone, almost cream, for the Panel 2 text background if a wash is needed and for the colophon panel. - `--void`: `#0d1516` — pure background for the water-bubble animation panel, absolute dark. --- ## Imagery and Motifs **Water bubbles as the primary generative visual element.** Unlike the 4% of designs that label water-bubbles as a motif decoratively, this site makes the bubble system load-bearing: it IS the hero. The animation is a real-time CSS/JS generative system producing 40–80 semi-transparent ellipses of varying sizes (8px–120px diameter), each with: - Opacity: 0.04–0.18 (extremely faint — they are suggestions, not declarations) - Upward drift: 0.3–1.2px/frame, randomised per bubble - Slight horizontal wobble: `sin(time * 0.8 + offset) * 2px` - Colour drawn from a small palette of `--deep-water`, `--ash-sage`, and pure white at micro-opacity - No sharp edges: `border-radius: 50–65%`, slightly randomised per bubble for an organic, not-quite-circular form The bubble system establishes the tone for the entire page: things rising slowly, faintly visible, present without insisting. **Floating elements (Panel 3):** A set of 6–9 SVG objects — abstract forms inspired by ceramic cross-sections, mineral deposits, and reactor component schematics — positioned with `position: fixed` and driven by independent scroll parallax (each has a different `translateY` coefficient in the 0.03–0.08 range). Objects are drawn in single-line weight (1.5px stroke, `--ceramic-bone` on dark, `--deep-water` on light), no fills except for one translucent area fill at 6% opacity on the largest element. **Earth-tone texture treatment:** No photographic backgrounds. Instead, CSS `background-image: radial-gradient(...)` + `noise` SVG filter applied to Panel 4 to create the sensation of handmade paper or burnished clay — specifically a 3% noise grain layered over a radial gradient from `#b07d5a` (darker ochre) to `#d4b896` (warm sand). This is the only moment of warmth in the palette, deliberately isolated for contrast with the surrounding cool-dark panels. **No photography. No stock imagery. No icon libraries.** Every visual element is either generative (bubbles), hand-drawn SVG (floating elements), or pure CSS composition (textures). This places the design in the 0% category for photographic backgrounds. --- ## Prompts for Implementation **The narrative arc.** A visitor arrives at genpatsu.io and enters a cooling pool. Not a dangerous one — an archaeological one. The reactor shut down decades ago. The water is perfectly still except for micro-turbulence from a deep circulation pump still running on residual heat. The visitor drifts through five chambers of the decommissioned plant: the pool, the documentation room, the component storage hall, the observation level, and the exit corridor. Each panel is one chamber. **Panel 1 implementation.** Full-viewport `#0d1516` background. Water-bubble JS system running immediately on load — no loading screen, no transition. Domain name `genpatsu.io` in DM Sans 300, 11px, `letter-spacing: 0.22em`, `color: #d8cfc0`, positioned `bottom: 32px; left: 40px`. No other text. No CTA. No scroll indicator (the bubbles rising is the scroll invitation). The bubble system should use `requestAnimationFrame`, canvas or pure CSS `@keyframes`, no dependency on third-party animation libraries. **Parallax implementation note.** The seed includes `parallax` but the frequency report shows parallax at 90% — the most overused pattern in the entire registry. Therefore: do NOT implement parallax as the standard `background-attachment: fixed` hero treatment or as a 0.5x scroll-offset banner. Instead, implement it exclusively as micro-drift on floating SVG elements at very low velocity (0.03–0.08x) and as the bubble system's independent upward drift. Parallax becomes texture, not spectacle. **Fade-in scroll transitions.** Each panel enters via `opacity: 0 → 1` over 600ms with `ease-out` as the panel enters the viewport. No `transform: translateY` (too kinetic for this aesthetic). Pure opacity. **The bottom navigation.** Implement as `position: fixed; bottom: 0; left: 0; right: 0; height: 48px`, `background: transparent`. Items: `About`, `Work`, `Contact`, `Journal` — in DM Sans 300, 11px, `letter-spacing: 0.18em`, `text-transform: uppercase`, colour `--ceramic-bone` at 55% opacity normally, 100% on hover. Appears on scroll-pause (JS scroll velocity detector: if `|Δscroll| < 2px` for 400ms, show nav). Auto-fades after 2.4s. No animation on the nav itself — just `opacity` transition at `0.3s ease`. **Panel 3 floating elements.** Use `IntersectionObserver` to trigger individual element entrance as the panel scrolls into view. Each SVG object: `animation: float-drift 8s–14s ease-in-out infinite alternate` with randomised duration and delay per element. Combined with low-velocity scroll parallax. The elements should feel like objects in a very slow current — not bouncing, not spinning, barely moving. **Avoid:** hero CTAs, pricing tables, stat grids, feature carousels, testimonial sliders, sticky headers with logos, hamburger menus, modal overlays, notification banners, cookie consent UI (style it inline if required), countdown timers, social proof sections, progress bars. **Implement:** silence, space, depth, slow motion, the beauty of things that have been used and set down carefully. --- ## Uniqueness Notes 1. **Parallax at 90% frequency — deliberately subverted.** The planned seed includes `parallax` as an effect, but this design refuses the standard implementation (hero background offset at 0.5x scroll, which accounts for the vast majority of that 90%). Instead, parallax is employed as micro-drift on SVG floaters at 0.03–0.08x — so slow it registers as ambient atmosphere rather than effect. This inverts the most overused pattern in the registry into something that reads as its opposite: stillness. 2. **Water-bubbles as structural hero, not decoration.** The frequency report shows `water-bubbles` at 4%. In those designs, water imagery is typically a background texture or a section accent. Here the bubble animation IS the first panel — the site opens with no text, no navigation visible, only rising micro-opaque ellipses against void. No other design in the registry uses a generative particle system as its sole hero element. 3. **Wabi-sabi applied to industrial/nuclear domain semantics.** Wabi-sabi appears in 4% of designs, almost always in craft, natural, or wellness contexts. Applying the aesthetic to the literal meaning of the domain (nuclear power infrastructure) — treating reactor components, weathered concrete, and cooling-pool water as the material vocabulary of imperfect beauty — is a reading not present in any other design. The palette (`--deep-water #1c2b2d`, `--ochre-rust #a0704a`) is derived directly from industrial archaeology, not from forest or pottery aesthetics typically associated with wabi-sabi. 4. **Disappearing navigation as philosophy.** Minimal-navigation at 4% typically means "fewer nav items" or "a simple header." This design implements navigation that is invisible by default and materialises only when the user is at rest — encoding the wabi principle of *mottainai* (nothing wasted) into the UX pattern. The nav exists only when needed, fades when not. No other referenced design uses scroll-velocity-gated navigation visibility. 5. **Seed:** aesthetic: wabi-sabi, layout: minimal-navigation, typography: geometric-sans, palette: earth-tones, patterns: parallax, imagery: water-bubbles, motifs: floating-elements, tone: professional 6. **Avoided patterns (high frequency):** parallax as hero-background (90%), watercolor texture (10%), card-grid layouts (7%), hero-CTA composition (implicit in most designs), photography backgrounds (85% per prior analysis).