# Design Language for ronri.net ## Aesthetics and Tone ronri.net ("ronri" from Japanese 論理, meaning "logic") inhabits the visual world of a late-night darkroom where analog film grain coats every surface, where the only light comes from a cluster of mismatched candles guttering on a stone ledge beside a cathode-ray monitor displaying procedural noise algorithms. The aesthetic is **grainy-textured** -- not the clean, digital simulation of grain found in Instagram filters, but the physical, oppressive grain of Tri-X 400 pushed three stops in Rodinal developer, the kind of grain that has mass and texture and makes you feel like you could scrape it off with a fingernail. Every surface, every background, every transition carries this particulate weight. The tone is **grounded-earthy**: no aspirational promises, no breathless excitement, no corporate polish. ronri.net communicates like a field notebook left open on a workbench -- matter-of-fact, unhurried, confident in its own weight. There is a quiet authority here that comes not from shouting but from the density of the materials themselves. Think of the difference between a motivational poster and a geological survey map. ronri.net is the survey map -- precise, unromantic, and beautiful precisely because it does not try to be. The atmosphere channels the intersection of three specific visual traditions: (1) the photographic grain and high-contrast printing of Robert Frank's "The Americans," where every image feels pulled from the chemical bath seconds too early; (2) the generative art of Casey Reas and Jared Tarbell, where algorithms produce organic complexity from minimal rules; and (3) the flickering candlelight of Georges de La Tour's paintings, where a single flame source creates dramatic chiaroscuro on every surface it touches. These three streams converge into a site that feels simultaneously ancient and computational, warm and systematic. ## Layout Motifs and Structure The layout follows a **broken-grid** architecture where content blocks deliberately violate alignment expectations. Nothing lines up neatly. Text columns shift leftward or rightward by seemingly arbitrary amounts (actually governed by a phi-ratio offset system: each successive block offsets by 1.618x the previous offset, wrapping and reversing direction when it exceeds the viewport boundary). This creates a reading experience that feels like scanning a wall of loosely pinned research notes -- each piece placed with intention but refusing to submit to mechanical uniformity. **Structural Principles:** - **Phi-Offset Grid:** An invisible 12-column grid underlies everything, but content blocks are placed starting at columns 1, 3, 2, 5, 1, 4... following a Fibonacci-derived sequence. Column spans vary between 5 and 9 columns. The effect is a jagged left edge and a ragged right edge, like torn paper. - **Vertical Rhythm Disruption:** Instead of consistent spacing between sections, gaps alternate between 8vh and 2vh in an irregular pattern (8, 2, 8, 8, 2, 8, 2, 2, 8...) creating a breathing rhythm that feels organic rather than mechanical. Some sections nearly collide; others float in isolation. - **Overlap Zones:** At three specific points in the scroll, content blocks overlap by 15-25%, with the lower block partially obscured. This overlap is not accidental -- it is a deliberate compositional choice that creates depth and suggests layered physical media (prints stacked on a light table). - **No Header, No Footer:** The site begins with content and ends with content. There is no navigation bar, no logo lockup at the top, no copyright block at the bottom. The domain name appears once, buried in the grain, visible only when the user reaches a specific scroll position where it fades in at 12% opacity in the background. - **Viewport Anchoring:** The first screen is entirely grain -- a full-viewport field of animated film grain with a single candle-flame SVG animation flickering near the bottom-third intersection point. Text does not appear until the user scrolls past this threshold, at which point the first content block slides in from the left with a broken-grid offset. **Responsive Behavior:** On narrow viewports (below 768px), the broken grid collapses to a single column but retains its irregular vertical spacing and overlap zones. The phi-offset manifests as varying left-margin indentations (0, 1rem, 0.5rem, 2rem, 0) rather than column shifts. ## Typography and Palette **Typography:** - **Display / Headlines:** "EB Garamond" (Google Fonts) -- the digitization of Claude Garamont's original sixteenth-century typeface, specifically the 500 weight italic for all display text. This is not the domesticated Garamond of corporate annual reports; at large sizes (4rem-7rem), EB Garamond's idiosyncratic letterforms reveal their calligraphic origins -- the slight asymmetry of the 'o', the dancing baseline of italic lowercase, the sharp, almost aggressive serifs. Used exclusively in sentence case. Letter-spacing: -0.02em (tight, to increase the density and gravity of headlines). Line-height: 1.08. - **Body Text:** "Crimson Pro" (Google Fonts) -- a contemporary old-style serif designed specifically for long-form reading at small sizes. Weight 400 for body, 300 for captions and metadata. At 1.05rem / 1.7 line-height, Crimson Pro provides excellent readability while maintaining the historical serif character that harmonizes with EB Garamond. The slightly narrower set-width compared to Garamond creates a visual distinction between hierarchy levels without resorting to sans-serif contrast. - **Accent / Labels:** "JetBrains Mono" (Google Fonts) -- weight 300, used exclusively for numerical data, timestamps, coordinates, and any text that represents computed or systematic information. Set at 0.8rem with letter-spacing +0.06em. This monospace face introduces a cold, computational counterpoint to the warm serif voices, reinforcing the logic-meets-candlelight tension at the core of the design. **Palette (Monochrome with Flame Accent):** The palette is strictly **monochrome** -- a grayscale spectrum from near-black to warm off-white, with exactly one chromatic exception: the amber of candlelight. | Role | Color | Hex | Description | |------|-------|-----|-------------| | Deepest Black | Charred Wick | `#0D0B09` | Used for primary text and the densest grain areas. Not pure black -- carries a warm brown undertone like charcoal | | Dark Ground | Soot | `#1E1A16` | Primary background in the darkest sections. The color of a wall in a room lit only by candles | | Mid Shadow | Ash | `#3B342D` | Secondary backgrounds, card surfaces, the grain's mid-tone layer | | Warm Gray | Tallow | `#6B6058` | Body text on light backgrounds, borders, dividers. Named for the rendered animal fat of traditional candles | | Light Ground | Parchment | `#D4CBC0` | The lightest background tone. Not white -- the warm, yellowed tone of paper stored in a warm room | | Near White | Smoke | `#EDE8E2` | Used sparingly for highlighted text and the brightest grain speckles | | Flame Accent | Candleflame | `#C4841D` | The single chromatic color. Used only for: the candle flame SVG, active/hover states, and the thin underlines beneath linked text. Never for backgrounds, never for large areas | | Flame Highlight | Wick Glow | `#E8A832` | A brighter variant of Candleflame, used exclusively for the innermost core of the candle flame animation and for text selection highlight (::selection) | ## Imagery and Motifs **Generative Art as Primary Visual Language:** ronri.net uses no photographs, no illustrations, no icons. Every visual element is **generative-art** -- algorithmically produced through JavaScript canvas or SVG manipulation, rendered in real-time in the browser. This is not decorative generative art; it is the visual embodiment of "ronri" (logic) -- systems of rules producing emergent visual complexity. Specific generative systems: 1. **Perlin Grain Field:** The foundational visual layer. A full-viewport `` element renders animated Perlin noise at a resolution of approximately 1 pixel per 3 CSS pixels (creating inherent blockiness). The noise values are mapped to the monochrome palette: values below 0.3 render as `#0D0B09`, values 0.3-0.6 as `#1E1A16`, values 0.6-0.85 as `#3B342D`, and values above 0.85 as `#6B6058`. The noise field animates at 8fps (deliberately low, creating a stuttering, film-projector quality). This canvas sits behind all content at `z-index: -1` with `opacity: 0.35`, creating a living grain texture across the entire site. 2. **Flame Particle System:** The candle motif is realized through a particle emitter positioned at the bottom-third of the first viewport. 40-60 particles at any given time, each a small circle (2-6px radius) colored along a gradient from `#C4841D` to `#E8A832` to `#EDE8E2`. Particles rise with slight horizontal oscillation (sine wave, amplitude 3px, frequency randomized per particle), fade in opacity as they rise, and die after traveling 80-150px. A larger, static teardrop SVG shape (the flame body) pulses gently in scale (0.95-1.05, period 2.3s) behind the particles. The combined effect is a convincingly organic candle flame that casts no actual light but whose presence suffuses the opening experience. 3. **Logic Gate Diagrams:** At three points in the scroll, generative SVG drawings appear inline with text. These are algorithmically constructed logic gate circuit diagrams -- AND, OR, NOT, XOR gates connected by routing lines -- that are different on every page load. The gates are drawn with hand-tremor line distortion (Gaussian noise added to SVG path control points, sigma 0.8px) and rendered in `#6B6058` with `#C4841D` for signal-carrying paths. They are not functional diagrams; they are visual poems about logic, generated by logic. 4. **Glitch Disruptions:** At irregular intervals during scroll (triggered at specific scroll positions, not time-based), the entire viewport undergoes a **glitch** transformation lasting 120-300ms. The glitch effect combines: (a) horizontal slice displacement -- the viewport is divided into 8-15 horizontal bands that shift left or right by 5-40px; (b) RGB channel separation -- a CSS filter duplicates the content with 2px offsets in red and cyan; (c) a brief flash of `#C4841D` in one of the displaced slices. These glitches are rare (4-6 across the entire scroll) and unpredictable, creating a sense that the system is alive and occasionally faltering -- logic encountering its own limits. 5. **Candle-Atmospheric Backgrounds:** Between major content sections, transitional zones feature a radial gradient centered at a randomized point, fading from `#1E1A16` at the edges to a barely-perceptible warm center (`#3B342D` with 5% `#C4841D` blended) that suggests candlelight illuminating a surface from just off-screen. These zones are 30-50vh tall and contain no content -- they are purely atmospheric, giving the reader space to breathe in the candlelit darkness. ## Prompts for Implementation **Full-Screen Narrative Scroll Experience:** The site opens to absolute darkness -- a full-viewport field of the animated Perlin grain, seething slowly at 8fps in the monochrome palette. After a 1.5-second delay, the candle flame particle system ignites at the bottom-third position: first a single bright point of `#E8A832`, then the particles begin to rise, then the teardrop flame body fades in behind them. The domain name "ronri.net" does not appear. There is no text. Only grain and flame. As the user scrolls, the grain field remains fixed (position: fixed), and content slides upward over it. The first text block enters from the left with a broken-grid offset (starting at grid column 3, spanning 6 columns), carrying a semi-transparent background of `#1E1A16` at 85% opacity that partially obscures the grain beneath. Text is set in Crimson Pro at 1.05rem, `#D4CBC0`. The block's entrance is not animated with a spring or bounce -- it simply appears, already in position, as if it was always there and the grain was merely obscuring it. This is a **fade-reveal** pattern: opacity transitions from 0 to 1 over 600ms, triggered when the element enters 70% of the viewport. **Glitch Transitions:** Between the third and fourth content sections, the first glitch event fires. It should feel involuntary -- the user does not trigger it consciously. The implementation: a scroll event listener tracks position and fires the glitch at a fixed scroll-y coordinate. The glitch function: (1) creates a full-viewport overlay div at z-index 9999; (2) captures the current viewport as a series of horizontal clip-path slices; (3) offsets each slice by a random horizontal amount using CSS transform; (4) applies a CSS filter combining `hue-rotate(15deg)` and a red/cyan duplication via pseudo-elements offset by 2px; (5) after 180ms, removes all modifications. The entire sequence uses requestAnimationFrame, no CSS transitions -- it should feel mechanical and instantaneous, not smooth. **Content Block Styling:** Each content block is a `
` with: `background: rgba(30, 26, 22, 0.85)`, `padding: 2.5rem 3rem`, no border-radius (sharp corners only -- roundedness contradicts the aesthetic), and a subtle `box-shadow: -4px 0 0 #C4841D` on the left edge only -- a thin amber line suggesting the candle's light catching the edge of a card. On hover, this shadow expands to `-6px 0 0 #E8A832` over 200ms. **Generative Logic Gate Interstitials:** Between content blocks, at three scroll positions, a `` element renders a procedurally generated logic circuit. Implementation: define a set of gate types (AND, OR, NOT, XOR) as SVG path templates. A layout algorithm places 5-9 gates on a canvas, connects them with orthogonal routing lines (horizontal-vertical-horizontal), adds hand-tremor noise to all paths, and renders the result. The canvas fades in with the same fade-reveal pattern as text blocks. Each page load produces a unique circuit. **Candle Flame as Persistent Presence:** After the opening sequence, the candle flame does not disappear. It repositions to the bottom-right corner of the viewport (position: fixed, bottom: 2rem, right: 2rem) at 60% of its original scale. It remains there throughout the entire scroll, a constant warm companion in the corner of vision. Its particle count reduces to 15-25 for performance. Clicking or tapping the flame triggers a brief flare (scale 1.0 to 1.4 over 150ms, then back to 1.0 over 400ms with easing) and temporarily increases the Perlin grain opacity from 0.35 to 0.55 for 2 seconds, as if the flame's light momentarily intensified. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, hero text with gradient backgrounds, floating navigation bars, hamburger menus, footer link columns, social media icons, newsletter signup forms. This site has no commercial intent. It is a contemplative space. **Scroll Behavior:** Native smooth scrolling disabled. Scrolling should feel direct and physical -- no momentum smoothing, no scroll-jacking. The content moves exactly as the user's input dictates. The only scroll-linked behaviors are the fade-reveal triggers and the glitch events. **Performance Consideration:** The Perlin noise canvas should use a Web Worker for noise calculation if available, falling back to main-thread computation. Target: consistent 8fps update for the grain (not 60fps -- the low framerate is intentional and reduces GPU load). Particle system runs at 30fps. All generative elements use `will-change: transform` and are composited on their own layers. ## Uniqueness Notes **Differentiators from other designs:** 1. **Grainy-Textured as Structural Foundation, Not Filter:** At 1% frequency, grainy-textured is one of the rarest aesthetics in the portfolio. But ronri.net goes beyond applying grain as a decorative overlay -- the animated Perlin noise field IS the background, IS the visual ground of the entire experience. Every other surface exists in relationship to the grain. This is not grain-as-seasoning; it is grain-as-architecture, creating a living, breathing substrate that makes the site feel physically present in a way that clean digital surfaces cannot. 2. **Monochrome + Single Chromatic Exception (Candleflame):** While monochrome appears at 11% frequency, no other design in the portfolio uses a strictly monochrome palette with exactly one chromatic accent color derived from a specific physical light source (candlelight). The amber of `#C4841D` and `#E8A832` is not arbitrary -- it is the specific color temperature of a beeswax candle flame (~1800K), and its usage is restricted to contexts that logically connect to flame (the particle system, the hover states that suggest "touching" and therefore "warming," the left-edge box-shadows that suggest light catching a surface edge). This discipline creates a visual hierarchy that is impossible to achieve with a broader palette. 3. **Generative Art as Sole Imagery Mode (No Photography, No Illustration):** At 2% frequency, generative-art is severely underrepresented. ronri.net commits fully: there are zero static images on the site. Every visual -- the grain field, the candle flame, the logic gate circuits, the atmospheric gradients -- is produced by code at runtime. This means the site literally looks different on every visit (the noise seed changes, the circuit layouts randomize, particle behaviors vary). The site is not a document; it is a running program that produces documents. 4. **Broken-Grid with Phi-Ratio Offset System:** At 4% frequency, broken-grid layouts are rare. ronri.net's implementation is unique in that the grid-breaking follows a mathematical system (Fibonacci-derived column offsets) rather than arbitrary designer placement. This creates a paradox that embodies the domain name: the layout looks chaotic and organic, but it is produced by rigorous logic. The grid is broken by mathematics, not by whim. 5. **Candle-Atmospheric Motif as Persistent Interactive Element:** At 1% frequency, candle-atmospheric is among the rarest motifs. The candle flame is not a static illustration or background image -- it is a real-time particle system that persists throughout the entire scroll experience and responds to user interaction (click/tap flare). No other design in the portfolio features a persistent, interactive, generative motif that accompanies the user through the entire site. **Seed Documentation:** - aesthetic: grainy-textured (1% frequency -- nearly unused) - layout: broken-grid (4% frequency -- underused) - typography: garamond-classic (2% frequency -- underused) - palette: monochrome (11% frequency -- moderate, but unique in implementation) - patterns: glitch (rare as primary pattern -- most glitch usage is aesthetic, not behavioral) - imagery: generative-art (2% frequency -- severely underused) - motifs: candle-atmospheric (1% frequency -- nearly unused) - tone: grounded-earthy (3% frequency -- underused) **Avoided Overused Patterns:** - playful aesthetic (95%) -- replaced with grounded-earthy gravitas - centered layout (99%) -- replaced with broken-grid asymmetry - scroll-triggered patterns (96%) -- used sparingly (fade-reveal only), primary pattern is glitch - friendly tone (98%) -- replaced with matter-of-fact, grounded authority - warm palette (100%) -- palette is monochrome, not warm (the candleflame accent is chromatic but occupies <2% of visual area) - mono typography (99%) -- replaced with garamond-classic serif pairing - minimal imagery (95%) -- replaced with generative-art (dense, active, system-driven) - photography imagery (72%) -- zero photographs used - vintage motifs (88%) -- replaced with candle-atmospheric (specific, not generically vintage)