# Design Language for rironbusou.net ## Aesthetics and Tone rironbusou.net channels a surreal aesthetic — the dreamlike, reality-bending visual language of Dalí and Magritte applied to a 理論武装 (theoretical armament) network platform. The site distorts — familiar elements placed in unexpected contexts, impossible spatial relationships, and the productive disorientation of encountering logical arguments that challenge assumed reality. Inspiration draws from the impossible architectures of M.C. Escher, the uncanny juxtapositions of René Magritte, the soft melting forms of Salvador Dalí, and the surrealist collage techniques of Max Ernst. The tone is warm-inviting — welcoming, comfortable language that makes surreal theoretical armament feel like a guided tour through fascinating impossible spaces. ## Layout Motifs and Structure The layout uses a **dashboard** architecture — content organized in a monitoring-dashboard format that creates the command-center quality of a theoretical armament operations room tracking multiple strategic fronts simultaneously. **Dashboard Architecture:** - Dashboard grid: repeat(4, 1fr) for metric panels - Metric cards: compact with focused data display - Feature panel: spans full width for primary strategic analysis - Side panels: 2-column for comparative strategic data - Container: max-width: 1120px with 16px gaps - The dashboard creates the operations-center quality of theoretical armament monitored across multiple strategic vectors **Section Sequence:** 1. **Dream:** Hero with bebas-bold title on midnight-blue surreal gradient, neon-glow dreamlike data illumination, aurora-lights atmospheric shifting 2. **Operations:** Strategic metrics in dashboard grid — cursor-follow interactive dreamlike cursor responses with neon-glow focused highlights 3. **Nexus:** Featured strategy in full-width dashboard panel with aurora-lights immersive atmospheric effects and neon-glow dramatic illumination 4. **Vectors:** Strategic analysis in side-by-side panels with aurora-lights connecting atmospheric bridges 5. **Awaken:** Footer as dream's end — warm-inviting farewell with aurora-lights settling atmosphere and welcoming closing ## Typography and Palette **Typography:** - **Headlines:** "Bebas Neue" (Google Fonts) — bold condensed at 2.4rem-3.2rem, weight 400. Its tall, commanding letterforms create the tactical-display quality of strategic operations headings rendered in maximum-impact military-grade type. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.7. - **Data:** "JetBrains Mono" (Google Fonts) — monospace at 0.85rem for strategic metrics, operational data, and armament specifications. - **Labels:** "Inter" at 0.65rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **Midnight Deep:** #0a0e1c — deep midnight blue for backgrounds - **Night Surface:** #141828 — midnight surface for panels - **Neon Magenta:** #d848a8 — vivid neon magenta for primary accent - **Neon Cyan:** #48c8d8 — bright neon cyan for secondary accent - **Warm Amber:** #d8a848 — warm amber for tertiary accent - **Moon Light:** #d8d4e8 — soft moonlight for text - **Shadow Night:** #283048 — night shadow for secondary text - **Border Neon:** rgba(216,72,168,0.08) — magenta tint border ## Imagery and Motifs **Neon-Glow Dreamlike Illumination:** Strategic elements highlighted with surreal neon glow — box-shadow: 0 0 20px rgba(216,72,168,0.08), 0 0 4px rgba(216,72,168,0.04). Key metrics with text-shadow: 0 0 12px rgba(72,200,216,0.15). The neon creates the dreamlike quality of important data glowing with surreal luminescence in a midnight operations center. **Cursor-Follow Dreamlike Tracking:** Dashboard elements respond to cursor position — subtle perspective shift based on cursor coordinates (transform: perspective(800px) rotateX(var(--rx)) rotateY(var(--ry)) with max 2-degree rotation). The cursor-follow creates the surreal quality of a reality that bends toward the observer's attention. **Aurora-Lights Atmospheric Shifting:** Background features slowly shifting aurora-like color gradients — linear-gradient(var(--aurora-angle, 135deg), rgba(216,72,168,0.02), transparent, rgba(72,200,216,0.015), transparent). CSS animation slowly rotating gradient angle over 20s. The aurora creates the dreamlike quality of a sky that shifts through impossible colors. **Midnight-Blue Surreal Atmosphere:** Background uses deep midnight blues with surreal color accents — radial-gradient(at 40% 30%, rgba(216,72,168,0.02), transparent 35%), radial-gradient(at 60% 70%, rgba(72,200,216,0.015), transparent 30%). The midnight depth creates the dream-space quality of theoretical operations conducted in the liminal hours. **Impossible Shadow Cards:** Dashboard panels with shadows that defy physics — box-shadow: 0 8px 24px rgba(216,72,168,0.04), 0 -4px 16px rgba(72,200,216,0.02). Upward and downward shadows simultaneously create the surreal quality of objects lit from impossible angles. ## Prompts for Implementation Build the page as a surreal theoretical armament dashboard. Dashboard: .armament-dashboard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1120px; margin: 0 auto; padding: 60px 24px; } .strategic-full { grid-column: span 4; } .strategic-half { grid-column: span 2; } Cursor follow: /* JS: track cursor position, calculate rotation angles */ .dream-panel { transition: transform 100ms ease-out; transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); } Neon glow: .neon-highlight { box-shadow: 0 0 20px rgba(216,72,168,0.08), 0 0 4px rgba(216,72,168,0.04); } .metric-value { text-shadow: 0 0 12px rgba(72,200,216,0.15); font-family: 'JetBrains Mono', monospace; } Aurora: .aurora-bg { background: linear-gradient(var(--angle, 135deg), rgba(216,72,168,0.02), transparent 30%, rgba(72,200,216,0.015) 70%, transparent); animation: aurora-shift 20s ease-in-out infinite; } @keyframes aurora-shift { 0% { --angle: 135deg; } 50% { --angle: 225deg; } 100% { --angle: 135deg; } } Impossible shadow: .surreal-card { background: #141828; border: 1px solid rgba(216,72,168,0.08); border-radius: 8px; padding: 24px; box-shadow: 0 8px 24px rgba(216,72,168,0.04), 0 -4px 16px rgba(72,200,216,0.02); } AVOID: Standard military dashboards, corporate monitoring platforms, and minimal operations interfaces. Let surreal dream-logic and warm-inviting language create a theoretical armament network where 理論武装 is monitored from an impossible operations center where strategic data glows with dreamlike luminescence and reality bends toward strategic intention. ## Uniqueness Notes 1. **Surreal for theoretical armament:** Dream-logic visual language makes strategic preparation feel like navigating fascinating impossible spaces where logic transcends ordinary reality. 2. **Dashboard as operations center:** Grid monitoring format creates the command quality of multiple strategic fronts tracked simultaneously. 3. **Cursor-follow as reality bending:** Perspective shifts create the surreal quality of a world that responds to the observer's attention like a lucid dream. 4. **Impossible shadows:** Dual-direction shadows create the Escher quality of objects existing in spaces with impossible light sources. 5. **Aurora-lights as shifting atmosphere:** Slowly rotating gradients create the dream-sky quality of an environment in constant subtle transformation. **Seed/Style:** aesthetic: surreal, layout: dashboard, typography: bebas-bold, palette: midnight-blue, patterns: cursor-follow, imagery: neon-glow, motifs: aurora-lights, tone: warm-inviting **Avoided Overused Patterns:** corporate aesthetic (89%), parallax patterns (93%), asymmetric layout (91%), mono typography (94%), warm palette (95%), friendly tone (89%), minimal imagery (92%). This design uses surreal aesthetic, dashboard layout, midnight-blue palette, neon-glow imagery, and warm-inviting tone.