# Design Language for ronri.org ## Aesthetics and Tone ronri.org — *ronri* (論理), the Japanese word for "logic" — is a **proof-room at first light**: a quiet, austere chamber where a single argument is being unfolded, line by line, on washi paper laid across a stone floor. The aesthetic is **japanese-minimal / zen-contemplative crossed with the diagrammatic clarity of a hand-drawn natural-deduction proof tree**. Picture a monk-logician's study: no neon, no glass, no gradients screaming for attention — just the *ma* (negative space) between premises, the deliberate pause of a turnstile (⊢), and the slow vertical descent of inference from assumption to conclusion. The mood is **lucid, unhurried, almost ceremonial** — the feeling of watching chalk dust settle after a clean QED. The tone refuses the two corpus clichés head-on: it is **not** hand-drawn-cute (94% of the corpus) and **not** glassmorphic-frosted (83%). Where hand-drawn aesthetics use wobbly marker strokes for warmth, ronri.org uses **ruled ink lines drawn with a straightedge** — the warmth comes from imperfect paper, not imperfect lines. Where glassmorphism layers translucent blur, ronri.org layers **opaque paper sheets** that physically cast shadows. Everything is matte. Everything is still until you scroll, and then it moves the way a proof moves: one justified step at a time. Emotional register: the calm of certainty. Not "trust us" (no testimonials, no logos), but "follow along, and you will see for yourself." The site *is* an argument the reader walks through. ## Layout Motifs and Structure The governing structure is the **vertical proof tree** — `timeline-vertical` (only 5% of the corpus) reimagined as a logical derivation. The page does not scroll through "sections"; it scrolls **downward through a single deduction**, from a row of assumptions at the top to a boxed conclusion at the bottom. Each scroll-stop is one *inference line*: a horizontal ruled bar with the rule name set in small caps to its right (the way `∧-Elim`, `Modus Ponens`, `⊢ I`, `RAA` are annotated in a real proof), and below the bar the new formula that has just been derived. - **The turnstile spine.** A single thin vertical rule (1px, ink-black) runs down the exact horizontal center of the viewport for the entire scroll — the "spine" of the derivation. Content alternates **left of the spine (premises, given facts)** and **right of the spine (derived steps, lemmas)** in a strict `split-screen` rhythm that no other corpus site combines with timeline-vertical. - **Inference bars as section dividers.** Instead of full-bleed colored bands, each new "section" is announced by a horizontal ruled line (the inference bar) spanning 62% of the viewport width, centered, with the rule label hanging off the right end in 11px small-caps mono. This replaces the hero-dominant / full-bleed pattern entirely. - **Margin annotations.** Like a logician's notebook, the far-left and far-right margins (≈8vw each) carry tiny line numbers (1, 2, 3 … set vertically) and back-references ("from 2, 4") in faint grey. The body text never enters the margins — *ma* is load-bearing. - **The assumption box and the QED box.** The page opens with a thin-ruled rectangle (the "open assumption" — dashed top edge, like a discharged hypothesis) and closes with a solid-ruled rectangle containing the single sentence that the whole site has proven, followed by a small filled square ∎ in the lower-right corner of that box. - **Grid.** A 12-column grid, but columns 1 and 12 are reserved margins; the spine sits on the boundary between columns 6 and 7. Generous 1.7 line-height. Everything baseline-aligned to an 8px rhythm so the page reads like ruled paper. No card-grid (91% of corpus). No bento-box. No dashboard. The only "cards" are paper sheets, and they stack along one axis only: down. ## Typography and Palette **Fonts — all Google Fonts, three voices, each with one job:** - **Body & formulae — *Spectral* (serif, weights 300 / 400 / 600, plus *Spectral SC* for small-caps rule labels).** Spectral is a screen-first serif with a calm, almost legal-document evenness and true small-caps — it reads like a well-set logic textbook (think the typography of *Forall x* or a Hackett edition of Frege). Body copy at 19px/1.7, weight 400; lemma statements at 22px weight 300 (lighter = "lighter" claim); the final theorem at 26px weight 600. - **Logical symbols & line numbers & rule annotations — *IBM Plex Mono* (weights 400 / 500).** Used for everything that "computes": the turnstile ⊢, connectives ∧ ∨ ¬ → ↔ ∀ ∃, line numbers, back-references, and the small-caps rule names (`MP`, `∧-INTRO`, `RAA`, `⊥-ELIM`). Plex Mono's slightly humanist mono keeps the symbols from feeling like code while still gridding perfectly into the 8px rhythm. Mono appears in only ~94%? — no: mono is at 94%, so to differentiate, ronri.org uses mono *only for symbols and metadata, never for body or headings* — an inversion of the usual "mono-everything" treatment. - **The wordmark "論理 / ronri" — *Shippori Mincho* (weight 500/700).** A refined Japanese Mincho with elegant, slightly old-style serifs that sit beautifully beside Spectral; renders both the kanji 論理 and the romanized "ronri" in one harmonious voice at the top-left of the assumption box. **Palette — "ink on aged washi," matte, six tones (deliberately avoiding the corpus's 98% warm + 94% gradient — there are NO gradients anywhere; the warmth is paper-cream, not sunset-orange):** - `#F4F1E8` — **washi cream** (page background; the paper) - `#EAE5D6` — **second sheet** (slightly darker paper for stacked/overlaid sheets and the margin strips) - `#1B1A17` — **sumi ink** (all body text, all ruled lines, the spine, the turnstile) - `#6E6A5C` — **graphite grey** (line numbers, back-references, discharged/struck-through assumptions, secondary annotation) - `#8C2E22` — **shu vermilion** (the *single* accent — used ONLY for the active inference rule label, the ∎ QED square, and the underline that draws under the formula currently in focus; never more than ~2% of any screen) - `#C9C2AC` — **faint rule** (hairlines for the 8px baseline grid, dashed edges of open-assumption boxes, the unobtrusive scaffolding) Contrast is high (sumi on washi ≈ 14:1) but the *feeling* is soft because everything is unsaturated except the one vermilion mark. ## Imagery and Motifs **No photography (98% of corpus uses it — ronri.org uses zero). No stock illustration, no 3D renders, no gradient meshes. Every visual is a hand-built SVG line drawing or pure CSS, rendered in sumi ink on washi cream.** - **The proof tree itself is the hero image.** A large, slowly self-drawing SVG natural-deduction tree: formulae as nodes, horizontal inference bars, branching premises joining into conclusions. It draws via `path-draw-svg` (stroke-dashoffset) as you scroll — but unhurriedly, like ink being laid down, not zipping. (path-draw-svg is at 46%; the *unhurried, ink-bleed-edged* treatment is the differentiator.) - **Logical-connective glyphs as decorative anchors.** Each scroll-stop is marked by one oversized, very-faint connective set in Plex Mono behind the text at ~140px, 6% opacity: ∧ then → then ¬ then ∀ then ↔ then ⊢. They are watermarks, not decorations. - **The turnstile ⊢** appears at full strength exactly twice: once at the top (⊢ "what we will prove") and once at the bottom, where the same turnstile is now *closed* into the ∎ square — visual bookends. - **Discharged assumptions.** When the proof "discharges" a hypothesis (e.g. after →-introduction), the corresponding box on screen gets a single thin ink line struck diagonally through it and its number gets bracketed — a real proof-notation flourish, animated as a quick straightedge stroke. - **Washi texture.** A very subtle SVG-filter fibre/grain on the background only (turbulence at low frequency, ~3% opacity, warm-tinted) — enough that the cream reads as *paper*, never as flat #F4F1E8. - **Margin ruling.** Faint horizontal hairlines every 32px down the two margin strips, like a notebook — they fade in as each margin scrolls into view. - **The Sequent header.** The top of the page shows the goal sequent — `Γ ⊢ φ` — hand-set, with Γ and φ later "expanded" (on scroll) into the actual premises and conclusion in the reader's own words. ## Prompts for Implementation Build ronri.org as **a single-route, vertically-scrolled natural-deduction proof** — one `index.html`, one `style.css`, one `main.js` (ES module). The visitor is not "browsing a site"; they are **reading one continuous proof from open assumption to ∎**, top to bottom, in roughly 70–90 seconds of unhurried scroll. There is **no** CTA, no pricing block, no stat-grid, no testimonial row, no feature cards, no email capture, no nav bar. There is the spine, the inference bars, and the descent. **Narrative structure — the proof, one inference per scroll-stop:** 1. **The Sequent (open).** Centered near the top of the washi page: a thin-ruled rectangle with a *dashed top edge* (the open-assumption notation). Inside: the wordmark 論理 / ronri (Shippori Mincho) and beneath it, in Spectral, the goal stated plainly — what this page will demonstrate. The turnstile ⊢ glows faintly to its left. The center spine begins here and runs down. 2. **Premise rows (left of spine).** Two or three "given" statements appear left of the spine, each in its own thin paper sheet (subtle drop shadow onto the washi), each numbered in the left margin. They `fade-reveal` upward 12px with a gentle `spring` (low stiffness — these settle, they don't bounce). 3. **First inference bar.** A horizontal ink rule draws left-to-right (`path-draw-svg`, ~700ms ease) across 62% width; its rule label (`∧-ELIM`, small-caps Plex Mono) writes in vermilion at the right end. Below it, *right of the spine*, the derived formula appears — and a vermilion underline draws under it (`underline-draw`) to mark it as "the current line." 4. **Chained steps, alternating sides.** Each subsequent scroll-stop = one more inference bar + one more derived line, alternating left/right of the spine, each citing its sources via a faint "from 2, 4" back-reference in the margin. The big faint connective watermark for that step (∧ → ¬ ∀ ↔) cross-fades behind the text. Scroll progress is mirrored by the big background proof-tree SVG slowly inking itself in. 5. **A discharge.** At one step (the →-introduction), an earlier premise box gets a diagonal ink strike-through animated as a single straightedge stroke, its margin number wraps in brackets — the page *visibly closes* a hypothesis. 6. **The penultimate line.** Everything narrows toward one statement; the spine and the proof-tree SVG converge at the page's vertical centerline. 7. **∎ The QED box.** A solid-ruled rectangle (no dashed edge now — the assumption is closed) holds the single sentence the whole page has proven, in 26px Spectral 600. In its lower-right: a small filled vermilion square ∎, which fades in last with a slow `scale-hover`-on-load settle. The turnstile from step 1 reappears, now drawn *into* the square — bookend complete. Footer is one mono line: the sequent, now fully written out, `□`. **Motion principles:** - **Everything is "laid down," never "popped."** Lines draw (stroke-dashoffset). Sheets settle (spring, low stiffness, no overshoot ≥ 4px). Text fades up 8–12px. Nothing scales from 0, nothing rotates in, nothing parallaxes more than 6%. - **Scroll-driven, IntersectionObserver-gated.** Each inference reveals once when its bar crosses 70% viewport; it does not re-trigger. A scroll-linked `requestAnimationFrame` loop advances the background proof-tree's stroke-dashoffset proportional to page scroll. - **The single vermilion underline is the only thing that "follows."** As you scroll, the vermilion "current-line" underline travels from the previously-derived formula to the newly-derived one along a short ink path — the proof's pointer. No cursor-follow blob, no magnetic buttons (corpus is 89% / 79% on those — ronri.org has neither). - **`prefers-reduced-motion`:** all draws become instant; the proof simply *is* on the page, fully inked, still readable as a static document. (The site must work as a printed proof.) **Build notes:** semantic HTML (`
` is the proof, each inference is a `
` with an `

