# Design Language for ronri.day ## Aesthetics and Tone ronri.day ("ronri" meaning "logic" in Japanese) presents itself as an alternate-reality Swiss Federal Department of Computational Logic -- a government agency that never existed, staffed by machines that catalogue the formal rules of thought. The aesthetic is **Swiss International Style** filtered through a sci-fi lens: clean Helvetica-descendant grids and mathematical precision, but rendered on cathode-green terminals embedded in wine-dark marble walls. Think of a brutally rational filing cabinet built inside a Roman bathhouse, where every drawer contains a holographic theorem. The tone is **friendly** in the way a well-designed public transit system is friendly: it does not explain itself excessively, but everything is exactly where you expect it to be. Labels are clear. Transitions are purposeful. The experience communicates warmth through competence rather than through exclamation marks. A visitor should feel like they have been granted visitor credentials to a beautiful, orderly institution that genuinely wants them to understand what it does. The color story begins with deep burgundy -- the color of aged mahogany lecterns, of wax seals on parliamentary documents, of the velvet lining inside instrument cases. This anchors the warmth. Against it, cool marble whites and graphite grays provide the Swiss rationality. Accent glows in teal-cyan (#00b4d8) evoke HUD readouts and holographic projections, creating the sci-fi dimension. ## Layout Motifs and Structure The layout uses a **stacked-sections** architecture -- full-width horizontal bands that tile vertically down the page, each acting as a self-contained "department floor" within the institution. Unlike generic stacked layouts, each section has a distinct internal grid personality while sharing consistent outer margins (clamp(2rem, 5vw, 6rem) on each side). **Section Architecture:** - **Section 0 (Lobby):** A full-viewport marble-textured entrance. Centered logotype rendered in slab-serif at 8vw. Below it, a single counter-animated number ticks upward: "Theorems Catalogued: 1,247,891" -- incrementing by 1 every 3 seconds. No other content. The marble texture is generated via CSS `background-image` using layered radial gradients in #f5f0eb, #e8ddd4, and #d4c5b8 with subtle vein lines in #c2a88e. - **Section 1 (Directory):** A 3-column Swiss grid (equal columns, 2rem gap) containing cards with burgundy left-border accents (4px solid #5a0f1e). Each card is a "department": Logic, Computation, Inference, Proof, Paradox. Cards have marble-white backgrounds (#f5f0eb) with a 1px border in #d4c5b8. - **Section 2 (Operations Display):** A dark section (#1a0a10) simulating a HUD command center. A CSS grid of 2x3 cells, each containing a counter-animated statistic (processing speed, active axioms, open conjectures) with teal-cyan (#00b4d8) monospace readouts on dark backgrounds. Thin 1px teal grid lines separate cells. Corner brackets (CSS borders on pseudo-elements) frame each cell in the sci-fi-hud style. - **Section 3 (Archives):** Returns to light marble. A single wide column with generous line-height (1.85) presenting a narrative text block about the institution's purpose. Pull-quotes in burgundy slab-serif float in the left margin at 1.2rem with a thin vertical rule. - **Section 4 (Footer/Seal):** Compact. A circular SVG emblem (geometric, Swiss-style) centered on a burgundy band. Below: a single line of small-caps metadata. **Spatial Rules:** - Vertical rhythm: each section separated by 0px (edge-to-edge color blocking, no gaps) - Internal section padding: clamp(3rem, 6vh, 8rem) top/bottom - Maximum content width within sections: 72rem, centered with auto margins - No floating navigation. A fixed, minimal top bar: a thin 2px burgundy line at the top of the viewport with the logotype at left in small-caps, 0.75rem ## Typography and Palette **Typography:** - **Headlines / Display:** "Rockwell" is the conceptual anchor but since it is not on Google Fonts, use **"Alfa Slab One"** (Google Fonts) for the largest display headings (the lobby logotype, section titles). Weight: 400 (its only weight). Size: 4rem-8vw for hero, 2.5rem-3.5rem for section headers. Letter-spacing: +0.04em. Text-transform: uppercase. Color: #5a0f1e (deep burgundy) on light sections, #f5f0eb (marble white) on dark sections. - **Subheadings / Labels:** **"Roboto Slab"** (Google Fonts) -- a geometric slab-serif that bridges the gap between the expressive display and the rational body text. Weight: 400 for labels, 700 for emphasis. Size: 1.1rem-1.5rem. Letter-spacing: +0.06em. Text-transform: uppercase for labels. Color: #3a1520 on light, #e8ddd4 on dark. - **Body / Narrative:** **"Source Sans 3"** (Google Fonts) -- a humanist sans-serif designed by Paul Hunt for Adobe, with excellent readability and a warmth that complements slab-serifs without competing. Weight: 400 regular, 600 for emphasis. Size: 1rem (16px base). Line-height: 1.75. Color: #2a1018 on light backgrounds, #d4c5b8 on dark. - **Data / Monospace (HUD readouts):** **"IBM Plex Mono"** (Google Fonts) -- chosen for its Swiss-influenced geometric precision and excellent legibility at both small and large sizes. Weight: 400 for data, 700 for highlighted counters. Size: 0.85rem for small data, 2.5rem-4rem for hero counters. Color: #00b4d8 (teal-cyan) for active data, #5a8a96 for secondary data. Letter-spacing: +0.08em. **Color Palette:** | Role | Hex | Usage | |------|-----|-------| | Deep Burgundy (Primary) | #5a0f1e | Headlines, borders, section backgrounds, the institutional identity color | | Burgundy Dark | #3a1520 | Subheadings, darker text on light backgrounds | | Burgundy Black | #1a0a10 | Dark section backgrounds (Operations HUD) | | Marble White | #f5f0eb | Primary light background, card surfaces | | Marble Mid | #e8ddd4 | Secondary backgrounds, subtle borders on dark | | Marble Warm | #d4c5b8 | Borders on light, body text on dark backgrounds | | Marble Vein | #c2a88e | Decorative veining in marble texture | | Teal Cyan (Accent) | #00b4d8 | HUD readouts, counter numbers, interactive highlights | | Teal Muted | #5a8a96 | Secondary data, inactive HUD elements | | Body Dark | #2a1018 | Primary body text color on light backgrounds | **Palette Logic:** The deep-burgundy-to-marble gradient creates a warm, institutional gravitas (think parliamentary libraries, university halls). The teal-cyan is a deliberate temperature inversion -- it reads as "data coming alive" against the warm stone, creating the sci-fi-hud tension that makes this design distinctive. ## Imagery and Motifs **Marble Texture System:** All light sections use a CSS-only marble texture. This is achieved through layered `background-image` declarations combining: 1. A base color of #f5f0eb 2. Three radial-gradient layers at different positions and scales creating cloudy warm patches in #e8ddd4 3. Two thin linear-gradient veins angled at 23deg and 157deg in #c2a88e at 0.5px width with transparent gaps 4. A subtle repeating-linear-gradient noise pattern at 1px scale No image files are used. The marble is entirely generative CSS. Each section uses slightly different gradient positions (shifted by section index * 20%) to avoid visual repetition while maintaining material consistency. **Sci-Fi HUD Motifs:** The Operations Display section employs HUD-style framing elements built entirely from CSS: - **Corner Brackets:** Each data cell has L-shaped corner marks (12px x 12px, 1px solid #00b4d8) positioned in all four corners using `::before` and `::after` pseudo-elements on the cell and an inner wrapper. These evoke targeting reticles and heads-up display framing. - **Scan Lines:** A semi-transparent repeating-linear-gradient overlay (1px #00b4d8 at 0.03 opacity, 1px transparent, repeating every 3px) laid over dark sections to simulate CRT scan lines. - **Blinking Indicators:** Small 6px circles adjacent to each counter, alternating between #00b4d8 and transparent on a 2s CSS animation cycle (`@keyframes blink { 0%, 100% { opacity: 1 } 50% { opacity: 0.2 } }`). - **Data Grid Lines:** 1px teal borders between grid cells, with intersections marked by 4px squares (CSS pseudo-elements). **Counter Animation System:** Multiple elements use the `counter-animate` pattern -- CSS or minimal JS counters that increment visible numbers: - The hero "Theorems Catalogued" counter: starts at 1,247,891 and increments by 1 every 3 seconds using `setInterval`. Number formatted with locale-appropriate thousand separators. - Operations section: 6 counters showing different metrics. Each starts at a different base number and increments at different rates (1/s, 1/5s, 1/10s). Use CSS `@property` registered custom properties with `@keyframes` for smooth number transitions where supported, with JS fallback. - Footer: a small "Uptime: XX:XX:XX" clock in IBM Plex Mono that counts up from 00:00:00 on page load. **Swiss-Style Geometric Emblem:** The footer contains an SVG emblem: a circle with a 1px burgundy stroke containing a simplified geometric representation of a logic gate (AND gate shape) composed of clean arcs and straight lines. No fills, only strokes. This serves as the institutional seal. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens with the Lobby section consuming the entire viewport. The marble texture is visible immediately -- no loading screens. The slab-serif logotype "RONRI.DAY" fades in over 1.5 seconds (opacity 0 to 1, with a simultaneous translateY from 10px to 0). Below it, after a 0.8s delay, the counter begins its eternal count. The effect should feel like walking into the lobby of a grand, quiet institution and seeing the main display activate in your presence. **Section Transitions:** As the user scrolls, each section fills the viewport in sequence. Use a CSS `scroll-snap-type: y mandatory` on the main container with `scroll-snap-align: start` on each section to create discrete "floor" transitions. Each section is `min-height: 100vh`. When a section enters the viewport, its internal elements animate in using counter-animate (for numbers) and simple opacity/transform reveals (for text blocks). Use `IntersectionObserver` with a 0.3 threshold to trigger animations. **Counter Animation Implementation:** The primary storytelling mechanism is the counter-animate pattern. Numbers should not simply appear -- they should count up from 0 (or a nearby base) to their target value over 2 seconds using an easing function (ease-out-cubic). Implement using: ``` // For each counter element const target = parseInt(el.dataset.target); const duration = 2000; const start = performance.now(); function tick(now) { const progress = Math.min((now - start) / duration, 1); const eased = 1 - Math.pow(1 - progress, 3); el.textContent = Math.floor(eased * target).toLocaleString(); if (progress < 1) requestAnimationFrame(tick); } requestAnimationFrame(tick); ``` Trigger each counter's animation only when its section enters the viewport (IntersectionObserver). **HUD Interaction Layer:** In the Operations Display section, when the user hovers over a data cell, the corner brackets expand outward by 4px (CSS transition, 0.3s ease) and the teal glow intensifies (box-shadow: 0 0 12px rgba(0, 180, 216, 0.3)). The counter inside that cell temporarily increases its increment speed (from 1/s to 5/s) for 2 seconds after hover begins, then returns to normal. **Marble Depth Effect:** On the light marble sections, a very subtle CSS parallax effect: the marble vein gradients are attached to `background-attachment: fixed` while content scrolls over them. This creates a sense that the marble is a physical surface behind glass, and the content floats above it. Do not use JavaScript parallax libraries -- CSS only. **Typography Choreography:** Section headers in Alfa Slab One enter with a letter-spacing animation: starting at +0.15em and compressing to +0.04em over 0.6s (CSS transition triggered by IntersectionObserver adding a `.visible` class). This gives slab-serif headers a "settling into place" feeling, like type being set in a press. **Color Blocking Rhythm:** The page alternates: Marble Light -> Marble Light -> Burgundy Dark -> Marble Light -> Deep Burgundy. This creates a rhythm of 2 light, 1 dark, 1 light, 1 accent. The transitions between sections are hard edges (no gradients between sections) in the Swiss tradition. **AVOID:** CTA buttons with "Sign Up" or "Get Started" text. No pricing blocks. No testimonial carousels. No stat-grids styled as marketing metrics. No hero images with stock photography. No hamburger menus (the fixed top bar is the only navigation, and it contains no links -- only the logotype and the uptime counter). ## Uniqueness Notes **Differentiators from other designs:** 1. **Institutional Fiction as Design Framework:** Rather than designing a generic website, ronri.day is designed as if it were the public-facing portal of a fictional government department. This narrative conceit -- the "Swiss Federal Department of Computational Logic" -- gives every design decision a diegetic reason. The marble comes from the building's walls. The HUD comes from the operations center. The counters come from the department's real-time metrics. No other design in the portfolio uses institutional fiction as its organizing principle. 2. **CSS-Only Marble Texture Generation:** While marble-texture appears at 3% frequency in the portfolio, no other design generates marble entirely through layered CSS gradients without image files. The multi-layer radial + linear gradient approach creates a unique, resolution-independent texture that varies per-section through seed offsets. This is both a technical differentiator and a visual one. 3. **Counter-Animate as Primary Storytelling Device:** At 2% frequency, counter-animate is deeply underused. This design makes it the central interactive motif -- appearing in the hero, the operations center, and the footer. The counters are not decorative afterthoughts but the primary way the "institution" communicates its ongoing activity. The varying increment speeds and the hover-to-accelerate interaction give the counters personality. 4. **Swiss + Sci-Fi HUD Tension:** The collision of Swiss International Style (clean grids, slab-serif typography, rational spacing) with sci-fi HUD elements (corner brackets, scan lines, teal data readouts) is a pairing not found elsewhere in the portfolio. Swiss appears at 4% and sci-fi-hud at 2%; their combination is unique. 5. **Slab-Serif Typography System:** At 3% frequency, slab-serif is underused. This design builds an entire type hierarchy around it: Alfa Slab One for display, Roboto Slab for labels, with Source Sans 3 providing humanist contrast for body text and IBM Plex Mono for data. The four-font system is carefully structured to prevent visual chaos while maintaining slab-serif dominance. **Chosen Seed / Style:** - aesthetic: swiss - layout: stacked-sections - typography: slab-serif - palette: deep-burgundy - patterns: counter-animate - imagery: marble-texture - motifs: sci-fi-hud - tone: friendly **Avoided Overused Patterns:** - scroll-triggered (97%) -- replaced with IntersectionObserver-triggered counter animations as the primary motion pattern - parallax (74%) -- only a subtle CSS `background-attachment: fixed` on marble, no JS parallax - stagger (60%) -- elements appear individually via counter timing, not stagger delays - centered layout (99%) -- uses stacked-sections with varied internal grids (3-column Swiss, 2x3 HUD, single wide column) - mono typography (99%) -- IBM Plex Mono used only for HUD data readouts, not as a primary type choice - playful aesthetic (96%) -- Swiss rationality replaces playfulness - minimal imagery (95%) -- marble-texture and HUD motifs create visual richness - vintage motifs (88%) -- sci-fi-hud replaces vintage as the decorative motif system