# Design Language for ronri.org ## Aesthetics and Tone ronri.org channels a pop-art aesthetic — the bold, graphic visual language of Warhol and Lichtenstein applied to a 論理 (logic) organizational platform. The site pops — high-contrast outlines, Ben-Day dot patterns, and the ironic celebration of logical reasoning treated as mass-culture phenomenon worthy of gallery walls. Inspiration draws from the serial repetition of Andy Warhol, the comic-panel compositions of Roy Lichtenstein, the bold flatness of Corita Kent's serigraphs, and the graphic power of Barbara Kruger's text-image works. The tone is professional — clear, competent language that treats logical organization with institutional credibility while the pop-art visuals provide energetic counterpoint. ## Layout Motifs and Structure The layout uses a **timeline-vertical** architecture — content organized along a vertical timeline that creates the sequential-reasoning quality of logical arguments progressing through ordered steps. **Timeline Vertical Architecture:** - Central vertical line (2px) as timeline spine - Content panels alternating left and right of timeline - Content panels: max-width: 480px on each side - Timeline nodes (12px circles) marking logical milestones - Container: max-width: 1040px centered - The timeline creates the sequential quality of logical proofs advancing step by step through necessary conclusions **Section Sequence:** 1. **POW:** Hero with frutiger-clean title on gold-black-luxury pop gradient, hand-drawn comic-style logic illustrations, crystalline gem-like truth markers 2. **PANELS:** Logic steps along timeline — blur-focus interactive selective-attention transitions with hand-drawn expressive illustrations 3. **SPLASH:** Featured logical proof in full-width pop moment with crystalline brilliant truth indicators and hand-drawn dramatic illustration 4. **STRIPS:** Supporting logic in compact timeline with crystalline simplified markers 5. **FIN:** Footer as comic ending — professional farewell with crystalline settled gems and credible closing ## Typography and Palette **Typography:** - **Headlines:** "DM Sans" (Google Fonts) — frutiger-clean humanist sans at 2.4rem-3rem, weight 700. Its clean, approachable forms create the readability quality of logical statements that are accessible to everyone, aligned with pop art's democratization of high culture. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.7. - **Accent:** "DM Sans" at 1.1rem, weight 700 for logical emphasis and pop-art callout text. - **Labels:** "Inter" at 0.65rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **Pop Black:** #0c0808 — deep black for backgrounds - **Gold Surface:** #1c1810 — warm dark gold for panels - **Pop Gold:** #f0c830 — bright pop gold for primary accent - **Pop Red:** #e83838 — vivid pop red for secondary accent - **Pop Blue:** #2868d8 — bright pop blue for tertiary accent - **Pop White:** #f8f4e8 — warm white for text - **Shadow Gold:** #382c10 — gold shadow for secondary text - **Border Pop:** rgba(240,200,48,0.12) — gold tint border ## Imagery and Motifs **Hand-Drawn Comic Logic:** Logic concepts illustrated with comic-art-style drawings — bold outlines (3px) in Pop Gold or Pop Red, flat color fills, no gradients within shapes. Speech-bubble-like callout boxes for logical assertions (border-radius: 50% 50% 50% 0 with 3px border). The hand-drawn creates the Lichtenstein quality of logical concepts rendered as comic-panel moments. **Blur-Focus Selective Attention:** Timeline steps use selective focus — active step at full clarity, adjacent steps at filter: blur(1px) opacity(0.7), distant steps at filter: blur(2px) opacity(0.4). On scroll, focus shifts to current step. The blur creates the pop-art quality of isolating the moment that matters with dramatic visual hierarchy. **Crystalline Truth Gems:** Diamond-shaped truth indicators (10-16px) with gradient fills — linear-gradient(135deg, #f0c830, #f8e878) for true/valid, linear-gradient(135deg, #e83838, #f87878) for false/invalid. Clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%). The crystalline shapes create the precious quality of logical truth as something valuable and gem-like. **Gold-Black-Luxury Pop Atmosphere:** Background uses deep black with bold gold pop accents — radial-gradient(at 50% 30%, rgba(240,200,48,0.03), transparent 35%). Ben-Day dot pattern overlay: radial-gradient(circle, rgba(240,200,48,0.02) 1px, transparent 1px) with background-size: 8px 8px. The dots create the halftone-printing quality of pop art's mechanical reproduction. **Comic Panel Borders:** Content panels with thick, decisive borders — border: 3px solid rgba(240,200,48,0.15); with no border-radius (square corners for graphic impact). The bold borders create the comic-panel quality of logical steps as sequential frames in a visual narrative. ## Prompts for Implementation Build the page as a pop-art logic organization. Timeline: .logic-timeline { position: relative; max-width: 1040px; margin: 0 auto; padding: 80px 24px; } .timeline-spine { position: absolute; left: 50%; width: 2px; height: 100%; background: rgba(240,200,48,0.1); } .timeline-node { width: 12px; height: 12px; border-radius: 50%; background: #f0c830; position: absolute; left: 50%; transform: translateX(-50%); } .timeline-panel { max-width: 480px; } .timeline-panel.left { margin-right: auto; padding-right: 60px; } .timeline-panel.right { margin-left: auto; padding-left: 60px; } Blur focus: .logic-step { filter: blur(2px); opacity: 0.4; transition: all 400ms ease-out; } .logic-step.active { filter: blur(0); opacity: 1; } .logic-step.adjacent { filter: blur(1px); opacity: 0.7; } Ben-Day dots: .benday-overlay::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(240,200,48,0.02) 1px, transparent 1px); background-size: 8px 8px; pointer-events: none; } Comic panel: .pop-card { background: #1c1810; border: 3px solid rgba(240,200,48,0.15); border-radius: 0; padding: 28px; } AVOID: Standard logic platforms, corporate organizational tools, and minimal proof interfaces. Let pop-art graphic boldness and professional credibility create a logic organization where 論理 is celebrated as mass-culture phenomenon, each logical step a comic panel in a sequential proof that makes reasoning visually dramatic and accessible. ## Uniqueness Notes 1. **Pop-art for logic organization:** Bold graphic language makes logical reasoning feel like a celebrated cultural phenomenon worthy of gallery exhibition. 2. **Timeline-vertical as sequential proof:** Left-right alternating panels create the comic-strip quality of logical steps advancing through ordered frames. 3. **Blur-focus as selective attention:** Depth-of-field effects create the pop-art quality of dramatic isolation of the current logical moment. 4. **Ben-Day dots as mechanical reproduction:** Halftone patterns create the print-culture quality of logic mass-produced and democratized. 5. **Crystalline truth gems:** Faceted indicators create the precious quality of logical truth as something inherently valuable. **Seed/Style:** aesthetic: pop-art, layout: timeline-vertical, typography: frutiger-clean, palette: gold-black-luxury, patterns: blur-focus, imagery: hand-drawn, motifs: crystalline, tone: professional **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 pop-art aesthetic, timeline-vertical layout, gold-black-luxury palette, hand-drawn imagery, and professional tone.