# Design Language for genpatsu.quest ## Aesthetics and Tone genpatsu.quest is **a horizontal corporate dossier published by the fictional Public Reactor Records Authority (PRRA), 2031 — except the dossier has been silently corrupted by the crystalline data-decay of the very reactors it catalogues.** The Japanese word *genpatsu* (原発) means "nuclear power plant"; the `.quest` suffix names the verb the dossier performs — a long, lateral, scrollable investigation across decommissioned cores, salt-loop test beds, fuel-cycle anomalies, and citizen review hearings. The site presents itself, on first impression, as the kind of immaculately controlled corporate-investor-relations microsite that an energy ministry might publish: thin sans-serif, full-bleed neutral panels, generous whitespace, signed footers, ISO-formatted dates, footnoted disclosures. Then, as the visitor begins to scroll horizontally, **the corporate veneer begins to crystallise** — quartz-shaped glitch artefacts grow out of the data, RGB channel splits creep into the photo plates, and a faint lattice of crystalline shards rises behind every sectional title, as though the document itself is slowly becoming the mineral it describes. The tone is **professional** (only 5% in the registry — actively claimed) and stays professional even as the glitch advances. There is no panic, no editorial outrage, no nuclear cheerleading; only the steady, slightly-too-calm cadence of a regulator who has filed too many reports to be surprised by anything anymore. This is the futurism of *quiet bureaucracy with a fracture in it* — the dossier knows it is being corrupted by its own subject matter, but it continues to file, paginate, sign, and seal because filing is what it knows how to do. The aesthetic is **corporate** (21%) **deliberately married to glitch-art imagery** (5%) and **crystalline motifs** (8%) — a triangulation that, per frequency analysis, has not been attempted at this combination. Corporate alone is generic; corporate plus glitch alone is journalism-school cliché; corporate plus crystalline alone reads as crypto-startup. The three together produce something specific: a *governmental crystal lattice*, a regulator's quarterly that has begun to grow geodes in its margins. The visitor moves rightward along this lattice the way a building inspector walks the perimeter of a containment dome, clipboard in hand, pausing at each shard to note the millimetre depth of the new fissure. The emotional grammar borrows from **three specific reference textures**: 1. The texture of **a 1998 Tokyo Electric Power Company shareholder report** translated cleanly into English — that particular flatness of language in which "anomalous neutron flux event" is rendered as "a deviation was observed and corrective action initiated." 2. The texture of **a corrupted JPEG of a containment-vessel cross-section**, the kind that compresses a structural diagram into rectangular RGB blocks of cyan and oxide-red, where the engineering survives the compression but acquires an unintended beauty. 3. The texture of **a single Iceland-spar calcite crystal placed on a printed dossier page**, refracting a specific paragraph into doubled type — the moment when a mineral object reorganises an institutional document just by sitting on it. Across all three: an institution that has chosen to present itself with composure, and a physical reality (radiation, decay, mineral growth, lattice corruption) that is not asking for permission to deform the presentation. ## Layout Motifs and Structure The site is **strictly horizontal-scroll** (8% in the registry — actively claimed, and pushed to its non-negotiable extreme: there is no vertical fallback, no mobile-stacked rescue, no "scroll down to continue"; the document is a horizontal ribbon and the visitor reads it the way one reads an emakimono Japanese picture scroll). Each viewport-width panel is one *plate* of the dossier, numbered in the top-left as `Plate 01 / 12 — REACTOR HALL B-2`, `Plate 02 / 12 — COOLING LOOP NORTH`, in the manner of an architectural survey drawn at 1:200. The horizontal ribbon is built on a **strict 12-plate ledger structure**, where every plate occupies exactly `100vw` and is separated from the next by a 1px crystalline seam — a hairline of `#7AA8C4` that, on hover, refracts into a thin RGB split (red 1px left, blue 1px right, green centred) before settling back. The seams are the *cleavage planes* of the document; at each one, the visitor can sense where the next crystal facet begins. Within each plate, the composition is governed by **a corporate-report grid of 12 columns and 8 rows**, with the following invariants: - **Top band (rows 1-2):** a thin blue-grey navigation rail showing the plate number, the dossier section, and a horizontal progress dial — a slim 4px-tall bar across the top of the viewport that fills as the visitor scrolls right, segmented into 12 ticks. - **Title block (rows 2-3, columns 1-5):** the plate title in Frutiger-clean weight 400, set in 48px, all-caps, letter-spacing 0.02em. Behind the title, a single hexagonal crystalline shard is rendered in flat `#1F3340` at 18% opacity, sized to be exactly the height of the cap-line of the title text — a subtle mineralisation of the headline. - **Body region (rows 3-7):** the actual dossier content — a single mid-size paragraph of professional prose, never more than 4 lines, set in Inter regular 17px on a 28px line-height, with hanging numerical footnote markers in the right margin (column 12). - **Specimen plate (rows 3-7, columns 7-12):** a large, dignified visual artefact — a containment-vessel cross-section, a fuel-pellet macro photograph, a coolant-loop schematic — presented as if it were a museum collection plate. This is where the **glitch-art imagery** lives: the artefact is rendered crisply at first, then, as the visitor crosses 60% of the plate's horizontal extent, a **localised glitch event** runs through the artefact (RGB channel split, 6-frame datamosh, then resolution). - **Bottom band (row 8):** a footer rail with the dossier serial number, the plate's revision date in ISO-8601, and a single-line quotation from a regulator, an engineer, or a former plant worker, set in italic Cormorant Garamond at 14px — the only serif on the page, and the only voice that breaks the corporate register. The transitions between plates are **not slides** — they are **seams in a crystal**. When the visitor crosses a seam, a **spring-pattern refraction event** triggers (the spring pattern is at 84% in the registry — saturated, but here it is reframed as the *physical recoil of a crystal lattice* being passed through, not as a UI flourish): the seam separates by 12px, a thin RGB rainbow appears between the two plates, and then the lattice springs closed with a slight overshoot (tension 280, friction 14, settle in ~620ms). The visitor *feels* each plate as a discrete crystal facet they have just clicked past. A **fixed left margin** (the only persistent UI element) holds a thin vertical rail labelled `PRRA / DOSSIER 2031-04 / 原発` set in tech-mono at 11px, rotated 90° counter-clockwise, anchored to the lower-left of the viewport at all times. This rail is the visitor's anchor to institutional identity as they drift through the lateral document; no matter how far right they scroll, the rail confirms they are still inside the same dossier. There is **no card grid**, **no centred hero**, **no full-bleed photographic header**, **no dashboard tiles**, and **no bento-box compartmentalisation**. The site is governed by the geometry of a horizontal scroll and the geometry of a crystal cleavage plane — two systems that, joined together, produce a layout that, per the frequency analysis, no other dossier in the registry has built. ## Typography and Palette **Type system (three Google Fonts, no others):** 1. **Inter** (variable, weights 300/400/500/600). The corporate body voice — the workhorse of dossier paragraphs, footnote markers, navigation rail labels, and ISO date stamps. Inter was chosen as the closest open Google-Fonts equivalent to Frutiger itself; the seed asks for **frutiger-clean** typography (4% in the registry — actively claimed), and Inter, set with 0.005em letter-spacing and a relaxed 1.65 line-height, achieves the Frutiger-family "humanist sans, slightly warm, perfectly legible at 14px" that defined the original 1976 Frutiger typeface. Plate titles use Inter at weight 400 in 48px all-caps with 0.02em letter-spacing — a deliberate refusal of bold weight, because a regulator's dossier whispers, it does not shout. 2. **Space Grotesk** (weights 400/500). Used exclusively for the **horizontal navigation rail, plate numbers, the persistent left margin tag, and any technical metadata** (serial numbers, revision codes, neutron-flux readouts). Space Grotesk's slightly squared geometry plays the role of the *technical-tabular monospace-adjacent* voice — it is the typeface of the meter, the gauge, the engineering label. 3. **Cormorant Garamond** (italic, weight 400). Used **once per plate, only**, for the single human voice quoted in the bottom rail. Cormorant's italic is the fragile, thin-stroked, sharply-cut serif that reads as *a hand-written marginal annotation a former plant worker pencilled into the margin of an institutional report*. The serif appears nowhere else on the site; its scarcity is its weight. **Palette — muted, eight shades, all referenced from real industrial materials:** - `#0F1620` — **Reactor-hall ink.** The deep blue-black of a containment-dome interior at low light. Used for body text on the lightest plates, and for the single hexagonal crystal-shard motif behind every plate title. - `#1F3340` — **Survey-blueprint navy.** The standard background of every odd-numbered plate. Carries the dossier's institutional gravitas; close to the colour of a 1960s engineering blueprint after 60 years of UV exposure. - `#3D6478` — **Cooling-loop slate.** A muted blue-grey used for the navigation rail, seam hairlines, and the thin 4px progress dial across the top of every plate. - `#7AA8C4` — **Cherenkov pale.** A desaturated, slightly-cooler blue evoking the soft glow of a spent-fuel pool seen through 8 metres of demineralised water. Used for the seam-refraction RGB-blue channel and for footnote markers. - `#C9CDB4` — **Concrete-shielding bone.** A muted warm off-white, the colour of weathered radiation-shielding concrete after four decades. The default plate background on every even-numbered plate; carries the body text in deep blue-black. - `#E8E2D0` — **Dossier paper.** The single lightest tone, used only for the title-page plate (Plate 01) and the index-page plate (Plate 12). The cream of an archival cover sheet that has aged in a filing cabinet for thirty years. - `#A8704C` — **Oxide-red.** The orange-brown of corroded zircaloy fuel-cladding samples preserved in regulatory archives. Used **only** for the RGB-red channel of the seam-refraction effect, and as the accent colour on the persistent left margin tag — a single warm note in an otherwise cool palette, signalling the *organic decay* inside the institutional frame. - `#5A7A4F` — **Calcite green.** A muted, slightly-grey green, the colour of Iceland-spar calcite crystals under a desk lamp. Used for the RGB-green channel of seam refraction, for the small crystal-shard background motifs that grow on titles, and for the underline that appears beneath the plate title when a seam spring-fires. The eight-colour set is **strictly muted** — no saturation above 32%, no value above 91%, no hue warmer than oxide-red. A regulator's dossier does not shout. Even the glitch artefacts use these eight colours and only these eight; the RGB channel splits during glitch events are constructed from `#A8704C` (red), `#5A7A4F` (green), and `#7AA8C4` (blue) — *the dossier's own palette, fragmented into its primaries*. This is the design's quiet structural joke: the corruption is not external to the document; the document is corrupting itself with its own ink. ## Imagery and Motifs **Primary imagery: glitch-art (5% in registry — actively claimed) executed within the corporate frame.** Each of the 12 plates carries one large *specimen artefact* — never a stock photograph, never a heroic landscape, never a smiling-engineer corporate-comp shot. The artefacts are: - A **technical cross-section** (containment vessel, pressure vessel, control-rod assembly, fuel-cycle loop), rendered as a flat vector engineering drawing in three of the eight palette colours — survey-blueprint navy lines on concrete-shielding bone, with cooling-loop slate annotations in tabular Space Grotesk. - A **macro photograph of an industrial sample** — a fuel pellet, a graphite moderator block, a piece of zircaloy cladding, a Geiger-counter face, a control-room dial — desaturated to fall inside the muted palette, then composited onto a Frutiger-clean white field with the dignity of a museum object plate. - A **geological specimen** — a single hexagonal calcite or quartz crystal, photographed from above on a piece of dossier paper, presented as the "third evidence" between the engineering drawing and the photograph. The crystal is the bridge between the institution and the glitch; it is the proof that the document is becoming the lattice it describes. Each of these specimens, on a triggered scroll-position event, undergoes a **localised glitch artefact**: - A **6-frame RGB channel split** (oxide-red 1px left, calcite green centred, cherenkov pale 1px right) that appears, holds for 180ms, then re-aligns with a spring settle. - A **horizontal datamosh band** — a 14px-tall horizontal slice of the specimen displaced 6-12px to one side, like a single pulled thread of a JPEG, before snapping home. - A **crystalline shard intrusion** — a hexagonal vector shard in calcite green at 22% opacity, spawned from the seam edge, growing to overlay 18% of the specimen and then receding. The glitch is **never randomised; it is keyed to scroll position**. The visitor cannot escape the glitch and cannot accidentally trigger it twice; each plate carries exactly one glitch event, and the event happens at exactly 60% horizontal extent. This is how the dossier maintains its institutional composure: the corruption is *scheduled*, *audited*, *reproducible*. **Crystalline motifs (8% in registry — actively claimed):** The crystal lattice runs as a *secondary structural motif* across the entire ribbon: - A **hexagonal calcite shard** behind every plate title, sized to the cap-line of the headline, in ink at 18% opacity. - A **growing lattice** in the persistent left margin — a faint, scroll-progressive accumulation of small hexagons that, by Plate 12, has grown into a small visible mineral cluster at the bottom-left corner. The visitor's lateral journey *deposits* crystal. - A **cleavage seam** at every plate boundary — a hairline that, when refracted by spring tension, becomes the most visible expression of the lattice motif: the document literally fractures along crystal planes to reveal the next plate. - A **crystalline shard intrusion** during glitch events, as described above. - An **end-state crystal cluster** on Plate 12 (the index plate) — a small, hand-drawn vector cluster of 7 calcite hexagons in the lower-right corner, the only "decorative" element in the entire site, signed beneath in tech-mono `+ accumulated, plates 01-12`. There are **no organic blobs, no flowing curves, no aurora gradients, no nature elements, no floral motifs, no mountain landscapes, no city scenes, no bubble-playful elements**. The visual world is reduced to **engineering drawings, industrial samples, geological crystals, and the occasional refracted glitch** — a closed lexicon of four object classes, each disciplined to the muted palette. ## Prompts for Implementation The implementation is **a horizontally-scrolled HTML/CSS/JS dossier of exactly 12 viewport-wide plates**. The implementation must privilege the immersive narrative of *moving rightward through a crystalline corporate document* and must avoid the shorthand of conventional landing-page modules. **Storytelling priorities:** - The site *is* a horizontal investigative ribbon. It has no homepage above it and no "scroll down" call to action below it. The visitor lands on Plate 01 and the only direction forward is right. - Each plate carries one specimen, one paragraph, one footnote, one quotation. The plates are not interchangeable cards; they are **a 12-step lateral narrative**: Plate 01 (cover, the dossier introduces itself), Plates 02-04 (reactor architecture: hall, vessel, core), Plates 05-07 (the fuel cycle: pellet, assembly, spent pool), Plates 08-10 (regulatory anomalies: the three real-world events, redacted), Plate 11 (the citizen review hearing, presented as a single transcript fragment), Plate 12 (the index, the accumulated crystal cluster, the dossier signs itself). - The narrative is the design. The visitor reads the dossier in order, left to right; the spring-loaded seam transitions are *paragraph breaks in a printed report*, not UI fanfare. **Animation grammar (built on the spring pattern, 84% in registry — but redirected to mean *crystal lattice recoil*, not bouncy fun):** - **Seam transition.** When the scroll reaches a seam, the seam visually separates by 12px, a thin three-channel RGB rainbow appears in the gap, and the seam closes with `tension: 280, friction: 14, mass: 1` — settle ~620ms. This is the *only* place the spring is felt; everywhere else, the design is still. - **Glitch event.** At 60% horizontal extent of each plate, the specimen image undergoes a 6-frame RGB channel split + datamosh + crystal-shard intrusion. The total event is 320ms. Implement as `transform: translate3d()` on three colour-channel-clipped clones of the same image, plus a single absolutely-positioned SVG hexagon that scales from 0 to 1 with a spring. - **Title-shard reveal.** When a plate enters the viewport, the hexagonal shard behind the title scales from 0.9 to 1.0 with the same spring, while the title text fades from 0 to 1 over 320ms. No stagger — the title and the shard arrive together. - **Footnote marker.** When a footnote marker enters the viewport, it draws a 4px underline beneath itself in calcite green over 240ms. This is the only line-draw animation on the site. - **Cursor.** The cursor is the default arrow except over the seams, where it becomes a custom hexagon hairline — a tiny calcite-green outlined hexagon that previews the cleavage plane the click would reveal. There is no cursor-follow particle trail, no magnetic pull, no large reactive shape; the dossier is too composed for those. **Scroll mechanics:** - The page is ``, with the 12 plates laid out as a single 1200vw flex row (each plate `100vw` wide, full viewport height). - Mouse-wheel vertical scroll is **remapped to horizontal scroll** with a 1:1 ratio plus a small spring-damped easing (60ms ease-out) so the lateral motion has the unhurried feel of pulling a printed scroll across a desk. - Trackpad horizontal swipe is supported natively. Keyboard `→` and `←` advance one plate per keypress, with the seam transition firing. - The horizontal progress dial across the top fills in real-time. The 12 ticks light in calcite green as each plate is fully reached. **AVOID with strict discipline:** - No CTA-heavy layouts. No "Sign up for our newsletter" panels, no "Get a quote" buttons, no email-capture modals. The dossier does not solicit. - No pricing blocks. The dossier does not sell anything. - No statistic-grid dashboards (no "10,000 reactors monitored / 99.97% uptime / 24/7 coverage" floating-number panels). The numbers in the dossier appear as footnote markers and in italic quotations only — not as KPI tiles. - No card grid. The plate is the unit, not the card. - No centred hero. Every plate is composed asymmetrically on its 12-column grid. - No vertical scroll. None. If the viewport is too short, the plate's body text shrinks to fit; the dossier never asks the visitor to scroll downward. - No mobile-stack fallback. On narrow viewports, the horizontal ribbon remains horizontal; the plate widths shrink to `100vw` of the narrow viewport, and the body text reflows. The lateral grammar is non-negotiable. - No emoji, no floating particles, no aurora gradient backgrounds, no parallax depth layers. The dossier is flat by institutional choice. **Specific implementation notes:** - The glitch events should be implemented with CSS `mix-blend-mode: screen` on three colour-channel-tinted clones of the specimen image (one tinted oxide-red, one tinted calcite green, one tinted cherenkov pale), each translated by 1-2px in a different direction during the glitch frame. This produces a true RGB-channel-split effect using the dossier's own palette — not a generic chromatic aberration filter. - The crystalline shards behind plate titles should be inline SVG `` (a regular hexagon), filled with reactor-hall ink at `fill-opacity: 0.18`. No drop shadow, no blur — flat mineral. - The horizontal scrollbar is hidden (`::-webkit-scrollbar { display: none }`) and replaced by the 4px-tall progress dial across the top. - The persistent left margin tag (`PRRA / DOSSIER 2031-04 / 原発`) is `position: fixed; left: 24px; bottom: 24px; transform-origin: bottom left; transform: rotate(-90deg)`, rendered in Space Grotesk 11px in cooling-loop slate. ## Uniqueness Notes This design is differentiated from the other ~210 designs in the registry along the following axes: 1. **Triangulation of corporate × glitch-art × crystalline.** The frequency analysis shows corporate at 21%, glitch-art imagery at 5%, and crystalline motifs at 8% — none of these is rare alone, but their *triangulation* in a single design has not been documented. The design's core idea — a regulator's dossier that is corrupting itself with its own ink — exists only at this triangulation point. 2. **Strict horizontal-scroll commitment with no vertical fallback.** Horizontal-scroll is at 8% in the registry, but most uses pair it with a fallback or a hybrid layout. This design treats horizontal-scroll as a *non-negotiable lateral grammar* — there is no vertical scroll, no mobile stack, no scroll-down rescue, no homepage above. The visitor reads the dossier the way one reads a Japanese emakimono picture scroll. 3. **The 12-plate ledger structure.** Each viewport-wide panel is a numbered plate of an architectural survey, not a slide of a deck. The plates are sequenced as a 12-step narrative (cover → architecture → fuel cycle → anomalies → hearing → index). This is structurally distinct from the card grid (85%), the centred composition (83%), and the dashboard (32%) that dominate the registry. 4. **Frutiger-clean typography (4% in registry — claimed) realised through Inter.** Most uses of frutiger-clean lean on the gloss-bubble Frutiger Aero aesthetic (3%); this design uses the Frutiger *typographic* tradition only — humanist sans-serif at 0.005em letter-spacing — and pairs it with a strictly muted palette and zero gloss. The result is the *typographic spirit* of Frutiger without the visual aero gloss; this combination is, per the registry, unattempted. 5. **Muted-palette glitch.** Almost every glitch-art design in the registry uses high-contrast neon RGB splits (red `#FF0040`, green `#00FF80`, blue `#00C0FF` or similar). This design constrains the glitch to **the dossier's own muted palette** — `#A8704C` oxide-red, `#5A7A4F` calcite green, `#7AA8C4` cherenkov pale — so that the corruption looks like the document fragmenting into its own ink, not an external attack. This is the structural joke at the heart of the design. 6. **Spring pattern reframed as crystal lattice recoil.** Spring is at 84% in the registry — saturated. This design redeploys the spring not as cute UI bounce but as the *physical recoil of a crystal cleavage plane* being passed through. The animation curve is the same; the metaphor is entirely different. A saturated pattern, structurally redirected. 7. **Professional tone (5% — claimed) maintained even through glitch corruption.** Most professional-tone designs are pristine; most glitch designs are punk. This design holds professional throughout: ISO-8601 dates, regulator's footnotes, full-stop sentences. The glitch happens *to* the document; the document does not respond emotionally. This restraint is itself the signature. 8. **One human voice per plate, in italic Cormorant Garamond, 14px, bottom rail, only.** Twelve italic quotations are the dossier's only emotional register. Their scarcity makes them the most-read element on the site; they are the *human marginalia* on the institutional page. 9. **The accumulated-crystal end-state.** The persistent left margin grows a small mineral cluster as the visitor scrolls; by Plate 12 the cluster is visible and signed `+ accumulated, plates 01-12`. The visitor's lateral journey *deposits* crystal — a final structural metaphor that no other design in the registry deploys. **Avoided patterns from frequency analysis:** - Avoided **photography imagery** (99% — saturated). All visuals are vector engineering drawings, desaturated industrial-sample macros, or geological specimen plates. - Avoided **gradient palette** (97%) and **warm palette** (97%). The palette is strictly muted, strictly cool except for one oxide-red accent, with zero gradients anywhere. - Avoided **parallax** (95%) and **cursor-follow** (85%). The cursor is the default arrow except at seams; nothing follows the cursor; nothing parallaxes. - Avoided **mono typography** (94% — saturated). Mono appears only on the technical metadata rail; the dossier voice is humanist sans (Inter as Frutiger-clean equivalent). - Avoided **full-bleed photographic header** (93%) and **card grid** (85%) and **centred composition** (83%). The plate is the unit; no plate is centred; no plate carries a full-bleed photo. - Avoided **hand-drawn aesthetic** (96% — saturated). Every line is a vector engineering line; nothing is sketched, nothing is wobbly, nothing is imperfect-by-style. - Avoided **pastoral-romantic tone** (34%) and **warm-inviting tone** (27%). The dossier is professional; it does not invite, it documents. **Chosen seed (from assignment):** aesthetic: corporate, layout: horizontal-scroll, typography: frutiger-clean, palette: muted, patterns: spring, imagery: glitch-art, motifs: crystalline, tone: professional.