# Design Language for ronri.xyz ## Aesthetics and Tone ronri.xyz is **a friendly glitch oracle** — imagine a chrome-plated vending machine that has started dreaming. The aesthetic is glitch rendered warm: not the cold dystopian datamosh of cyberpunk, but corrupted chrome that shimmers with personality, like a robot learning to smile and not quite getting the muscles right. The word "ronri" (論理) means logic in Japanese — so the core tension is between the rigidity of logic and the warmth of friendliness, expressed through chrome surfaces that develop unexpected color bleeds. Every surface appears to be made from **brushed chrome foil** — `#C8CDD6` as the primary metal, `#E8ECF0` as the highlight sheen, `#8C9099` as the shadow metal, and `#1A1C22` as the void behind the chrome. The glitch palette introduces living color against this metal field: `#7DFFD6` (mint glitch), `#FF7EC7` (bubblegum glitch), and `#FFDD57` (lemon glitch) — each applied sparingly as aberration artifacts rather than theme colors. The background holds at `#0F1014` — near-black with a slight blue cast, as if the chrome is inside a server room with no windows. Tone is **friendly-technical**: approachable, curious, a little playful. The glitches are not threatening — they are little jokes the interface tells you. A hover state flickers like recognition, not like malfunction. ## Layout Motifs and Structure The layout uses **layered-depth as a parallax stage**, not a Z-axis boast. Think of it as a shadowbox diorama: a shallow theater where chrome panels at different depths slide past each other as the user scrolls, creating the illusion of depth without ever going fully 3D. **Structural layers (front to back):** 1. **Glass Layer (z: 40)** — a thin frosted chrome strip, 3px tall, pinned to the top of the viewport. Contains no content — pure structural artifact. 2. **Icon Constellation Layer (z: 30)** — the primary content plane. A loose asymmetric grid of large icon-blocks (120×120px on desktop, 80×80px on mobile), each icon sitting inside a chrome-bordered pill. The grid has intentional gaps — not every cell is filled. Gaps hold `ripple` pattern circles that pulse once on page load then settle. 3. **Text Layer (z: 20)** — behind the icons, slightly blurred (0.5px backdrop-filter blur), holds the typographic body of the site. This layer scrolls at 0.92× speed creating a gentle parallax against the icons. 4. **Floating Fragment Layer (z: 50)** — small detached chrome shards (10–30px) that drift over the content plane. These are the floating-elements: they have no click targets, they exist only to suggest depth and movement. Each shard is a rotated rectangle with a chrome gradient and a 1.5px glitch-pink border. 5. **Void Layer (z: 0)** — the `#0F1014` background on which all other layers sit. The page has exactly **one scroll axis** (vertical). Horizontal scroll is never permitted. The icon constellation occupies the first 100svh; subsequent "chapters" of content appear as the user scrolls, each chapter bringing its own ripple circle group. **Ripple treatment (differentiator):** Rather than using ripple as an interaction response (which is its overused form), ripple here is used as a **structural breathing motif** — slow, CSS-keyframe-driven concentric arcs emanating from the center of each icon block, like sonar pings showing the icon is "alive." The arcs are `#7DFFD6` at 4% opacity, barely visible, and their cadence is 4 seconds — slow enough to read as ambient rather than interactive. ## Typography and Palette **Typography — variable-fluid, all from Google Fonts.** The font selection pairs a variable sans with a monospace to reinforce the friendly-logic duality of "ronri": - **Display / Headings:** [Syne](https://fonts.google.com/specimen/Syne), variable axis `wght 400-800`. Used for the site name and chapter headings. At the hero scale (clamp(3rem, 10vw, 9rem)), Syne's slightly quirky wide letterforms carry the friendly signal. The variable weight is animated: on page load, the site name blooms from weight 400 to 700 over 1.2 seconds — not a glitch, but a focusing, like eyes adjusting to chrome light. - **Body / Labels:** [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk), weight 300–500. The subtle geometric irregularity of Space Grotesk (mismatched bowls, slightly angled terminals) reads as machine-legible but personally warm. Body text sits at clamp(0.95rem, 1.5vw, 1.1rem) with line-height 1.65. - **Monospace / Data / Glitch Text:** [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono), weight 400. Used only for icon labels beneath each chrome pill and for any glitch-text effects. When glitch text fires (on hover), each character in a JetBrains Mono label is independently displaced by ±2px using CSS `transform: translate()` with a random delay, creating a typewriter-in-earthquake effect. **Palette:** | Role | Hex | Usage | |---|---|---| | Void | `#0F1014` | Background, deepest layer | | Chrome Base | `#C8CDD6` | Icon borders, structural lines | | Chrome Highlight | `#E8ECF0` | Pill top-edge shine, hover state | | Chrome Shadow | `#8C9099` | Pill bottom-edge, inset shadows | | Metal Mid | `#1A1C22` | Card backgrounds, dark fills | | Mint Glitch | `#7DFFD6` | Ripple arcs, accent hover state | | Bubblegum Glitch | `#FF7EC7` | Error states, fragment shard borders | | Lemon Glitch | `#FFDD57` | Active selection highlight, focus ring | Chrome surfaces use a CSS `linear-gradient(145deg, #E8ECF0 0%, #C8CDD6 40%, #8C9099 100%)` to simulate brushed metal. The gradient angle shifts on hover to `135deg`, a subtle 10-degree rotation that implies the surface catching new light. ## Imagery and Motifs **No photography. No illustrations of people. No stock imagery.** The entire visual language is built from three motif families: 1. **Chrome pill icons (primary imagery).** Each icon lives inside a rounded-rectangle "pill" container (border-radius: 28px). The icon itself is an SVG line-draw symbol from the Phosphor icon family or a hand-tuned equivalent, rendered at `#E8ECF0` (chrome highlight) on `#1A1C22` (dark metal background). Icon categories: logic gates (AND, OR, XOR), circuit paths, network nodes, language/speech bubbles with circuit patterns inside, and a few abstract friendly shapes (rounded stars, soft hexagons). The icon set should number 16–24 distinct symbols, each appearing in the constellation grid. 2. **Floating chrome shards (floating-elements motif).** Small parallelogram fragments (CSS `clip-path: polygon()` on div elements) drift across the page with `animation: float linear infinite` at extremely slow speeds (120–240 second full cycle). Each shard carries the brushed-metal gradient and a `#FF7EC7` border of 1.5px. On mobile, shards are reduced to 50% size and slowed by 50%. There are exactly 7 shards on the page — prime number for visual irregularity. 3. **Ripple sonar rings (patterns motif, used structurally).** Concentric SVG circles drawn at `stroke: #7DFFD6`, `stroke-width: 1`, `opacity: 0.04–0.08`, centered behind each icon pill. Three rings per icon, radiating outward. The rings are CSS-animated with `scale(1) → scale(2.4)` and `opacity(0.08) → opacity(0)` on a 4-second staggered loop. This is the ripple pattern used as **ambient sonar** rather than click feedback. ## Prompts for Implementation Build ronri.xyz as a **chrome logic dreamscape** — a single vertical scroll through a constellation of friendly glitch-icons, as if the visitor is floating through a server room where every machine has developed a tiny personality. There is no above-the-fold CTA, no pricing, no stat-grid, no testimonials. Only the constellation, the chrome, and the slow drift of fragments. **Macro narrative arc (top to bottom):** 1. **Chrome Horizon (100svh hero).** The page opens on a nearly dark field (`#0F1014`) with the site name "ronri.xyz" in Syne at ~10vw, centered, weight blooming 400→700 over 1.2 seconds. Below the name, in Space Grotesk weight 300, a single line in `#C8CDD6`: "the logic of small beautiful machines." No buttons. After 0.8s, the icon constellation fades in from opacity 0 and translateY(20px) → translateY(0). Floating shards are present from first paint but barely visible against the void. 2. **Icon Constellation (scroll section, ~200svh).** The asymmetric grid of chrome pill icons fills this zone. As the user scrolls, the text layer at 0.92× scrolls slightly behind the icons, creating the layered-depth parallax. Each icon pill has: chrome gradient border (2px), dark fill center, SVG icon at 48px, JetBrains Mono label in 11px below. On hover: the pill's gradient angle shifts to 135deg, the icon scales to 1.08×, the label character-shuffles in JetBrains Mono, and the ripple rings pulse once at double speed. 3. **Glitch Interlude (single-viewport break).** At the midpoint of scroll, a full-width "glitch banner" fires: the site name re-renders in three offset copies — `#7DFFD6` copy offset +3px/-2px, `#FF7EC7` copy offset -3px/+2px, white original — simulating RGB channel separation. The banner holds for 0.4 seconds then snaps back. This is the only moment of aggressive glitch; everything else is gentle. 4. **Logic Field (second constellation zone, ~150svh).** A second, denser group of icons arranged in tighter rows with more visible ripple rings. The floating shards here travel slightly faster (80% of original cycle time). A single line of Space Grotesk body text floats on the text layer for each icon group: brief, evocative, non-commercial. 5. **Void Horizon (footer, ~30svh).** The page ends simply: the site name again in Syne weight 400 (the un-bloomed, contemplative form), the domain in JetBrains Mono, and one ripple ring slowly expanding from center to edge of viewport, fading out, never looping — the page breathes out once and stops. **Technical implementation notes:** - Use `will-change: transform` on all parallax and floating layers to promote GPU compositing. - Chrome gradient on pills: `background: linear-gradient(145deg, #E8ECF0 0%, #C8CDD6 40%, #8C9099 100%)` on the border-box; the inner fill remains `#1A1C22`. - Glitch text character shuffle: iterate each character with `setTimeout(fn, i * randomBetween(20, 80))`, cycling through 3–5 random chars before settling on the real character. - Syne variable weight bloom: `@keyframes weightBloom { from { font-variation-settings: 'wght' 400 } to { font-variation-settings: 'wght' 700 } }` with `animation-fill-mode: forwards`. - Floating shard drift: `@keyframes floatDrift { 0% { transform: translate(0, 0) rotate(12deg); } 50% { transform: translate(-18px, 32px) rotate(8deg); } 100% { transform: translate(0, 0) rotate(12deg); } }`. - Ripple rings: three `` elements per icon in an SVG overlay, each staggered by 1.3 seconds, looping independently. ## Uniqueness Notes 1. **Glitch rendered warm, not dystopian.** Glitch-art appears at 10% in the corpus, but all instances use it as cold cyberpunk decoration. ronri.xyz is the only site that treats glitch as a personality trait of friendly machines — the aberrations are playful, brief, and always resolve back to calm chrome. The bubblegum and lemon color choices explicitly resist the neon-green/electric-blue cliché of cyberpunk glitch. 2. **Ripple as sonar ambient, not interaction feedback.** Ripple appears at 11% (the most overused pattern) and in every prior use it is an onClick/onHover ripple response. ronri.xyz uses ripple structurally: the rings are always running, slowly, behind icons — functioning as "breathing" indicators that the machine is thinking, not waiting for input. This is a fundamental inversion of the pattern's conventional role. 3. **Layered depth as shadow-box diorama, not Z-axis depth-of-field blur.** layered-depth at 8% in the corpus typically manifests as aggressive backdrop-filter blur and CSS `perspective()` transforms. ronri.xyz achieves depth through scroll-speed differential (0.92× text layer) and Z-stacked flat layers — like a paper theater, not a 3D scene. No perspective transforms, no depth-of-field blur. The depth reads as spatial without any 3D pretense. 4. **Variable weight bloom as the only animation on page load.** While variable-fluid typography at 6% is used elsewhere for responsive sizing, ronri.xyz uses the variable axis as a narrative beat — the title literally focuses (thin → bold) as the first thing the visitor sees, treating font weight as an emotional verb rather than a responsive tool. 5. **Prime number of floating elements (7 shards).** Using exactly 7 shards exploits visual asymmetry without requiring manual placement: any prime number of evenly-spaced elements in a field creates irregular visual gaps. This is a rule-based approach to randomness that other floating-elements implementations (at 3%) do not use. **Chosen seed:** `aesthetic: glitch, layout: layered-depth, typography: variable-fluid, palette: chrome-metallic, patterns: ripple, imagery: icon-heavy, motifs: floating-elements, tone: friendly` **Avoided from frequency analysis:** monochrome palette (11%, too common), glassmorphism surfaces (instead uses chrome-metal gradient), aggressive cyberpunk neon (replaced with bubblegum/lemon/mint glitch palette for warmth), click/hover ripple feedback (replaced with ambient sonar ripple), 3D perspective transforms for layered depth (replaced with parallax scroll-speed differential).