# Design Language for ronri.xyz ## Aesthetics and Tone ronri.xyz channels a bauhaus aesthetic — the geometric precision and functional beauty of the Bauhaus movement applied to a 論理 (logic) experimental platform. The site composes — primary geometric forms arranged with mathematical precision on ruled grids, where every element serves a structural purpose and decoration is replaced by the inherent beauty of logical composition. Inspiration draws from the color-form experiments of Wassily Kandinsky, the typographic innovations of Jan Tschichold, the systematic grid work of Josef Müller-Brockmann, and the constructivist geometry of El Lissitzky. The tone is authoritative — commanding, expert language that presents logical structures with the absolute confidence of proven geometric theorems. ## Layout Motifs and Structure The layout uses a **horizontal-scroll** architecture — content arranged along a horizontal axis that creates the reading-direction quality of logical proofs advancing left-to-right through sequential deduction steps. **Horizontal Scroll Architecture:** - Full-height sections arranged horizontally (scroll-snap-type: x mandatory) - Each section: 100vw width, 100vh height - Content within sections: max-width: 600px, centered vertically - Horizontal progress indicator at top showing proof advancement - Container: overflow-x: scroll with snap points - The horizontal creates the deduction quality of logic advancing in the natural reading direction **Section Sequence:** 1. **Premise:** Hero with futura-geometric title on sunset-warm bauhaus gradient, custom-illustration geometric logic diagrams, sharp-angles decisive geometric markers 2. **Derivation:** Proof steps in horizontal scroll — tilt-3d interactive perspective-shift responses with custom-illustration geometric illustrations 3. **Pivot:** Featured logical insight in full-viewport horizontal panel with sharp-angles dramatic geometric emphasis and custom-illustration detailed diagrams 4. **Reduction:** Simplified logic in compact horizontal panels with sharp-angles minimal markers 5. **Conclusion:** Footer as proof terminus — authoritative farewell with sharp-angles resolved geometry and commanding closing ## Typography and Palette **Typography:** - **Headlines:** "Josefin Sans" (Google Fonts) — futura-geometric sans at 2.4rem-3.2rem, weight 700. Its geometric letterforms create the Bauhaus quality of typography constructed from circles, triangles, and straight lines — the same primary shapes that compose logical structures. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.7. - **Code:** "JetBrains Mono" (Google Fonts) — monospace at 0.85rem for formal logical notation and proof expressions. - **Labels:** "Inter" at 0.65rem, weight 600, uppercase, letter-spacing 0.1em. **Color Palette:** - **Sunset Base:** #f8f0e0 — warm sunset cream for backgrounds - **Warm Surface:** #f0e4d0 — deeper warm for panels - **Sunset Orange:** #e87830 — vivid orange for primary accent - **Sunset Rose:** #d84868 — warm rose for secondary accent - **Sunset Violet:** #7848a8 — deep violet for tertiary accent - **Dark Warm:** #201810 — warm dark for text - **Dusk Gray:** #887060 — warm dusk for secondary text - **Border Sunset:** rgba(232,120,48,0.12) — orange tint border ## Imagery and Motifs **Custom-Illustration Geometric Logic:** Logic concepts rendered as Bauhaus-style geometric compositions — circles (truth values), rectangles (propositions), triangles (operators) composed into abstract diagrams. Bold outlines (2px) in palette colors, flat fills, no gradients. Each logical operation has a distinct geometric composition. The illustrations create the Kandinsky quality of abstract logical relationships expressed through pure geometric form. **Tilt-3D Perspective Shifts:** Horizontal panels respond to cursor position with perspective shift — transform: perspective(1000px) rotateY(var(--ry)) with max 3-degree rotation toward cursor. The tilt creates the dimensional quality of logical structures that can be examined from multiple angles, revealing depth in flat geometric compositions. **Sharp-Angles Geometric Markers:** Angular markers — 45-degree rotated squares (8px), acute triangles (10px height), and chevron shapes as logical direction indicators. In Sunset Orange and Sunset Violet at 0.12-0.18 opacity. The sharp angles create the decisive quality of logical conclusions drawn with geometric precision. **Sunset-Warm Bauhaus Atmosphere:** Background uses warm sunset gradation — linear-gradient(90deg, #f8f0e0, #f0e4d0) for horizontal flow. Accent: radial-gradient(at 40% 50%, rgba(232,120,48,0.03), transparent 40%). The sunset warmth creates the golden-hour quality of a Bauhaus workshop bathed in evening light. **Constructivist Divider Lines:** Section transitions marked by bold geometric divider elements — thick diagonal lines (3px) in Sunset Orange at 0.1 opacity crossing at constructivist angles. Small circles (6px) at line intersections. The dividers create the El Lissitzky quality of dynamic geometric composition marking logical transitions. ## Prompts for Implementation Build the page as a bauhaus logic experimental platform. Horizontal scroll: .logic-scroll { display: flex; overflow-x: scroll; scroll-snap-type: x mandatory; height: 100vh; } .logic-panel { min-width: 100vw; height: 100vh; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; } .panel-content { max-width: 600px; padding: 40px; } Tilt 3D: /* JS: track cursor x position within panel, calculate rotation */ .tilt-panel { transition: transform 100ms ease-out; transform: perspective(1000px) rotateY(var(--ry, 0deg)); } Sharp marker: .angle-marker { width: 8px; height: 8px; background: rgba(232,120,48,0.15); transform: rotate(45deg); } .direction-chevron { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid rgba(232,120,48,0.15); } Bauhaus panel: .bauhaus-card { background: #f0e4d0; border: 2px solid rgba(232,120,48,0.12); border-radius: 0; padding: 32px; } Progress: .proof-progress { position: fixed; top: 0; left: 0; height: 3px; background: #e87830; transition: width 300ms ease-out; z-index: 100; } AVOID: Standard logic tutorials, corporate educational platforms, and minimal proof assistants. Let Bauhaus geometric precision and authoritative command create a logic platform where 論理 unfolds horizontally through geometric compositions, each deduction step a Bauhaus canvas of primary forms proving necessary conclusions. ## Uniqueness Notes 1. **Bauhaus for logic experimentation:** Geometric purity makes logical structures feel like abstract art compositions where form and function are identical. 2. **Horizontal-scroll as deduction direction:** Left-to-right progression creates the natural reading quality of proofs advancing through sequential logical steps. 3. **Tilt-3d as multi-angle examination:** Perspective shifts create the quality of logical structures with hidden depth revealed by changing viewpoint. 4. **Custom geometric illustrations:** Kandinsky-style compositions make abstract logical operations visually expressive and artistically compelling. 5. **Constructivist dividers as logical transitions:** Bold geometric elements mark the decisive moments where reasoning shifts direction. **Seed/Style:** aesthetic: bauhaus, layout: horizontal-scroll, typography: futura-geometric, palette: sunset-warm, patterns: tilt-3d, imagery: custom-illustration, motifs: sharp-angles, 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 bauhaus aesthetic, horizontal-scroll layout, sunset-warm palette, custom-illustration imagery, and authoritative tone.