` carrying the rule name); the proof-tree is one inline ``; the washi grain is one SVG ``; no canvas, no WebGL, no libraries. CSS custom properties for the six palette tones and the 8px baseline unit. Total page weight target: under 120KB excluding fonts. ## Uniqueness Notes Differentiators, each a deliberate departure from the frequency analysis: 1. **The page IS a formal proof.** No corpus site structures its entire layout as a vertical natural-deduction derivation — spine, alternating-side premises/lemmas, ruled inference bars with small-caps rule labels, discharged assumptions, and a ∎ QED box. This is `timeline-vertical` (5%) fused with `split-screen` (2%) into a structure the corpus does not contain. 2. **Anti-hand-drawn AND anti-glassmorphism — the two near-universal corpus aesthetics, both refused.** Against 94% hand-drawn: ruled straightedge ink lines, not wobbly marker. Against 83% glassmorphism: opaque washi sheets that cast real shadows, zero blur, zero translucency. 3. **Mono used *only* for symbols and metadata.** Mono typography is at 94% of the corpus, almost always applied to body and headings. ronri.org inverts this: Spectral serif carries all reading text; IBM Plex Mono is restricted to connectives (∧ ∨ ¬ → ↔ ∀ ∃ ⊢), line numbers, back-references, and rule labels — mono as *notation*, not as *voice*. 4. **No photography, no gradients, no warm-sunset palette.** Against 98% photography → zero photos, only hand-built SVG line art. Against 94% gradient + 98% warm → a flat matte "ink on aged washi" palette whose only saturated color is a single shu-vermilion mark held under 2% of any screen. 5. **A site that prints.** With `prefers-reduced-motion`, ronri.org collapses to a fully-inked static proof — a real, readable, printable derivation. Almost nothing in the corpus is designed to survive losing all motion *and* gain meaning from it. Chosen seed / style: **"japanese zen portfolio"** — zen-contemplative tone, japanese-minimal aesthetic, ma-negative-space layout — extended with a proof-theory diagrammatic motif so that the "portfolio" being shown is a single argument. Avoided patterns from frequency analysis: hand-drawn (94%), glassmorphism (83%), photography (98%), card-grid (91%), full-bleed (87%), parallax (90%), cursor-follow (89%), magnetic (79%), warm palette (98%), gradient palette (94%), mono-as-body-typography (94%) — all consciously declined in favor of: timeline-vertical (5%), split-screen (2%), ma-negative-space (16%), serif-revival (15%), line-illustration (15%), monochrome (15%), and a single high-restraint accent.