# Design Language for ronri.net ## Aesthetics and Tone ronri.net channels a seapunk aesthetic — the aquatic-digital visual language of ocean depths merged with internet culture, applied to a 論理 (logic) network platform. The site submerges — turquoise depths, bioluminescent data flows, and the alien beauty of deep-ocean logic systems where reasoning operates under pressure and in darkness. Inspiration draws from the seapunk visual movement's ocean-digital fusion, the bioluminescent photography of Alexander Semenov, the underwater architecture concepts of Jacques Rougerie, and the deep-sea research imagery of NOAA expeditions. The tone is authoritative — commanding, expert language that delivers logical frameworks with the confidence of a deep-sea researcher presenting confirmed discoveries. ## Layout Motifs and Structure The layout uses a **ma-negative-space** architecture — content organized with deliberate, meaningful emptiness between elements, creating the deep-ocean quality of vast dark spaces between bioluminescent logic organisms. **Ma Negative Space Architecture:** - Content islands in generous dark space (40-50% viewport empty) - Text blocks: max-width: 640px, well-separated - Feature panels: centered with 100px+ margins - Empty space represents the ocean depths between bioluminescent logic nodes - Container: max-width: 940px with extensive internal spacing - The negative space creates the abyssal quality of logic existing in the vast darkness of deep-sea space **Section Sequence:** 1. **Abyss:** Hero with tech-mono title on neon-electric seapunk gradient, watercolor bioluminescent washes, aurora-lights deep-ocean light phenomena 2. **Current:** Logic streams in negative-space islands — lottie-animation interactive bioluminescent pulse responses with watercolor depth-pressure color effects 3. **Trench:** Featured logical framework in centered isolation with aurora-lights deep-luminescence and watercolor immersive ocean atmosphere 4. **Reef:** Supporting logic structures in clustered islands with aurora-lights reduced glow 5. **Surface:** Footer as ascent — authoritative farewell with aurora-lights fading depth-light and commanding closing ## Typography and Palette **Typography:** - **Headlines:** "Space Mono" (Google Fonts) — tech-mono at 2rem-2.8rem, weight 700. Its monospaced precision creates the sonar-readout quality of logic data displayed on deep-sea research equipment. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.8. - **Data:** "Space Mono" (Google Fonts) — monospace at 0.85rem for logical expressions, truth tables, and proof notation. - **Labels:** "Inter" at 0.65rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **Abyss Dark:** #040c14 — deep abyss for backgrounds - **Depth Surface:** #0c1824 — ocean depth for panels - **Neon Aqua:** #28e8d0 — bright neon aqua for primary accent - **Electric Purple:** #9848d8 — vivid electric purple for secondary accent - **Biolume Green:** #48d888 — bioluminescent green for tertiary accent - **Foam Light:** #d0e8e8 — seafoam light for text - **Shadow Deep:** #182838 — deep shadow for secondary text - **Border Neon:** rgba(40,232,208,0.08) — aqua tint border ## Imagery and Motifs **Watercolor Bioluminescent Washes:** Logic sections feature watercolor-style ocean-depth color effects — radial-gradient(at 30% 40%, rgba(40,232,208,0.03), transparent 45%), radial-gradient(at 70% 60%, rgba(152,72,216,0.025), transparent 40%), radial-gradient(at 50% 80%, rgba(72,216,136,0.02), transparent 35%). The washes create the bioluminescent quality of deep-ocean organisms illuminating the darkness with logic-light. **Lottie-Animation Bioluminescent Pulses:** Logic nodes pulse with organic rhythm — scale(1.0) to scale(1.03) to scale(1.0) over 3s ease-in-out infinite, with opacity 0.8 to 1.0 to 0.8. Box-shadow pulses: 0 0 16px rgba(40,232,208,0.06) to 0 0 24px rgba(40,232,208,0.1) and back. The pulsing creates the heartbeat quality of bioluminescent logic organisms alive in the deep. **Aurora-Lights Deep-Ocean Phenomena:** Background features slowly shifting aurora-like deep-sea light — linear-gradient(var(--depth-angle, 180deg), rgba(40,232,208,0.015), transparent 30%, rgba(152,72,216,0.01) 60%, transparent). CSS animation rotating gradient over 25s. The aurora creates the deep-ocean quality of mysterious light phenomena in pressurized abyssal environments. **Neon-Electric Seapunk Atmosphere:** Background uses extreme depth darkness with neon biological accents — radial-gradient(at 40% 30%, rgba(40,232,208,0.02), transparent 35%), radial-gradient(at 60% 70%, rgba(152,72,216,0.015), transparent 30%). The neon-electric creates the seapunk quality of ocean biology rendered in digital neon. **Pressure-Depth Lines:** Horizontal lines increasing in density toward page bottom — thin lines (1px) in Neon Aqua at 0.02 opacity, spacing decreasing from 80px at top to 20px at bottom. The pressure lines create the bathymetric quality of increasing depth-pressure as you descend through logical complexity. ## Prompts for Implementation Build the page as a seapunk logic network. Ma spacing: .logic-section { max-width: 940px; margin: 0 auto; padding: 120px 24px; } .logic-island { max-width: 640px; margin: 0 auto; } .logic-feature { max-width: 720px; margin: 60px auto; } Bioluminescent pulse: .logic-node { animation: bio-pulse 3s ease-in-out infinite; } @keyframes bio-pulse { 0%, 100% { transform: scale(1.0); box-shadow: 0 0 16px rgba(40,232,208,0.06); opacity: 0.85; } 50% { transform: scale(1.03); box-shadow: 0 0 24px rgba(40,232,208,0.1); opacity: 1; } } Deep panel: .abyss-card { background: #0c1824; border: 1px solid rgba(40,232,208,0.08); border-radius: 6px; padding: 28px; } Aurora depth: .depth-aurora { background: linear-gradient(var(--angle, 180deg), rgba(40,232,208,0.015), transparent 30%, rgba(152,72,216,0.01) 60%, transparent); animation: depth-shift 25s ease-in-out infinite; } AVOID: Standard logic platforms, corporate reasoning tools, and minimal proof assistants. Let seapunk ocean-digital fusion and authoritative expertise create a logic network where 論理 operates in bioluminescent deep-sea environments, each logical framework an organism illuminating the darkness of unreason with neon biological light. ## Uniqueness Notes 1. **Seapunk for logic network:** Ocean-digital fusion makes logical reasoning feel like exploring bioluminescent deep-sea ecosystems where each framework glows with its own light. 2. **Ma-negative-space as ocean depth:** Vast dark emptiness creates the abyssal quality of logic nodes separated by immense pressurized darkness. 3. **Bioluminescent pulses as living logic:** Organic rhythmic animation creates the quality of logical frameworks as living organisms rather than static constructs. 4. **Pressure-depth lines as complexity gradient:** Increasing line density creates the bathymetric quality of descending through layers of logical complexity. 5. **Tech-mono as sonar readout:** Monospaced precision creates the research-equipment quality of logic data displayed on deep-sea instrumentation. **Seed/Style:** aesthetic: seapunk, layout: ma-negative-space, typography: tech-mono, palette: neon-electric, patterns: lottie-animation, imagery: watercolor, motifs: aurora-lights, tone: authoritative **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 seapunk aesthetic, ma-negative-space layout, neon-electric palette, watercolor imagery, and authoritative tone.