# Design Language for ronpa.day ## Aesthetics and Tone ronpa.day channels the paradox at the heart of Japanese debate culture -- "ronpa" (論破) means to demolish an argument, to shatter logic with superior logic -- and the site captures that explosive intellectual energy through the unlikely lens of a zen garden mid-earthquake. Imagine a karesansui (dry landscape garden) where the raked gravel patterns are vibrating at 120bpm, where the carefully placed stones are mid-levitation, where the stillness of contemplation collides with the velocity of rhetorical combat. The aesthetic is **zen**, but not the passive, incense-scented zen of wellness apps. This is the zen of Rinzai -- the tradition of the koan, the sudden shout, the master who slaps you awake. Every visual element exists in a state of controlled tension between absolute calm and explosive release. The tone is **energetic** in the way a thunderstorm over a mountain monastery is energetic -- there is tremendous force, but it moves through channels of discipline. Colors pulse like heartbeats. Typography lands like the strike of a wooden fish (mokugyo). Scroll interactions feel like the crack of a bamboo shinai against a kendo target. The overall experience should make the visitor feel simultaneously meditative and electrified, as if they have just been asked an unanswerable question and the answer is forming in their body before their mind catches up. The visual language draws from three specific sources: the ink-wash dynamism of Sesshuu Touyou's "Haboku Sansui" (Splashed Ink Landscape), where formlessness contains entire mountain ranges; the architectural tension of Tadao Ando's Church of the Light, where a cruciform slit in concrete transforms darkness into revelation; and the kinetic calligraphy of Inoue Yuuichi, whose single brushstrokes contain the fury of a typhoon channeled through a single arm. ## Layout Motifs and Structure The layout employs **parallax-sections** -- but reconceived as tectonic plates sliding against each other rather than the typical layered-postcard effect. The page is divided into massive horizontal bands (each occupying 100vh minimum) that move at different velocities as the user scrolls, creating the sensation of geological fault lines shifting. Some sections advance faster than the content below them, others lag behind, and the boundaries between sections are not clean horizontal lines but **organic blob edges** -- irregular, amoeba-like SVG clip-paths that make each section appear to be consuming or being consumed by its neighbor. **Spatial Architecture:** - **The Void (Opening):** A full-viewport expanse of deep charcoal (#2C2C2C) with a single circle of raked-gravel texture (CSS radial gradient with fine concentric lines) occupying the center 40% of the screen. The domain name "ronpa.day" appears letter-by-letter inside this circle, each character arriving with a pulse animation. No navigation visible. The circle itself breathes -- scaling between 0.98 and 1.02 on a 4-second ease-in-out loop. - **The Fault (Transition):** As the user scrolls, the circle fractures along an organic blob boundary. The top half of the viewport slides upward at 1.3x scroll speed while the bottom slides at 0.7x, revealing a warm earth-tone gradient beneath (#8B7355 to #C4A882). This parallax differential creates the sensation of tearing open the surface of the page. - **The Garden (Content Sections):** Content lives in 3-5 parallax bands, each with a distinct earth-tone background and its own scroll velocity. Text blocks are positioned with ma (negative space) principles -- never filling more than 45% of any section's width, always biased toward the left or right third (alternating). Between content bands, organic blob dividers undulate gently via CSS animation, their edges shifting by 5-10px on a slow random cycle. - **The Strike (Accent Moments):** Punctuating the garden sections are full-bleed "strike moments" -- single words or short phrases rendered at 15vw+ in the grotesque-neo typeface, positioned to overlap two parallax bands simultaneously. These words appear to hover between the tectonic layers, belonging to neither, creating z-axis depth. - **The Return (Footer):** The final section inverts the opening -- a white circle (#F5F0E8) contracts inward on a dark field, pulling all content toward its center like a gravitational singularity. The circle shrinks as the user approaches the bottom, eventually collapsing to a single point. The overall grid is deliberately **not centered**. Content containers use a 12-column grid where content occupies columns 2-6 or 7-11, never the full span, never perfectly centered. This asymmetry creates visual tension that mirrors the argumentative energy of ronpa. ## Typography and Palette **Typography:** - **Display / Headlines:** "Space Grotesk" (Google Fonts) -- a grotesque-neo typeface with distinctive angular terminals and a slightly mechanical quality that evokes precision without coldness. Used at weights 500-700, sizes ranging from 2rem for section headers to 15vw for the strike moments. The angular cuts on letters like 'a', 'e', and 'g' reference the sharp edges of split bamboo. Headlines use `letter-spacing: -0.03em` at large sizes for aggressive tightness, expanding to `0.01em` at body-adjacent sizes. All headlines set in sentence case -- the restraint of lowercase contains the force of the content. - **Body / Reading Text:** "Libre Baskerville" (Google Fonts) -- a refined serif with generous x-height and sturdy serifs designed for on-screen readability. Used at weight 400 (regular) and 700 (bold), 1.05rem-1.15rem, with `line-height: 1.75` for generous vertical breathing room. The contrast between the mechanical grotesque headlines and the humanist serif body text mirrors the ronpa dynamic: sharp attack, considered response. Body text color is never pure black -- always #3D3530 (warm charcoal) on light backgrounds, or #E8E0D4 (warm cream) on dark backgrounds. - **Accent / Captions:** "IBM Plex Mono" (Google Fonts) at weight 400, 0.8rem, `letter-spacing: 0.06em`, uppercase. Used sparingly for section labels, timestamps, and metadata. The monospace accent creates a third typographic voice that functions like the crack of the mokugyo -- rhythmic, measured, structural. - **Typographic Behavior:** All display text uses a custom CSS animation where characters subtly shift their `letter-spacing` by 0.5px on a staggered 6-second cycle, creating a breathing effect in the typography itself. This is almost imperceptible but contributes to the feeling that the text is alive, tensed, ready to strike. **Palette:** The palette is **earth-tones** drawn from the specific materials of a Japanese dry garden: stone, gravel, moss, bark, and the iron-oxide red of a torii gate. | Role | Color | Name | Source | |------|-------|------|--------| | Primary Dark | #2C2C2C | Sumi (Ink) | Charcoal ink stick ground on suzuri stone | | Primary Light | #F5F0E8 | Washi (Paper) | Unbleached kozo paper | | Earth Base | #8B7355 | Tsuchi (Earth) | Kyoto garden soil after rain | | Earth Warm | #C4A882 | Suna (Sand) | Raked karesansui gravel | | Earth Deep | #5C4833 | Kawa (Bark) | Cryptomeria bark, wet | | Accent Strike | #B84C28 | Torii (Gate) | Vermillion torii oxide red | | Moss Accent | #6B7F5E | Koke (Moss) | Temple garden moss in shade | | Highlight | #D4A04A | Kinsai (Gold Dust) | Gold leaf flake on lacquerware | The palette operates on a tension principle: 80% of the page uses the dark/light/earth triad (#2C2C2C, #F5F0E8, #8B7355), maintaining zen restraint. The remaining 20% deploys the accent colors (#B84C28, #6B7F5E, #D4A04A) as sudden punctuation -- a torii-red underline, a moss-green hover state, a gold-dust highlight on key phrases. This ratio mirrors the ronpa principle: long passages of measured argument punctuated by devastating single strikes. Gradients are used sparingly and always follow natural transitions: `linear-gradient(180deg, #2C2C2C 0%, #5C4833 50%, #8B7355 100%)` for section backgrounds that feel like descending from shadow into warm earth. No synthetic or neon gradients. ## Imagery and Motifs **Nature-Elements Imagery:** All visual content channels **nature-elements** -- specifically the five elements of Japanese philosophy (godai): earth, water, fire, wind, and void. Rather than literal photographs, these elements manifest as abstract CSS and SVG treatments: 1. **Earth (Chi):** Textured backgrounds using a repeating SVG pattern of fine horizontal striations (1px lines at 3px intervals, #8B7355 at 15% opacity on #F5F0E8). These raked-gravel patterns appear in content sections and create depth without heaviness. The pattern slowly rotates by 0.5 degrees on scroll, imperceptible but felt. 2. **Water (Sui):** Organic blob dividers between sections use SVG `` elements with cubic bezier curves that animate their control points on a 12-second loop. The blobs suggest water flowing between rocks -- never sharp, never geometric, always finding the path of least resistance. Generated procedurally using 8-12 control points with randomized offsets. 3. **Fire (Ka):** The accent color (#B84C28) appears in pulse-attention animations -- elements that throb with a subtle scale/opacity cycle (1.0 to 1.05 scale, 1.0 to 0.85 opacity, 2-second duration). These pulses draw the eye like embers in ash. Applied to key interactive elements and the "strike moment" typography. 4. **Wind (Fuu):** Parallax movement itself represents wind -- the differential scroll speeds create the sensation of invisible currents moving through the page. Additionally, thin decorative lines (1px, #C4A882 at 40% opacity) drift across sections at angles between 5-15 degrees from horizontal, animated with CSS transform to slide leftward at constant velocity, like wind-lines in ukiyo-e prints. 5. **Void (Kuu):** The generous negative space -- sections where nothing exists, backgrounds where no content intrudes, the breathing room between typographic elements. Void is the most important element and occupies at least 40% of any given viewport. **Organic-Blob Motifs:** The signature visual motif is the **organic blob** -- amorphous, soft-edged shapes that appear as: - Section dividers (described above) - Background decorative elements: large (30-50vw) semi-transparent blobs (#8B7355 at 8% opacity) that float behind content, their edges animated on a slow cycle - Cursor proximity effects: when the cursor approaches within 200px of a blob, its nearest edge gently deforms toward the cursor, as if the blob is aware of the visitor's presence - Text containers: key pull-quotes sit inside blob-shaped containers with `clip-path: url(#blob-path)` using SVG definitions, giving text blocks an organic, non-rectangular frame All blobs are generated from a base algorithm: 8 control points distributed evenly around a circle, each offset radially by a random value between -15% and +15% of the radius, with smooth cubic bezier interpolation. No two blobs on the page share the same shape. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens as an immersive full-viewport experience. On load, the screen is entirely #2C2C2C with the breathing gravel-circle at center. No navigation, no header, no hamburger menu. The domain name "ronpa.day" fades in letter by letter inside the circle using Space Grotesk at 3rem, weight 700, #F5F0E8, with 200ms stagger between characters. Each letter arrives with a subtle pulse-attention animation (scale from 1.2 to 1.0, opacity from 0 to 1, 400ms ease-out). After all letters arrive, the circle itself executes one strong pulse (scale to 1.08 and back, 600ms) as a visual exclamation point. **Scroll-Driven Tectonic Parallax:** As the user scrolls past the first 100vh, the opening circle fractures along a procedurally generated organic-blob boundary. Implement using `clip-path` on two overlaid div layers, each containing half of the opening section, with different `transform: translateY()` values driven by scroll position via Intersection Observer or scroll event listeners. The top layer moves at `scrollY * 1.3`, the bottom at `scrollY * 0.7`. The crack between them reveals the first earth-tone content section beneath. Each subsequent content section lives in its own parallax band with a scroll-speed multiplier between 0.6 and 1.4 (alternating faster/slower). Section backgrounds are full-bleed earth-tone gradients. Content within sections fades in using pulse-attention: elements scale from 0.95 to 1.0 and opacity from 0 to 1 as they enter the viewport, with a subtle 2-frame pulse at full visibility. **Strike Moment Typography:** At 2-3 points in the scroll journey, a single word or short phrase (max 3 words) appears at 15-20vw in Space Grotesk weight 700, color #B84C28, positioned to span two parallax sections. These words use `position: sticky` combined with parallax offsets so they appear to float in a different z-plane than surrounding content. On viewport entry, they animate with a rapid scale-in (from 0.3 to 1.0, 300ms, cubic-bezier(0.34, 1.56, 0.64, 1)) followed by a settling pulse. **Organic Blob Animation System:** Implement a reusable blob generator in vanilla JavaScript: - Accept parameters: `pointCount` (8-12), `radiusBase`, `radiusVariance`, `animationSpeed` - Generate SVG `` with cubic bezier curves connecting randomized control points - Animate by slowly cycling each control point's radial offset using `requestAnimationFrame` with sine-wave interpolation - Export as both `clip-path` definitions (for section dividers) and standalone SVG elements (for decorative blobs) - Apply `will-change: d` to animated paths for GPU acceleration **Wind-Line Decorative System:** Implement 5-8 thin lines per content section, each a 1px element with varying lengths (20vw-60vw), angled between 5-15 degrees, colored #C4A882 at 30-50% opacity. Animate with CSS `transform: translateX()` at constant speeds between 20px/s and 60px/s, looping seamlessly. Lines should have staggered start positions so they never align. Use `overflow: hidden` on parent sections to clip line endpoints cleanly. **Cursor-Reactive Blobs:** For decorative background blobs, implement a proximity detection system: on `mousemove`, calculate distance from cursor to each blob's nearest control point. When distance < 200px, apply a radial deformation toward the cursor proportional to `(200 - distance) / 200 * maxDeformation` where `maxDeformation` is 20px. Smooth the deformation with lerp (linear interpolation at 0.08 factor per frame) to prevent jerky movement. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, team member cards, feature comparison tables. No marketing patterns whatsoever. This is a narrative, contemplative, visceral experience. **CSS Custom Properties for Theming:** ``` --sumi: #2C2C2C; --washi: #F5F0E8; --tsuchi: #8B7355; --suna: #C4A882; --kawa: #5C4833; --torii: #B84C28; --koke: #6B7F5E; --kinsai: #D4A04A; --font-display: 'Space Grotesk', sans-serif; --font-body: 'Libre Baskerville', serif; --font-accent: 'IBM Plex Mono', monospace; ``` ## Uniqueness Notes **Differentiators from other designs:** 1. **Tectonic Parallax as Narrative Device:** While parallax-sections appears at only 2% frequency in the portfolio, ronpa.day reimagines parallax not as decorative layering but as geological metaphor -- sections are tectonic plates whose differential movement creates fault lines. The organic-blob crack between sections is unique; no other design uses procedurally generated blob boundaries as parallax seams. This transforms a familiar technique into something visceral and unprecedented. 2. **Zen-Energetic Paradox as Core Identity:** The collision of zen aesthetic (9% frequency) with energetic tone (8% frequency) is a deliberate oxymoron that no other design attempts. Where zen designs in the portfolio tend toward passive calm and energetic designs tend toward neon chaos, ronpa.day occupies the precise tension point between the two -- the explosive stillness of a koan, the violent calm before a kendo strike. This paradox is encoded at every level: breathing circles that pulse, serene earth tones punctuated by torii-red strikes, generous negative space interrupted by 15vw typography. 3. **Five-Element Nature System as Structural Framework:** Rather than using nature-elements (2% frequency) as decorative garnish, ronpa.day maps the five Japanese classical elements (godai) to specific design subsystems: earth=texture, water=blob-dividers, fire=pulse-animations, wind=parallax-movement, void=negative-space. This creates a coherent cosmology where every visual decision has philosophical grounding. No other design in the portfolio treats nature imagery as an organizational taxonomy rather than mere decoration. 4. **Cursor-Reactive Organic Blobs:** The organic-blobs motif (5% in imagery, used as motifs here) gains interactivity through cursor proximity detection -- blobs that deform toward the visitor's cursor as if alive and aware. This converts a static decorative pattern into a responsive, almost biological interaction that is entirely unique in the portfolio. 5. **Typographic Breathing Animation:** The subtle letter-spacing oscillation on display text (0.5px shift over 6 seconds) is a micro-animation that operates below conscious perception but contributes to the feeling of living typography. Combined with the pulse-attention pattern (5% frequency) applied to text entry, this creates a typographic system that feels tensed and vital rather than static. **Chosen Seed/Style:** `aesthetic: zen, layout: parallax-sections, typography: grotesque-neo, palette: earth-tones, patterns: pulse-attention, imagery: nature-elements, motifs: organic-blobs, tone: energetic` **Avoided Overused Patterns:** - playful aesthetic (95%) -- replaced with zen (9%) - centered layout (99%) -- replaced with asymmetric parallax-sections (2%) - mono typography (99%) -- replaced with grotesque-neo (4%) - warm palette (100%) -- replaced with earth-tones (3%), which are warm in hue but constrained in palette logic - scroll-triggered patterns (96%) -- replaced with pulse-attention (5%) as primary animation - friendly tone (98%) -- replaced with energetic (8%) - minimal imagery (95%) -- replaced with nature-elements (2%) - vintage motifs (88%) -- replaced with organic-blobs (5%)