# Design Language for genpatsu.io ## Aesthetics and Tone genpatsu.io embodies the visual language of a **nuclear power plant control room** -- not the Hollywood version with dramatic red alarms and panicked operators, but the real thing: rows of muted CRT-style displays, endlessly scrolling strip-chart recorders, analog meter clusters with delicate needles hovering in safe-zone arcs, and the steady hum of systems operating within nominal parameters. The word "genpatsu" (原発) means nuclear power plant in Japanese, and this site treats that origin as its entire world-building premise. Every pixel should feel like it belongs on a monitoring terminal in the instrumentation bay of a pressurized water reactor, circa the late analog-to-digital transition era (1990s-2000s) -- when CRT phosphor green was giving way to early LCD blue, when data was still charted on thermal paper in parallel with digital logging systems. The aesthetic is **data-driven** in the purest, most obsessive sense: data is not a thing the site displays; data IS the site. There are no hero images, no lifestyle photography, no abstract blobs. Every visual element is either a data representation, a system status indicator, or a structural frame that holds data. The site should feel like an instrument panel that happens to be a website -- where visiting feels less like browsing and more like sitting down at a monitoring station and reading the current state of a complex system. The tone is **professional** -- not corporate-professional (no blue gradients, no stock photos of handshakes), but engineering-professional. The kind of professionalism you find in technical manuals, IAEA safety documentation, and reactor operation logs. There is no playfulness. There is no whimsy. There is precision, legibility, and an almost reverent respect for the data being presented. The mood is contemplative and sober, like watching a control room readout at 3 AM -- calm, focused, serious, with a constant undercurrent of awareness that the systems being monitored carry real consequence. ## Layout Motifs and Structure The layout employs a **dashboard** architecture -- a dense, information-rich grid of panels, gauges, and readout zones that fills the viewport without wasted space. This is not a scrolling webpage with sections; it is a single-screen monitoring interface designed to present maximum information at a glance. **The Panel Grid System:** The viewport is divided into a primary grid of named panels, each functioning as an autonomous data display unit. The grid uses CSS Grid with explicit named areas: ``` "reactor-status reactor-status neutron-flux coolant-loop" "power-output power-output neutron-flux coolant-loop" "event-log fuel-cycle rad-monitor rad-monitor" "event-log sys-health sys-health timeline" ``` - Grid gaps: `2px` -- razor-thin dividers that mimic the bezel gaps between physical monitor panels in a control room - Each panel has a `1px` border in `#3A4A5C` (dark steel blue) and a header bar of `24px` height displaying the panel name in uppercase `Share Tech Mono` at `10px` - Panel backgrounds: `#0C1117` (near-black with a cold blue cast) -- darker than the page background to create recessed instrument-bay depth - The overall page background: `#111820` (dark charcoal-navy) -- the color of painted steel equipment racks **No Scrolling on Primary View:** The dashboard occupies exactly `100vh x 100vw`. All content fits within the viewport. There is no vertical scroll. Navigation between data contexts (if needed) happens through panel-internal tab switching or temporal scrubbing, never through page scrolling. This single-screen philosophy is core to the control-room metaphor. **Panel Types:** 1. **Chart Panels** -- contain live-updating line graphs, area charts, or bar histograms with labeled axes 2. **Gauge Panels** -- contain radial or linear gauge indicators showing single values within defined ranges 3. **Log Panels** -- contain scrolling monospace text logs with timestamped entries 4. **Status Panels** -- contain grid arrays of labeled indicator lights (green/amber/red circles) 5. **Timeline Panels** -- horizontal strips showing temporal event markers along a time axis Each panel operates independently -- it has its own internal data context, its own update cadence indicator (a tiny blinking dot in the panel header), and its own color-coding for severity levels. ## Typography and Palette **Typography:** - **System / Panel Headers / Data Labels:** "Share Tech Mono" (Google Fonts) -- a monospaced typeface designed specifically for technical and screen-display contexts. Its letterforms carry the DNA of early digital displays -- slightly condensed, with uniform stroke widths and squared-off terminals that evoke LCD segment displays. Used at `10px-12px` for panel headers and axis labels. Weight 400. All uppercase. Letter-spacing: `0.08em`. Color: `#7B8FA3` (muted steel-blue). - **Primary Data Values / Readouts:** "JetBrains Mono" (Google Fonts) -- a monospaced font engineered for maximum legibility of numbers and code. Its distinguishing feature for this design is the carefully differentiated forms for `0/O`, `1/l/I`, and `8/B` -- critical in a data-heavy environment where misreading a digit could mean misreading a reactor parameter. Used at `18px-36px` for primary numerical readouts. Weight 500. Color: `#E8EDF2` (cold white with blue cast) for nominal values, `#F5A623` (warm amber) for warning-range values, `#E74C3C` (alert red) for critical values. - **Annotation / Supporting Text:** "Inter" (Google Fonts) -- a sans-serif typeface optimized for screen readability at small sizes. Used sparingly for longer descriptive text, tooltips, and contextual annotations at `11px-13px`. Weight 400. Color: `#5A6B7D` (subdued slate). Line-height: 1.5. - **Domain Name / Title Treatment:** "Share Tech Mono" at `16px`, weight 400, uppercase, letter-spacing `0.15em`, color `#4ECDC4` (reactor teal). The domain name is always displayed as `GENPATSU.IO` with a thin horizontal rule (`1px solid #2A3A4A`) above and below, like a system identification plate riveted to equipment. **Palette:** The palette is **cool-grays** -- a narrow band of desaturated blue-grays, cold whites, and near-blacks, punctuated by functional color signals borrowed from industrial control-room conventions. | Swatch | Hex | Role | |--------|-----|------| | Void Black | `#0C1117` | Panel backgrounds, deepest recesses | | Equipment Gray | `#111820` | Page background, structural frames | | Steel Border | `#2A3A4A` | Panel borders, dividing lines, rules | | Dim Label | `#3A4A5C` | Disabled states, tertiary text | | Slate Text | `#5A6B7D` | Secondary text, annotations | | Steel Blue | `#7B8FA3` | Panel headers, axis labels, timestamps | | Cold White | `#E8EDF2` | Primary data values, active text | | Reactor Teal | `#4ECDC4` | Brand accent, active indicators, links | | Nominal Green | `#2ECC71` | Status: normal, safe-range indicators | | Warning Amber | `#F5A623` | Status: caution, approaching-limit values | | Alert Red | `#E74C3C` | Status: critical, over-limit alarms | | Neutron Blue | `#3498DB` | Chart lines, secondary data series | No warm tones exist in the structural palette. Warmth only enters through the amber and red signal colors, and those carry explicit semantic meaning (warning and alarm). The teal accent (`#4ECDC4`) is the only "decorative" color -- it marks the genpatsu.io brand identity and interactive elements. ## Imagery and Motifs **Data-Viz as Primary Imagery:** There are no photographs, illustrations, or decorative images anywhere on the site. Every visual element is a **data visualization** -- a chart, graph, gauge, indicator, or schematic diagram rendered in SVG or Canvas. The "imagery" of genpatsu.io IS its data, presented through the following visualization types: 1. **Strip-Chart Recorders:** Horizontal line graphs that scroll continuously from right to left, mimicking the thermal-paper strip recorders found in analog control rooms. Multiple data series overlap on the same chart with different line colors (`#4ECDC4` teal, `#3498DB` neutron blue, `#2ECC71` nominal green). The chart background has a subtle grid of `1px` lines at `#1A2430` (barely visible) that evoke graph paper. Old data fades to lower opacity as it scrolls left, creating a temporal depth gradient. 2. **Radial Gauges:** Circular SVG gauges with a 270-degree arc (from 7 o'clock to 5 o'clock, like a physical instrument gauge). The arc track is `#2A3A4A`. The value arc is colored according to the data range -- `#2ECC71` in the nominal zone, transitioning through `#F5A623` to `#E74C3C` as values approach limits. A thin needle line points to the current value. Below the gauge, the numeric value is displayed in JetBrains Mono. 3. **Status Indicator Arrays:** Grids of small circles (`8px` diameter) arranged in rows and columns, each representing a subsystem or sensor. Colors follow the nominal/warning/alert convention. A gentle `pulse-attention` animation (CSS `@keyframes pulse`) makes active-warning indicators throb at 1Hz -- expanding to `10px` and brightening by 20% before returning -- drawing the eye to anomalies without being distracting. 4. **Schematic Diagrams:** Simplified SVG line drawings of reactor system schematics -- coolant loops, turbine assemblies, containment structures -- rendered in `#3A4A5C` with data overlay points at junction nodes. These are purely diagrammatic (no 3D, no shading, no perspective) and use the visual language of piping and instrumentation diagrams (P&IDs). **Circuit Motifs:** The **circuit** motif manifests as a network of thin `1px` lines in `#1A2430` (very dark blue-gray, barely visible) that trace right-angle paths across the page background, connecting panel corners to invisible junction points. These lines evoke printed circuit board traces and reinforce the idea that the panels are interconnected subsystems. At panel-to-panel connection points, small diamond shapes (`4px`) in `#2A3A4A` mark the junctions. The circuit traces are purely decorative and sit behind all content at the lowest z-index, providing textural depth to the otherwise flat dark background. A secondary circuit motif appears in the panel header bars: a thin `0.5px` line traces a right-angle path from the left edge of the header, makes two 90-degree turns, and terminates at the panel title text -- like a PCB trace routing power to a labeled component. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site loads to a completely black screen (`#000000`). After a 500ms pause, a single blinking cursor appears in the center -- a `2px x 14px` rectangle in `#4ECDC4` blinking at 1Hz. Then, as if typed by an operator logging into a terminal, the text `GENPATSU.IO MONITORING SYSTEM` appears character-by-character in Share Tech Mono at `14px`, centered, in `#7B8FA3`. Below it, `INITIALIZING SUBSYSTEMS...` appears, followed by a series of rapid status lines: ``` [OK] Core Instrumentation ............ ONLINE [OK] Coolant Loop Telemetry .......... ONLINE [OK] Radiation Monitoring Array ....... ONLINE [OK] Turbine Performance Tracker ...... ONLINE [OK] Historical Data Archive .......... ONLINE [OK] Event Log Subsystem .............. ONLINE ``` Each line appears with a 200ms delay, the `[OK]` in `#2ECC71`, the subsystem name in `#7B8FA3`, the dots in `#2A3A4A`, and `ONLINE` in `#4ECDC4`. This entire boot sequence takes approximately 3 seconds. After the boot sequence completes, the screen performs a hard cut (no fade, no transition -- an instantaneous switch, like a monitor input changing) to the full dashboard view. All panels appear simultaneously, already populated with data, as if the monitoring system has been running all along and we've just connected our display to it. **Panel Animation Behavior:** - Strip-chart lines draw continuously from right to left using `requestAnimationFrame`, updating every 100ms with smooth interpolation between data points - Radial gauge needles use CSS `transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)` for smooth, physics-like needle movement -- slightly overshooting the target value before settling, like a physical galvanometer - Status indicator pulse animations use `@keyframes pulse { 0% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); opacity: 0.8; } }` with `animation-duration: 2s` and `animation-iteration-count: infinite` -- ONLY applied to warning/alert state indicators - Log panels auto-scroll with new entries sliding in from the bottom, each entry appearing with a subtle `opacity: 0 -> 1` transition over 150ms **Interaction Model:** Hovering over any data panel reveals a thin `1px` border-glow in `#4ECDC4` (box-shadow: `0 0 8px rgba(78, 205, 196, 0.3)`), indicating the panel can be inspected. Clicking a panel could expand it to fill the viewport, with other panels shrinking to a minimized sidebar strip -- though this interaction is optional and should not be the default state. **What to AVOID:** - **CTA-heavy layouts** -- there are no call-to-action buttons. This is a monitoring interface, not a sales page. - **Pricing blocks** -- completely irrelevant to the control-room metaphor. - **Stat-grids** -- while superficially similar to dashboard data, stat-grids (the "10,000+ Happy Customers" style) are marketing artifacts and violate the engineering-authenticity of this design. - **Hero sections** -- there is no hero. The entire viewport IS the interface. - **Scroll-triggered animations** -- the dashboard does not scroll. All animation is autonomous and time-based, driven by data update cycles, not user scroll position. - **Warm color palettes** -- warmth is reserved exclusively for amber/red signal colors. The structural design is cold, clinical, and deliberately inhospitable to cozy or inviting feelings. - **Playful or friendly tone** -- this is a serious monitoring interface for serious infrastructure. No emoji, no casual copy, no fun. ## Uniqueness Notes **Differentiators from other designs:** 1. **Zero-Scroll Single-Screen Dashboard:** While 17% of designs in the portfolio use "dashboard" layout, genpatsu.io is unique in enforcing a strict `100vh x 100vw` no-scroll constraint. The entire experience lives within a single viewport, with no vertical scrolling whatsoever. This is fundamentally different from dashboard-styled pages that still scroll through sections. Here, the viewport IS the interface boundary, just like a physical control room monitor. 2. **Boot Sequence Narrative Entry:** The typewriter-style system initialization sequence that precedes the dashboard reveal is a unique narrative device not found in other designs. It establishes the fiction that the user is connecting to a live monitoring system rather than loading a website. The hard-cut transition (no fade, no slide) from boot sequence to live dashboard reinforces this -- monitors don't fade; they switch inputs. 3. **Functional Color Semantics Without Decoration:** The color system is radically constrained. Every non-gray color in the palette carries explicit functional meaning (teal = brand/interactive, green = nominal, amber = warning, red = alert, blue = data series). There are no decorative colors, no gradients for atmosphere, no color used for visual interest alone. This level of chromatic discipline -- where color is a language, not a decoration -- is unique in the portfolio, which overwhelmingly favors warm (100%) and gradient (91%) palettes. 4. **Continuous Autonomous Animation:** Unlike designs that rely on scroll-triggered (97%) or parallax (80%) animations, genpatsu.io's animations are entirely autonomous -- charts scroll, gauges move, indicators pulse -- all driven by time-based data simulation, not user interaction. The site is alive whether or not the user does anything. This creates an immersive "living system" quality that passive scroll-triggered animations cannot achieve. 5. **Nuclear Control Room as Complete World:** The conceptual commitment is total. This is not a website "inspired by" dashboards or "themed with" data-viz elements. The entire design IS a nuclear monitoring terminal, from the PCB-trace background circuits to the P&ID schematic diagrams to the strip-chart recorder visualizations. The domain name "genpatsu" (原発, nuclear power plant) is taken literally as the site's entire architectural and visual premise. **Chosen Seed:** aesthetic: data-driven, layout: dashboard, typography: tech-mono, palette: cool-grays, patterns: pulse-attention, imagery: data-viz, motifs: circuit, tone: professional **Avoided Overused Patterns:** - Avoided "playful" aesthetic (97% frequency) -- replaced with data-driven seriousness - Avoided "centered" layout (99% frequency) -- replaced with dashboard grid of named panels - Avoided "warm" palette (100% frequency) -- replaced with cool-grays, the coldest palette option at only 5% frequency - Avoided "scroll-triggered" patterns (97% frequency) -- replaced with autonomous time-based animation via pulse-attention (5% frequency) - Avoided "minimal" imagery (95% frequency) -- replaced with data-viz (6% frequency), every visual is a chart or gauge - Avoided "friendly" tone (97% frequency) -- replaced with professional (10% frequency), engineering-grade seriousness - Avoided "vintage" motifs (77% frequency) -- replaced with circuit (19% frequency), PCB traces and schematic diagrams