# Design Language for meltdown.quest ## Aesthetics and Tone **meltdown.quest** is a **decommissioned reactor control room, captured in the eleven seconds before SCRAM** — a skeuomorphic-brutalist hybrid where Cold-War instrumentation collides with digital signal corruption. The mood is **mysterious-moody** with a thread of **edgy-rebellious** dread: you have walked into Control Room 4 of a facility that no longer officially exists, the analog gauges are still pinned past redline, and the CRT terminals along the back wall keep flickering text from a logbook nobody finished writing. This is not a horror site and not a cyberpunk pastiche — it is *industrial sublime*: the beauty of heavy switchgear, bakelite toggle banks, brushed-steel bezels, paper chart recorders, and the cold geometry of a SCADA mimic diagram, all slowly being eaten by glitch artifacts as the core goes critical. The emotional arc the visitor rides: **calm walk-through → rising hum → instrument panic → the bloom → silence**. Everything on the page is a diegetic object — a switch, a dial, a strip-chart, a annunciator tile, a phone receiver off its cradle. Nothing is a "card" or a "button" in the web sense; it is a *control*. The corruption (glitch) is the narrative engine: as you scroll deeper, datamosh blocks, RGB channel splits, scanline tears, and ASCII-static crawl across the chrome surfaces, until at the climax the whole panel desynchronizes into a wash of warning-amber and then resolves to a single dead-black readout. Reference touchstones: Chernobyl's Unit-4 control panel photography, NORAD blue-room consoles, Eames-era oscilloscope housings, the Voyager Golden Record's engraved diagram, Ryoji Ikeda's data-static installations, Stanley Donwood's *Hail to the Thief* glitch maps, and the typographic austerity of mil-spec equipment labels. ## Layout Motifs and Structure **The page is a vertical SCADA mimic diagram** — a single continuous panel you descend through, not a stack of marketing sections. The governing structure is a **hud-overlay over an immersive-scroll spine**: a thin fixed top rail (the "annunciator strip" — eight square status tiles that light up as you pass milestones), a thin fixed bottom rail (a live "core temperature" readout + scroll-position as a reactor-power percentage), and between them the diagram itself scrolling behind glass. Base grid: a **24-column engineering grid** with a deliberately rigid 8px baseline rhythm — every label, bezel, and gauge snaps to it, *because instrument panels are machined, not sketched*. But the content blocks are placed **asymmetrically** within that rigor: a giant analog dial occupies columns 3–11 while a strip-chart recorder runs columns 14–23 at a different vertical offset; switch banks cluster in the gutters. The eye never finds a centered column — it tracks across the panel the way an operator's eye scans a console: left dials, center mimic, right alarms. Section logic (each is a "panel zone," full-bleed, edge-to-edge brushed-metal): 1. **APPROACH** — wide establishing shot of the whole console, lights dim, one cursor-tracked spotlight from a swinging overhead lamp. 2. **STARTUP SEQUENCE** — toggle banks animate on; the narrative copy is set as engraved equipment labels. 3. **NEUTRON FLUX** — the strip-chart recorder draws live; numbers ticking up. 4. **EXCURSION** — gauges slam to redline; first glitch tears appear; layout begins to shear horizontally. 5. **THE BLOOM** — full-screen takeover: amber wash, datamosh, channel-split, scanline collapse. 6. **AFTER** — black panel, one slow green cursor blinking on an empty log line; the only quiet zone. No hero-with-CTA, no pricing tier, no testimonial wall, no stat-grid: numbers here are *instrument readings*, not bragging metrics, and they belong inside bezels. ## Typography and Palette **Type stack (all Google Fonts, hand-confirmed):** - **Instrument labels & UI chrome:** `Saira Condensed` (weights 500, 600, 700) — narrow, machined, all-caps with +0.14em tracking for engraved equipment plates and annunciator tiles. This is the "stamped onto metal" voice. - **Readouts, log text, telemetry:** `Share Tech Mono` — for the CRT terminal lines, the chart-recorder numerals, timestamps, and the climactic ASCII static. Slightly squared, period-correct for 1970s–80s instrumentation displays. - **Long-form narrative / the "logbook":** `Spectral` (400 regular, 400 italic, 600) — a calm transitional serif that reads like a typed-then-photocopied incident report. Its presence is the human counterweight to all the metal; used at 19–22px for the few passages of running prose. - **The single oversized display moment** (the word "MELTDOWN" at THE BLOOM): `Anton` — one weight, brutally heavy, set at clamp(96px, 18vw, 320px), letter-spacing -0.03em, where it then shatters into RGB-split copies. **Palette (minimum 3, with hex):** - `#0B0C0E` — Reactor Black (deep neutral background, the unlit panel and the final readout) - `#15181B` — Switchgear Charcoal (raised panel zones, bezels) - `#3A4148` — Brushed Steel (control housings, gauge rims, midtone chrome) - `#C9CDD1` — Instrument Bone (engraved label text, dial faces, default readout glyphs) - `#19C37D` — CRT Phosphor Green (live terminal text, "all nominal" states, the final blinking cursor) — used sparingly, only for *active* signal - `#F2A93B` — Caution Amber (warning bezels, the EXCURSION wash, annunciator "WARN" tiles) - `#E0451F` — Redline (gauge needles past redline, "TRIP" tiles, the SCRAM bar) - Glitch accents only inside corruption zones: `#FF2D55` (magenta channel) and `#00E5FF` (cyan channel) — never outside a datamosh block. Contrast philosophy: 90% of the page lives in the black-charcoal-steel-bone range; the green/amber/red are *event colors* that the layout earns, never decoration. ## Imagery and Motifs **No photography, no gradient-mesh, no organic blobs.** The entire visual world is built from **vector-art instrumentation + procedural glitch overlays**, in the spirit of `geometric-abstract` and `glitch-art` imagery modes. Required asset vocabulary (all SVG / canvas-drawn): - **Analog gauges:** circular dials with tick rings, numbered scales (0–1000 "NEUTRON FLUX %"), needles with realistic weighted swing, redline arcs, tiny screws at 4 and 8 o'clock, subtle brushed-metal radial sheen on the bezel. - **Strip-chart recorder:** a horizontal paper-feed graph that *draws in real time* as you scroll — green ink trace on faint grid paper, perforated edge, a date stamp in `Share Tech Mono`. - **Toggle/rocker switch banks:** rows of bakelite-style switches with engraved `Saira Condensed` labels beneath each ("SCRAM", "COOLANT A", "PURGE", "MANUAL"); they physically flip with a spring-snap on hover. - **Annunciator tiles:** the classic grid of square backlit alarm windows — most dark, some glowing amber/red with their warning text ("HI TEMP", "FLOW LOW", "RADIATION"). - **SCADA mimic lines:** thin orthogonal pipe-runs connecting components, with flow-direction chevrons that crawl when "active." - **The corruption layer:** datamosh rectangles, RGB channel-displacement, horizontal scanline tears, VHS tracking-error bands, and a `Share Tech Mono` ASCII-static field that increases density with scroll depth. - **The swinging overhead lamp:** a CSS-animated conical light that the cursor nudges, sweeping warm light across the cold panel. Decorative grammar: hairline engineering rules (1px Brushed Steel), corner-bracket frames `⌐ ¬ L ⌐` around active zones, mil-spec dashed borders, and tiny part-number stamps in the panel margins ("P/N 4A-RBMK-Δ"). ## Prompts for Implementation **Build it as one diegetic, full-bleed descent through a reactor control panel** — a narrative scrollytelling experience, not a landing page. The reader is an operator walking the console from APPROACH to AFTER. Every section is a "panel zone." Wire scroll progress to a single global "core power %" variable that the bottom rail displays and that drives the intensity of every animation. Animation & interaction direction: - **scroll-triggered** state machine: each zone arms/fires its instruments as it enters viewport (gauges swing, charts draw, annunciator tiles light, switches snap). - **cursor-follow**: the overhead lamp's cone tilts toward the pointer; gauges have a faint `tilt-3d` parallax on their bezels so chrome catches "light." - **path-draw-svg**: the strip-chart trace and the SCADA pipe-runs draw along their paths in sync with scroll. - **glitch** intensifies with depth — channel-split offset, datamosh block count, and scanline-tear frequency are all functions of "core power %." Below 60%, the panel is pristine; 60–95% it shears and tears; at 100% (THE BLOOM) the whole viewport desyncs into amber static for ~1.2s then cuts to black. - **typewriter-effect**: the CRT logbook lines type themselves out in CRT Phosphor Green, cursor blinking, occasionally "corrupting" a character to a glyph before correcting. - **counter-animate** but framed as instrument readings, never as marketing stats — neutron flux, coolant flow, rod position; all live behind bezels with needle motion, never as bare big numbers on a slab. - **pulse-attention**: warning annunciator tiles breathe at ~0.9Hz; the redline gauges have a needle micro-jitter. - Respect `prefers-reduced-motion`: gauges settle to final positions, glitch becomes a single static overlay, no flashing — the narrative still reads as a sequence of stills. Hard AVOID list: no CTA-heavy layouts, no pricing blocks, no stat-grids-as-bragging, no testimonial carousels, no "trusted by" logo bars, no centered single-column hero, no hand-drawn doodles, no glassmorphism frost panels, no warm photographic backgrounds. If a call-to-action is unavoidable, it is **one toggle switch labeled "INITIATE"** in the AFTER zone, nothing more. ## Uniqueness Notes Differentiators against the existing corpus (per the frequency analysis of 344 designs): 1. **Skeuomorphic industrial instrumentation as the entire structural metaphor** — skeuomorphic sits at 4% and almost always as a thin decorative layer; here the panel/dial/switch/annunciator system *is* the layout grammar, replacing cards, buttons, and stat-grids wholesale. Combined with brutalist (6%) rigidity in the 24-col engineering grid. 2. **Glitch as a scroll-driven narrative state machine, not a static effect** — glitch aesthetic is 10% and glitch-art imagery 4%, but they are typically background flavor; this site makes corruption a *plot device* tied to a single "core power" variable, escalating from pristine to total desync. 3. **Reactor-meltdown sublime as tone** — mysterious-moody (5%) + edgy-rebellious (3%) territory, and crucially it rejects the 98%-warm / 96%-gradient palette consensus entirely: this is a near-monochrome black-steel-bone world where green/amber/red are *event colors the layout must earn*. 4. **Diegetic everything** — no element is a generic web component; readouts are bezeled instruments, the CTA is a physical toggle, prose is a photocopied incident report. Counters exist but are reframed as telemetry, sidestepping the stat-grid cliché. 5. **Typography from mil-spec equipment, not from editorial or tech-startup playbooks** — `Saira Condensed` engraved plates + `Share Tech Mono` CRT readouts + `Spectral` logbook + a single `Anton` "MELTDOWN" detonation; mono is 94% common but it's used here as *period instrumentation*, not as a coder aesthetic. Chosen seed/style: **abstract glitch art tech** (with skeuomorphic-brutalist industrial framing and a mysterious-moody / edgy-rebellious tone). Avoided overused patterns from frequency analysis: hand-drawn (96%), glassmorphism (74%), photography (98%) imagery, warm (98%) / gradient (96%) palettes, card-grid (88%) and centered (86%) layouts, pastoral-romantic (34%) and warm-inviting (26%) tones. The only common pattern deliberately retained is mono typography — recontextualized as Cold-War instrument display type rather than developer-terminal styling.