# Design Language for genpatsu.quest ## Aesthetics and Tone genpatsu.quest takes a deliberately disarming approach to its loaded Japanese namesake (原発, "nuclear power plant") and re-frames the whole site as **a fictional warm-water aquarium that lives inside a decommissioned reactor's cooling pond** -- a quest to befriend the strange, golden-glowing tropical fish that have made the turbine hall their reef. The aesthetic is **graffiti-meets-honeyed-aquarium**: spray-painted tags, hand-drawn marker squiggles, and bubble letters bloom across milky honey-colored glass panels, while schools of cartoon angelfish, butterfly fish and clownfish drift across the page in slow, syrupy currents. Nothing about the site reads as cold, sterile, or industrial -- the visitor lands in a place that feels like a beach-shack ramen counter that happens to share a wall with a giant viewing window into a warm reactor pool. The mood is **warm, inviting, slightly mischievous, and a little hand-painted**. The palette is honeyed neutrals -- think dripping wildflower honey held up to a sunset window -- punctuated by the electric coral, lemon, and turquoise of the reef's residents. Edges are wobbly, brush-marker thick, and colored with halftone dot textures that recall both 90s zines and Ghibli backgrounds. There is intentional friendly imperfection: every "h" in the wordmark has a slightly different baseline, every glass panel has a slightly different curl at one corner, every fish is a little dented as if drawn quickly with a fat Posca pen. Tonally, this is the visual equivalent of a friendly tour guide who hands you a popsicle the moment you walk in and tells you not to worry about the geiger counter on the counter -- it's just for show, the fish are friendly, the water is the perfect temperature for swimming, please feed them only the candied jellies in the bowl. Humor is dry, warmth is genuine, the lore is absurd, and every interaction rewards curiosity rather than urgency. ## Layout Motifs and Structure The composition follows an **editorial-flow** spine borrowed from large-format Japanese travel zines (think *POPEYE* or *BRUTUS* magazine spreads) -- left-aligned column rivers, generous gutters, oversized pull-quotes, and asymmetric photo wells that break the column at unpredictable intervals. There is no card grid, no centered hero with three-feature columns, no bento. The reading rhythm is more like turning the pages of an oversized illustrated children's encyclopedia about coral reefs. **Vertical structure (top to bottom):** - **The Front Gate (viewport 1):** A wide, slightly sun-faded photo-illustration of the cooling-pond viewing window, framed by graffiti tags reading "GENPATSU QUEST," "FEED THE FISH," and a hand-drawn arrow pointing down. The window glass is the page's first glassmorphic card -- it doesn't sit on top of content, it *is* the content, with the title typeset over its frosted surface and three or four fish slowly swimming behind it. A single squiggle-underlined line of body copy sits below. - **The Tour Map (viewport 2-3):** An editorial spread with a left-rail "field guide" of fish species (each entry is a hand-drawn portrait + a 2-line description in tight justified columns) and a right-rail painterly map of the facility. The map is intentionally inaccurate, with cartoon labels ("the warm corner," "the bubble organ," "DO NOT FEED THE EELS"). - **The Honey Pool Lounge (viewport 4):** A long, horizontally-running glassmorphic banner containing a single oversized rounded headline and one drifting school of fish. The text wraps around the school in a custom shape using `shape-outside` on an SVG path, so the body copy itself appears to part for the fish. - **The Lore Chambers (viewport 5-7):** Three editorial chapters, each opening with a full-bleed splash of a single graffiti motif (a bubble letter sigil, a marker scribble, a koi tag) and continuing into magazine-style two-column body. Pull-quotes are huge, hand-lettered, and tilted 2-4 degrees. - **The Visitor's Logbook (viewport 8):** A scrapbook-style end zone with overlapping index cards taped at angles, each holding a fragment of imagined visitor mail. Each card is a soft glassmorphic panel with a torn-paper edge clip-path. - **The Drift-Off Footer:** No CTAs, no newsletter capture, no pricing. Just a slow, looping ambient strip of fish drifting from right to left into a sunset gradient, with the wordmark dissolving into a final spray-painted heart. **Spatial language:** generous left margins (~12-18% on desktop), a baseline grid of 8px, and a "honey gutter" between sections of `clamp(4rem, 9vw, 9rem)`. Glassmorphic cards float at 8-14px above their surroundings and never align to a strict grid -- each is rotated `random(-2deg, 2deg)` and offset slightly from the column it belongs to. There is no fixed nav; instead, a hand-drawn anchor menu lives as a sticky scribble in the top-left corner, looking like it was tagged onto the inside of the cooling-pond window with a paint pen. ## Typography and Palette **Typography (all from Google Fonts):** - **Display / Headlines:** "Fredoka" -- a playful-rounded sans with chunky terminals and a cheerful, almost gummy vertical rhythm. Used at huge sizes -- `clamp(3rem, 11vw, 11rem)` -- with `font-weight: 600` for primary titles and `font-weight: 400` for secondary headings. Letter-spacing is slightly negative (`-0.02em`) so the rounded forms cluster like jellies in a jar. Per-letter spans allow for a subtle "wobble" animation on hover where each glyph rotates `random(-3deg, 3deg)` and re-settles with a tiny spring bounce. - **Tagged Accents:** "Permanent Marker" -- used sparingly for graffiti overlays, anchor menu items, hand-drawn arrows-as-text, and the "FEED THE FISH" stickers. Tilted at -4 to +6 degrees, often with a slight `text-shadow` of the same color offset 2px down-left to feel like wet paint that hasn't quite dried. - **Editorial Body:** "Nunito" at 17-18px with `line-height: 1.7` and slightly generous tracking (`letter-spacing: 0.005em`). Nunito's softly rounded terminals echo Fredoka while remaining fully readable in long passages -- it's the friendly cousin showing the children's-book headline how to behave at length. - **Field-Guide Labels and Captions:** "Caveat" -- a casual handwritten script for fish species names, map labels, and torn-paper note captions. Used at 18-22px, never longer than a phrase. - **Numerics and Lore Tags:** "Fraunces" italic -- a flared-serif used only for chapter numbers, footnote-style asides, and the occasional pull-quote attribution. Brings a tiny bit of editorial authority that contrasts nicely with the otherwise rounded ecosystem. **Palette -- Honeyed Neutral with Reef Highlights:** | Role | Hex | Usage | |---|---|---| | Honey Cream (page) | `#f6e9c7` | Primary background -- sun-warmed honey held to light | | Amber Drip | `#e8b75a` | Secondary surface, glass tints, headline highlights | | Burnt Honey | `#b8762a` | Body text on cream, deep glass borders | | Ink Walnut | `#3a2a1a` | Highest-contrast text, marker outlines | | Frosted Glass Tint | `rgba(255, 247, 220, 0.42)` | Glassmorphic card fills (over honey base) | | Reef Coral | `#ff7a59` | Clownfish, primary tags, hover accents | | Lemon Pop | `#ffd95e` | Bubble letter fills, secondary fish | | Turquoise Lagoon | `#4ec9c0` | Pond highlights, school of fish accent, link underlines | | Mango Marker | `#f59429` | Graffiti spray secondary, scribble underlines | | Soft Sunset Pink | `#f4a8a2` | Drift-off gradient, occasional fish bellies | The palette never goes truly white or truly black -- every "white" is a creamy honey-toned `#fbf2dc`, every "black" is a soft walnut ink. Glassmorphic surfaces are always a tinted honey-cream with `backdrop-filter: blur(14px) saturate(140%)` and a 1px inner border in `rgba(184, 118, 42, 0.25)`. ## Imagery and Motifs **Core Visual Motif: The Tropical Reef Inside a Reactor.** Across the entire site, schools of stylized tropical fish drift through the page -- not as a single hero animation but as a continuous ambient ecosystem. Five recurring species are illustrated in the same fat-marker style: 1. **Honey Tang** -- the mascot, a pudgy yellow tang with a slightly crooked smile. 2. **Reactor Clown** -- an orange-and-cream clownfish with a tiny graffiti tag on its tail. 3. **Lagoon Angelfish** -- turquoise with lemon stripes, drifts in vertical pairs. 4. **Pop Butterfly** -- coral pink, drifts in schools of 5-7. 5. **Eel-of-Many-Concerns** -- a long, friendly eel that occasionally pokes out from behind a glass card and looks at the reader. All fish are SVG, hand-traced from rough Posca-pen sketches and exported with `stroke-linejoin: round` and a slight wobble-offset baked into each path. They are animated along bezier paths via SMIL or anime.js, drifting at varying speeds (40-90 seconds per loop) with subtle vertical bob. **Glassmorphic Cards as Aquarium Panels.** Every glassmorphic surface is treated as a viewing pane *into* the reef rather than a flat card on top of the page. Each card has: - A honey-cream backdrop blur with a saturating tint. - A 1px inner border on the top-left and 2px inner border on the bottom-right (mismatched, like a hand-cut acrylic panel). - A tiny "GENPATSU AQUARIUM" stamp in the bottom corner, like a tour-souvenir mark, in `Permanent Marker` at 9px. - An optional `before` pseudo-element with a slow water-caustic SVG noise filter shimmering across the surface. - One or two fish that swim *behind* the card (lower z-index) and sometimes *in front* (higher z-index), so the card genuinely feels like a window. **Graffiti Layer.** Layered on top of (and sometimes beneath) the glass, hand-drawn graffiti elements decorate every section: bubble-letter chapter numbers in lemon and coral, marker scribbles underlining important phrases, paint-drip terminals on bottom edges of glass panels, taped-on "stickers" with phrases like "WARM ON PURPOSE," "PLEASE NO FLASH," and "EEL APPROVED." All graffiti is rendered as inline SVG with hand-drawn path data, never as pixel images, so it scales and animates cleanly. A subtle CSS `filter: contrast(1.1) saturate(1.15)` over the entire page gives every color the slightly-faded look of risograph print. **Texture Layer.** The page background is a CSS-tiled honey-paper texture (a small SVG noise pattern at low opacity, plus a faint diagonal warp via `feTurbulence`). Every glass panel sits over this texture, so honey grain bleeds through their tints. Section dividers are hand-drawn squiggle SVGs, never straight lines. **Decorative Stickers and Stamps.** Scattered through the spreads: a souvenir passport stamp from "the visitor's center," a sticker shaped like a fish with the tagline "I FED THE EEL AND LIVED," a koi-shaped graffiti tag near the footer, a tiny taped Polaroid of the cooling-pond window with the corner peeling up. ## Prompts for Implementation **Build a single-page narrative experience -- no multi-page nav, no marketing-funnel CTAs, no pricing, no stat-grids, no testimonial blocks.** The site is a tour through the imagined aquarium, not a brochure for it. Visitors arrive, drift through the spreads at their own pace, and leave delighted. **Storytelling Sequence:** 1. The page opens with the cooling-pond viewing window and a slow drift of three fish across the title. The title characters wobble individually as if seen through warm water (CSS `transform` with per-letter delays). 2. As the user scrolls, the `editorial-flow` columns reveal themselves with a gentle stagger -- but importantly, NOT a typical scroll-triggered fade. Instead, each glass card grows slightly (`scale-hover` style triggered on intersection: `transform: scale(0.92)` -> `scale(1)` over 700ms with `cubic-bezier(0.34, 1.56, 0.64, 1)` springiness). 3. Every glassmorphic card rewards a hover with a tiny `scale(1.025)` and a 2-degree counter-rotation, plus a subtle deepening of its inner border color. Fish behind the card briefly turn toward the cursor. 4. Pull-quotes in the lore chambers animate their hand-lettered underline as a `path-draw-svg` stroke when they enter view -- but slowly, like honey being pulled in a string, easing over 1.4 seconds. 5. The sticky anchor menu in the top-left is a hand-drawn marker scribble; clicking a section name doesn't smooth-scroll, it *paint-drips* -- a small honey droplet animates from the menu down to the target section while the page scrolls. 6. The drift-off footer is a continuous infinite scroll of fish, with the wordmark dissolving by per-letter `filter: blur()` into a sunset gradient. **Interaction Details:** - **Cursor:** A small custom cursor that is a fat marker dot in `Reef Coral`, leaving a temporary 200ms trailing smear on its path -- as if the visitor is drawing on glass with their finger. - **Fish Curiosity:** Whenever the cursor is idle for 4+ seconds, the nearest fish in any visible school slowly turns to face the cursor for a beat before resuming its drift. - **Easter Egg:** Triple-clicking the Honey Tang mascot in the header replaces the entire palette with a "night-mode" reef variant for 8 seconds (deep teal background, bioluminescent fish), then fades back to honey. - **Sound (optional, off by default):** A small toggle in the footer enables a quiet looping ambient track of warm water bubbles and distant koto strings. **CSS Hints:** - Use CSS Custom Properties for the entire palette and reference them everywhere; never hardcode colors. - Use `clip-path: polygon()` with slightly randomized vertices for torn-paper card edges. - All hand-drawn elements live in a single inline SVG sprite at the top of the body and are referenced via `` -- this keeps the DOM clean and the file small. - Glassmorphic cards: `background: var(--frosted-glass-tint); backdrop-filter: blur(14px) saturate(140%); border-image-source: url(#wobble-edge); border-image-slice: 12;` for the wobble border effect. - Avoid `border-radius: 50%` for fish eyes -- use slight ovals (`border-radius: 48% 52% 50% 50%`) so they feel hand-drawn. **What NOT to build:** no carousel, no modal, no sticky CTA bar, no "as seen on" logo strip, no comparison tables, no FAQ accordion (replace with a hand-drawn marginalia layer if Q&A is needed), no card-grid feature blocks, no centered hero with three columns underneath. The whole point of editorial-flow is that the page reads like a magazine spread, not a SaaS landing page. ## Uniqueness Notes **Differentiators from other designs in the portfolio:** 1. **Honey-aquarium reframe of a loaded namesake.** Most designs that touch industrial/political subjects either lean dark/serious or go full satire. genpatsu.quest does neither -- it builds a fictional warm aquarium inside the namesake and lets the dissonance between the word "genpatsu" and the cheerful tropical-fish ecosystem do the work. No other site in the portfolio uses "fictional ecosystem inside a charged namesake" as its central conceit. 2. **Editorial-flow + glassmorphic-cards + graffiti is an unused combination.** Editorial-flow appears in only ~2% of designs, glassmorphic-cards in ~1%, and graffiti aesthetic is essentially unrepresented. Layering all three -- magazine-spread reading rhythm, frosted aquarium-window cards, and hand-drawn marker tags -- produces a visual register that does not exist elsewhere. 3. **Continuous ambient fish ecosystem instead of static imagery.** Rather than treating illustrations as decorative spot art, the fish are first-class persistent inhabitants of the page that drift, react to cursor idleness, and pass behind/in-front of glass cards. The page is alive in a way a typical glassmorphism design is not. 4. **Honeyed-neutral palette without going corporate or dopamine.** Honeyed-neutral is at ~2% in the portfolio, and most uses of "warm" palettes go either earthy (terracotta, ochre, sienna) or muted-vintage. genpatsu.quest pushes the warm palette into a bright, juicy honey range with reef-bright accents, which is closer to a Yuko Shimizu illustration than to any portfolio neighbor. 5. **Scale-hover + spring-easing as the dominant motion vocabulary, with no parallax or scroll-triggered reveals beyond a gentle stagger.** Scale-hover is at ~2% in the frequency report; parallax (~35%) and scroll-triggered (~46%) dominate the portfolio. genpatsu.quest deliberately rejects those in favor of springy hover-grow micro-interactions that feel like poking a jelly. 6. **Warm-inviting tone (~1% of designs) carried through every micro-copy beat.** Even decorative stickers ("FEED THE EEL AND LIVED," "WARM ON PURPOSE") carry the friendly-tour-guide voice. Most designs treat tone as a paragraph in a brief; here it is encoded in graffiti tags, sticker text, easter eggs, and cursor behavior. **Avoided patterns from frequency analysis:** no card-grid (48%), no centered hero (45%), no mono typography (47%), no parallax or scroll-triggered fade-reveals (35-46%), no photography imagery (48%), no gradient palette as primary (49%), no mysterious-moody tone (30%), no corporate aesthetic (45%). All of these are deliberately swapped for their opposites. **Chosen seed (from assignment):** aesthetic: graffiti, layout: editorial-flow, typography: playful-rounded, palette: honeyed-neutral, patterns: scale-hover, imagery: glassmorphic-cards, motifs: tropical-fish, tone: warm-inviting.