# Design Language for riron.xyz ## Aesthetics and Tone riron.xyz channels an inflated-3d aesthetic — the puffy, volumetric visual language of soft-body physics and inflated geometry applied to a 理論 (theory) experimental research platform. The site inflates — rounded volumes catching dramatic light, pillowy surfaces that suggest squeezable dimensionality, and the satisfying visual weight of theoretical constructs given three-dimensional mass. Inspiration draws from the inflatable furniture of the 1960s space age, the volumetric renders of Six N. Five studio, the soft-body simulations of Maxon Cinema 4D showcases, and the tactile dimensionality of claymation aesthetics. The tone is opulent-grand — magnificent, expansive language that presents theoretical research with the grandeur of Renaissance palazzos housing cutting-edge laboratories. ## Layout Motifs and Structure The layout uses a **sidebar** architecture — content organized with a persistent navigation sidebar that creates the laboratory-instrument-panel quality of a research station with always-accessible theoretical navigation. **Sidebar Architecture:** - Fixed sidebar: 260px width with theory navigation - Main content: fluid width beside sidebar - Content area: max-width: 780px within main column - Feature sections: break out of sidebar constraint for full moments - Sidebar collapses to top navigation on mobile (< 768px) - The sidebar creates the instrument-panel quality of research equipment with persistent controls **Section Sequence:** 1. **Thesis:** Hero with elegant-serif title on high-contrast inflated gradient, duotone-photo dramatic theory imagery, marble-classical monumental context markers 2. **Laboratory:** Research areas in sidebar-navigated sections — typewriter-effect interactive theory-typing reveals with duotone-photo processed documentation 3. **Monument:** Featured research in breakout full-width with marble-classical architectural gravitas and duotone-photo heroic imagery 4. **Archive:** Research catalog in sidebar-filtered sections with marble-classical cataloging markers 5. **Pediment:** Footer as architectural base — opulent-grand farewell with marble-classical settled grandeur and magnificent closing ## Typography and Palette **Typography:** - **Headlines:** "Cormorant Garamond" (Google Fonts) — elegant serif at 2.4rem-3.2rem, weight 700. Its refined high-contrast strokes create the classical-scholarship quality of theory titles inscribed with the authority of carved marble lettering. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.8. - **Accent:** "Cormorant Garamond" at 1.1rem, weight 400, italic for theoretical annotations and scholarly commentary. - **Labels:** "Inter" at 0.65rem, weight 500, uppercase, letter-spacing 0.12em. **Color Palette:** - **Marble White:** #f8f6f2 — bright marble white for backgrounds - **Obsidian Panel:** #141218 — deep obsidian for sidebar and contrast panels - **Platinum Silver:** #c0c0c8 — cool platinum for primary accent - **Rose Gold:** #c8988 — warm rose gold for secondary accent - **Ivory Highlight:** #f0e8d8 — warm ivory for highlights - **Charcoal Text:** #18161c — deep charcoal for primary text on light - **Silver Text:** #d8d4d0 — silver for text on dark panels - **Border Platinum:** rgba(192,192,200,0.12) — platinum tint border ## Imagery and Motifs **Duotone-Photo Dramatic Theory:** Research imagery processed in high-contrast duotone — CSS filter: grayscale(1) contrast(1.3) with mix-blend-mode: multiply over Obsidian Panel background, creating dramatic two-tone presentation. The duotone treatment creates the monumental quality of theoretical research rendered as dramatic photographic documentation. **Typewriter-Effect Theory Typing:** Key theoretical statements reveal character by character — each character appearing at 40ms intervals with a blinking cursor (500ms blink rate) in Rose Gold. The typewriter creates the discovery quality of theoretical conclusions being typed in real-time by a brilliant researcher. **Marble-Classical Architectural Markers:** Decorative column-like vertical bars (3px wide, 40-60px tall) in Platinum Silver at 0.15 opacity flanking important content sections. Small acanthus-inspired decorative dots (3px) at marker terminals. The marble elements create the classical-architecture quality of theoretical knowledge housed in monumental structures. **High-Contrast Inflated Atmosphere:** Background alternates dramatically between Marble White and Obsidian Panel — sharp transitions creating the volumetric quality of inflated surfaces catching light and casting deep shadows. Subtle gradient: radial-gradient(at 60% 40%, rgba(192,192,200,0.03), transparent 40%). **3D Inflated Cards:** Content panels with pronounced shadow creating depth illusion — box-shadow: 0 8px 32px rgba(20,18,24,0.08), 0 2px 8px rgba(20,18,24,0.04); border-radius: 16px. The rounded corners and deep shadows create the inflated quality of three-dimensional theory modules. ## Prompts for Implementation Build the page as an inflated-3d theory research station. Sidebar: .research-sidebar { position: fixed; left: 0; top: 0; width: 260px; height: 100vh; background: #141218; padding: 40px 24px; overflow-y: auto; } .research-main { margin-left: 260px; padding: 60px 40px; } .research-content { max-width: 780px; } Typewriter: .typewriter-text { overflow: hidden; white-space: nowrap; border-right: 2px solid #c89888; animation: typing 3s steps(40) forwards, blink 500ms step-end infinite; } @keyframes typing { from { width: 0; } to { width: 100%; } } @keyframes blink { 50% { border-color: transparent; } } Inflated card: .inflated-panel { background: #f8f6f2; box-shadow: 0 8px 32px rgba(20,18,24,0.08), 0 2px 8px rgba(20,18,24,0.04); border-radius: 16px; padding: 36px; } Marble marker: .classical-marker { width: 3px; height: 48px; background: rgba(192,192,200,0.15); position: relative; } .classical-marker::before, .classical-marker::after { content: ''; width: 3px; height: 3px; border-radius: 50%; background: rgba(192,192,200,0.2); position: absolute; left: 0; } .classical-marker::before { top: -4px; } .classical-marker::after { bottom: -4px; } AVOID: Generic research portals, corporate documentation dashboards, and minimal academic sites. Let inflated-3d volumetric grandeur and opulent-grand language create a theory platform where 理論 is presented as monumental intellectual architecture, each theoretical framework a marble-clad chamber in a palazzo of knowledge. ## Uniqueness Notes 1. **Inflated-3d for theory research:** Puffy, volumetric visual language gives abstract theoretical concepts satisfying physical mass and dimensional presence. 2. **Sidebar as instrument panel:** Persistent navigation creates the laboratory quality of research equipment with always-accessible theoretical controls. 3. **Typewriter-effect as discovery:** Character-by-character reveals create the excitement of theoretical conclusions emerging in real-time. 4. **High-contrast as dramatic light:** Sharp transitions between light and dark create the volumetric quality of inflated surfaces catching dramatic illumination. 5. **Marble-classical as monumental framing:** Architectural markers create the palazzo quality of theory housed in structures worthy of its grandeur. **Seed/Style:** aesthetic: inflated-3d, layout: sidebar, typography: elegant-serif, palette: high-contrast, patterns: typewriter-effect, imagery: duotone-photo, motifs: marble-classical, tone: opulent-grand **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 inflated-3d aesthetic, sidebar layout, high-contrast palette, duotone-photo imagery, and opulent-grand tone.