# Design Language for ronri.xyz ## Aesthetics and Tone **ronri** (論理 — "logic") is **a website that thinks out loud**. It is not a page *about* reasoning; it is a reasoning engine rendered as type — a slow, deliberate machine that takes a premise, holds it in the air, finds a second premise, snaps them together, and lands a conclusion with the quiet certainty of a closing bracket. The whole site is one long **proof in motion**: clauses slide in from the margins, line up under a horizontal inference bar, and resolve. The mood is **cold but not unfriendly** — the calm of chalk on a clean slate, of a logician who has already worked it out and is now showing you the steps. Influences: Gerhard Gentzen's natural-deduction trees and sequent calculus notation; the typographic restraint of a mathematics monograph set in Computer Modern; the *kinetic-typography* tradition (text as the only actor on stage); the diagrammatic clarity of a London Underground line drawing; the patience of a single-elimination bracket. Nothing decorative survives that does not also *carry an argument*. The tone is **scholarly-intellectual, calm-serene, quietly confident** — never loud, never neon, never "AI." This is logic as it felt before computers: ink, vellum, a steady hand drawing the bar between premises and ⊢. ## Layout Motifs and Structure The site is **a single vertical column of inference** — `single-column`, `immersive-scroll`, `timeline-vertical` — narrow measure (max ~640px for prose, but inference diagrams allowed to bleed wider) so it reads like a hand-set proof you hold close. **No card-grid, no bento, no dashboard, no sidebar, no hero-with-CTA.** Structure mirrors the shape of an actual derivation: - **The Premise (opening).** Near-empty viewport, off-white. A single clause types itself onto a baseline grid: `All reasoning leaves a trace.` Below it, a thin horizontal **inference bar** (1px, full text-width) waits — empty above the line, nothing below it yet. The wordmark `ronri ⊢` resolves only after the bar draws. - **The Lemmas (body sections).** Each scroll section is a **judgment**: two or three short clauses enter from alternating margins (left clause, right clause), settle side by side *above* a freshly-drawn inference bar, and the conclusion fades in *below* it — slightly indented, the way a proof step sits under its rule name. The rule label (`∧-intro`, `modus ponens`, `∀-elim`, or plain-English equivalents like *"and so"*, *"therefore"*, *"in general"*) sits flush-right against the bar in small caps. - **The Tree (centerpiece).** Mid-page, the column briefly widens into a true **proof tree** — leaf premises at the top, bars and conclusions branching downward to a single root judgment at the bottom — drawn live with `path-draw-svg`, each bar striking left-to-right in sequence so the eye follows the derivation as it builds. - **The Bracket (an interlude).** One section reframes the same idea as a **single-elimination bracket**: competing claims paired off, the "winner" of each pairing advancing rightward until one survives. Same logic, different diagram — a wink at how arguments actually feel. - **QED (close).** The column narrows back. A final clause lands, a small filled square `∎` is drawn at the end of the line, and a hairline rule closes the page. No newsletter box, no "get started." Whitespace is structural — `ma-negative-space` — the gaps between clauses are the *pauses in thought*. The baseline grid is visible as the faintest possible ruled-paper underlay (1px lines at ~32px interval, ~3% opacity) so every clause visibly *sits on a line*. ## Typography and Palette **Fonts (Google Fonts only):** - **`Spectral`** — the prose voice. A measured, slightly literary serif with real text-figure restraint; used for body clauses, the conclusions, the running argument. Set generously leaded. Carries ~55% of the type. It reads like a well-set proof in a journal. - **`IBM Plex Mono`** — the **operator voice**. Every logical symbol, rule label, sequent arrow, premise number, the wordmark's `⊢`, and any "code-like" fragment. Tight tracking, used at small sizes for labels and large only for the standalone symbols that punctuate scenes (`∴`, `⊢`, `∎`, `□`, `◇`). Roughly 25% of the type. - **`Fraunces`** — the **display / emphasis voice**, used sparingly: the section "judgment" headings and the few oversized single words that anchor a scene (`PREMISE`, `THEREFORE`, `QED`). Its soft-but-serious optical-size character keeps the page from feeling like a software docs site. ~15%. - **`Inter`** — utility only: tiny captions, the footer line, anything that must be plain. ~5%. **Palette — "chalk, ink, and one strike of cinnabar":** - `#F4F1E9` — **Vellum.** The page. A warm off-white, the color of good paper, never pure `#fff`. - `#161412` — **Iron Gall.** Near-black ink for all primary type and the inference bars. Slightly warm so it sits naturally on the vellum. - `#5B5A52` — **Graphite.** Secondary text, rule labels, the ruled-paper underlay at low opacity, premise numbers. - `#B2401E` — **Cinnabar.** The single accent — used *only* on the moment a conclusion resolves (the conclusion clause briefly flushes to this red, then settles to ink), on the `⊢` in the wordmark, and on the final `∎`. It is the color of "this is the point." Used on well under 4% of pixels, ever. - `#E7E2D4` — **Slate Shadow.** The faint fill behind the proof-tree region and the bracket interlude — a barely-there tint that says "step into the diagram." - `#1F2A2A` — **Deep Field (optional inversion).** For *one* scene only — the proof tree may invert to a near-black "blackboard" with vellum-colored chalk strokes, then return to light. Used at most once. Type is **left-aligned, ragged-right**, never justified — a proof is a list of lines, not a paragraph. Symbols are kerned to breathe; the inference bar always spans exactly the width of the widest clause above it. ## Imagery and Motifs **No photography. No 3D renders. No stock illustration. No gradients-as-decoration.** The site is made entirely of **type, hairline rules, and SVG strokes**. Every "image" is a piece of notation. - **Inference bars.** The recurring hero motif — a 1px horizontal rule that *strikes* into existence left-to-right (`path-draw-svg`) the instant its premises are in place. Below it: the conclusion. To its right: the rule name. This single device repeats a dozen times, always slightly different in width. - **The proof tree.** Leaf clauses up top, bars branching down to a root. Drawn as SVG `` and ``; bars animate in derivation order. Connector strokes are hairline, with a tiny 90° elbow where a conclusion feeds upward into the next bar — like a circuit, but a *logical* circuit. - **The bracket.** Tournament-style left→right lines; paired claims, advancing winners. Same hairline vocabulary. - **Operator glyphs as punctuation.** Oversized `∴` `⊢` `∎` `□` `◇` `∀` `∃` `→` set in IBM Plex Mono, dropped between scenes like section marks. They animate by *being drawn* (stroke-dash on an SVG outline of the glyph) rather than fading. - **Ruled-paper underlay.** The faintest baseline grid, always present, so the page reads as a worked page. - **Strike-through revisions.** A small motif: occasionally an early clause gets a thin line struck through it and a corrected clause types in beside it — the visible mark of *reasoning being revised*. Humanizing, never cute. - **The blinking caret.** A 1px-wide ink caret that follows wherever text is currently being typed; it is the only thing on the page that moves when nothing is scrolling. ## Prompts for Implementation Build ronri.xyz as **one route — one HTML file, one CSS file, one small JS module**. It is a ~75-second scroll through a single proof. **No CTA buttons, no pricing tables, no stat grids, no testimonial rows, no signup form, no feature cards, no nav menu.** The only "conversion" is reaching `∎`. **Scene sequence (vertical, immersive-scroll, scroll-driven):** 1. **Premise.** Vellum field, ruled-paper underlay barely visible. A caret blinks at the left margin; clause types out: `All reasoning leaves a trace.` Beat. A 1px inference bar **strikes left-to-right** beneath it. The conclusion `⊢ ronri` fades in below, indented; the `⊢` flushes Cinnabar then settles to ink. That *is* the wordmark. 2. **Judgment I — conjunction.** Scroll. Two clauses slide in from opposite margins, settle side-by-side. Bar strikes. `∧-intro` snaps flush-right in mono small caps. Conclusion fades below. (`stagger` the two premises; `spring` the settle.) 3. **Judgment II — implication.** A premise, then `If P then Q`, then a bar labelled *modus ponens* / `→-elim`; conclusion `Q` resolves with the brief Cinnabar flush. 4. **Revision interlude.** A clause from scene 2 gets a hairline strike-through; a corrected clause types in beside it. The downstream bar redraws. Small, deliberate — reasoning correcting itself. 5. **The Tree.** Column widens; Slate Shadow tint slides in behind. A full natural-deduction tree assembles top-down: leaves first, then each bar strikes in derivation order, conclusions cascading to a single root judgment. *Optionally* the tree region inverts to Deep Field "blackboard" with vellum chalk strokes for this scene only, then returns to light. `path-draw-svg` throughout; `scroll-triggered` so the user "drives" the derivation by scrolling. 6. **The Bracket.** Same content, reframed as a single-elimination bracket — claims paired off, winners advancing rightward, one survivor. Hairline strokes, mono labels. A quiet joke about how arguments actually go. 7. **Generalization.** One oversized `∀` is *drawn* (stroke-dash) center-stage; a clause beneath it generalizes the result. Bar, label `∀-intro` / *"in general"*, conclusion. 8. **QED.** Column narrows to its tightest measure. Final clause lands. A small filled square `∎` is **drawn** (not faded) at the end of the line, in Cinnabar. A hairline rule closes the page. Footer: a single mono line, Graphite, `ronri.xyz — Q.E.D.` **Motion principles:** - **Everything that appears, appears by being *drawn or typed*** — `typewriter-effect` for clauses, `path-draw-svg` for bars/glyphs/trees. Almost nothing simply fades. (`fade-reveal` only for conclusions sliding below their bar.) - **`scroll-triggered` is the engine** — the proof builds at the pace the user scrolls; scroll back and bars *un-draw*. Reasoning is reversible here. - **`spring`/`elastic` only on the "settle"** of premises into position above a bar — a slight overshoot then lock, like a satisfying click of logic. - **Caret-follow** — the 1px ink caret tracks the active typing point; it's the resting-state motion. - **Cinnabar is reserved for resolution** — a conclusion flushes to it for ~400ms then eases to ink. Never use the accent for hover states or links. - **No parallax of imagery** (there is no imagery to parallax) — depth comes from the ruled underlay and the one Slate Shadow tint, nothing more. - **`prefers-reduced-motion`:** bars and clauses appear instantly in final position; the whole proof is still legible top-to-bottom as a static document. **Build notes:** semantic HTML — the proof is literally a sequence of `
`s each containing premise `

