# Design Language for meltdown.quest ## Aesthetics and Tone meltdown.quest channels a generative aesthetic — algorithmically-driven visual patterns, mathematical beauty, and the mesmerizing complexity of systems that emerge from simple rules, applied to nuclear incident research and meltdown scenario exploration. The site treats nuclear meltdown documentation as a complex system — interconnected chains of cause and effect rendered visible through generative visualization, where each incident is a unique pattern born from the same underlying physics. Inspiration draws from Casey Reas's generative art, the data visualizations of Nicholas Felton, Chernobyl reactor diagrams, and the eerie beauty of Cherenkov radiation's blue glow. The tone is elegant-sophisticated — nuclear science presented with the refined gravity it demands, neither sensationalized nor sanitized. ## Layout Motifs and Structure The layout uses a **parallax-sections** architecture — layered content planes moving at different scroll speeds, creating depth that mirrors the layered containment structures of nuclear reactors. **Parallax Section Architecture:** - Background layer: generative pattern canvas, scroll-speed: 0.3x - Mid layer: content cards and text blocks, scroll-speed: 1x (normal) - Foreground accents: floating particles and data fragments, scroll-speed: 1.4x - Sections separated by gradient dissolves rather than hard edges - Full-viewport sections (min-height: 100vh) for immersive pacing **Section Sequence:** 1. **Critical Mass:** Hero with generative particle animation background, title in humanist type, Cherenkov-blue gradient glow behind text 2. **Incident Map:** Nuclear incidents displayed as a parallax-layered timeline with glitch-art processed imagery and data overlays 3. **Chain Reaction:** How meltdowns propagate — each cause-effect step on a different parallax depth, connected by sci-fi-hud targeting lines 4. **Containment:** Research resources and safety documentation in calm, structured cards over slowly-shifting generative backgrounds 5. **Half-Life:** Footer with decay-themed closing — content fading exponentially, final links barely visible against deep background ## Typography and Palette **Typography:** - **Headlines:** "Source Serif 4" (Google Fonts) — humanist serif at 2.5rem-3.5rem, weight 700. Its warm but authoritative forms bring human gravity to nuclear documentation. - **Body Text:** "Source Sans 3" (Google Fonts) — clean humanist sans at 0.95rem, weight 400, line height 1.75. - **Data Points:** "IBM Plex Mono" (Google Fonts) — monospace at 0.8rem for radiation readings, dates, and technical measurements. - **Labels:** "Source Sans 3" at 0.75rem, weight 600, uppercase, letter-spacing 0.06em. **Color Palette:** - **Cherenkov Blue:** #2080d0 — the distinctive blue glow of Cherenkov radiation for primary accents - **Reactor Dark:** #0a0e18 — near-black blue for primary backgrounds - **Warning Amber:** #d0a020 — caution yellow for warning indicators and highlights - **Containment Gray:** #303848 — dark blue-gray for card backgrounds - **Ash Pale:** #c8c8d0 — cool light gray for body text - **Meltdown Orange:** #d06030 — hot orange for critical status and alerts - **Coolant Teal:** #208080 — muted teal for secondary accents and safe-status indicators - **Fallout Dust:** #585868 — medium gray for borders and secondary text ## Imagery and Motifs **Generative Particle Backgrounds:** Section backgrounds feature algorithmically-generated particle systems (CSS or lightweight JS) — small dots (2-4px) in Cherenkov Blue at 0.1-0.3 opacity, slowly drifting and occasionally connecting with thin lines (1px, 0.05 opacity) when near each other. Evokes atomic particles and the invisible forces of nuclear physics. **Glitch-Art Incident Imagery:** Historical incident imagery processed with CSS glitch effects — translateX micro-shifts (1-3px) on color channels using box-shadow in Cherenkov Blue and Meltdown Orange at 0.3 opacity, offset by 2px in opposite directions. Triggered subtly on scroll, suggesting data corruption and the distortion of crisis. **Parallax Depth Layering:** Content planes at different scroll speeds create physical depth. Background patterns move slowly (transform: translateY(calc(var(--scroll) * 0.3))), while foreground data fragments move faster (translateY(calc(var(--scroll) * -0.15))). JavaScript updates --scroll custom property on scroll. **Sci-Fi HUD Targeting Indicators:** Key data points flanked by HUD-style brackets — CSS-drawn L-shaped corners (border-top + border-left, 10px each, 1px solid Cherenkov Blue at 0.4 opacity) that animate to scale(1) from scale(1.3) on scroll entry over 300ms. **Cherenkov Glow Auras:** Critical elements emit the distinctive blue glow of Cherenkov radiation — box-shadow: 0 0 30px rgba(32,128,208,0.15), 0 0 60px rgba(32,128,208,0.05). On hover, glow intensifies to 0.25 and 0.1 respectively, with 400ms transition. ## Prompts for Implementation Build the page as a generative nuclear documentation system. Parallax: JavaScript on scroll sets --scroll-y CSS variable. Layers use transform: translateY(calc(var(--scroll-y) * FACTOR)) with different factors per depth. Generative particles: CSS-only approach with @keyframes drift moving small absolute-positioned dots. Or lightweight JS canvas for performance. Dots: 2-4px circles, Cherenkov Blue, varying opacity 0.1-0.3. Glitch effect: .incident-image { position: relative; } .incident-image::before { content: ''; position: absolute; inset: 0; background: inherit; mix-blend-mode: screen; opacity: 0.3; transform: translateX(2px); filter: hue-rotate(60deg); } HUD brackets: four corner divs, border combinations (top-left: border-top + border-left), 10px size, 1px solid. Start: transform: scale(1.3), opacity: 0. On .visible: scale(1), opacity: 1, transition: 300ms. Cherenkov glow: .critical { box-shadow: 0 0 30px rgba(32,128,208,0.15), 0 0 60px rgba(32,128,208,0.05); transition: box-shadow 400ms; } .critical:hover { box-shadow: 0 0 30px rgba(32,128,208,0.25), 0 0 60px rgba(32,128,208,0.1); } AVOID: Sensationalist disaster-movie aesthetics, cartoonish radiation symbols, and fear-mongering design. Let generative beauty and elegant-sophisticated tone create a contemplative, scientifically-respectful nuclear research experience. ## Uniqueness Notes 1. **Generative aesthetic for nuclear documentation:** Algorithmically-driven visuals mirror the emergent complexity of nuclear chain reactions. 2. **Parallax depth as containment layers:** Multiple scroll-speed planes physically represent the layered containment structures of reactor design. 3. **Cherenkov radiation glow as design motif:** The distinctive blue light of nuclear physics becomes the signature visual element. 4. **Glitch-art as crisis distortion:** Subtle visual corruption on incident imagery embodies the information chaos of nuclear emergencies. 5. **Exponential fade footer as half-life metaphor:** Content decay in the footer literalizes radioactive half-life in the design itself. **Seed/Style:** aesthetic: generative, layout: parallax-sections, typography: humanist, palette: sunset-warm, patterns: parallax, imagery: glitch-art, motifs: sci-fi-hud, tone: elegant-sophisticated **Avoided Overused Patterns:** corporate aesthetic (76%), asymmetric layout (85%), mono typography (86%), warm palette (89%), friendly tone (76%), minimal imagery (84%). This design uses generative aesthetic, parallax-sections layout, sunset-warm palette, glitch-art imagery, and elegant-sophisticated tone.