`s, an `

`-equivalent inference bar (styled `div` or SVG), a rule ``, and a conclusion `

`; it should read as a coherent argument with CSS and JS disabled. Inference bars and trees are inline SVG with `stroke-dasharray` animations. One CSS custom-property palette. JS module ~150 lines: IntersectionObserver-driven scene states + a tiny typewriter + stroke-dash controllers. No framework, no canvas, no WebGL. ## Uniqueness Notes Differentiators against the frequency corpus (mono 94%, photography 98%, card-grid 91%, parallax 90%, cursor-follow 89%, warm-gradient 94%, hand-drawn 94%, glassmorphism 83%): 1. **The page *is* a proof.** Not "a site with a clever logic theme" — the literal layout primitive, repeated a dozen times, is the **natural-deduction inference bar** (premises above, conclusion below, rule name flush-right). I have not seen this notation used as a page's structural grid anywhere in the corpus. It replaces card-grid entirely. 2. **Kinetic typography with zero photography and zero gradient decoration.** The corpus's 98%-photography / 94%-gradient defaults are both fully absent; the page is type + hairlines + SVG strokes only. Where mono appears in 94% of sites it's usually a label-font garnish — here `IBM Plex Mono` is a *semantic role* (the "operator voice" — every logical symbol), set against `Spectral` and `Fraunces` serifs, which is a serif-led system, the opposite of the typical mono-led terminal look. 3. **Animation = derivation, and it's *reversible*.** Things appear by being drawn/typed in derivation order; scrolling backward un-draws the bars. Motion isn't ambient parallax (90% of corpus) — it's the act of reasoning, and the user's scroll is the proof-checker. The single accent (`Cinnabar #B2401E`) is hard-reserved for the *moment a conclusion resolves* — never hovers, never links. 4. **A "revision" motif** — a clause gets struck through and corrected on screen — makes the page show reasoning *changing its mind*, which is warmth without a single hand-drawn doodle (94% of corpus reaches for hand-drawn for warmth; this reaches for honesty instead). 5. **Two diagram languages for one idea** — the proof tree *and* the single-elimination bracket present the same argument, a structural pun no other site in the corpus attempts. Chosen seed/style: **`kinetic typography hero`** (previously unused in the corpus). Re-themed as *kinetic typography of formal logic* — effective vocabulary: aesthetic = `evolved-minimal` / `swiss` / `editorial` with a `scholarly` cast; layout = `single-column` + `immersive-scroll` + `timeline-vertical` + `ma-negative-space`; typography = `serif-revival` (Spectral) + `display` (Fraunces) + `tech-mono` (IBM Plex Mono) as a semantic operator role; palette = `monochrome` warm-paper with one `cinnabar` strike (deliberately avoiding the 94% warm-*gradient* default — this is warm but flat); patterns = `path-draw-svg` + `typewriter-effect` + `scroll-triggered` + a restrained `spring` on settles (deliberately avoiding `cursor-follow` 89%, `parallax` 90%, `magnetic` 79%); imagery = `line-illustration` / notation only (no `photography`, no `gradient-mesh`, no `glassmorphic-cards`); motifs = `grid-lines` (ruled paper) + `book-scholarly` + `abstract-tech` (logical circuitry); tone = `scholarly-intellectual` + `calm-serene` + `bold-confident`.