# Design Language for ronri.net ## Aesthetics and Tone ronri.net ("論理" — *logic*) is a **proof-theoretic broadsheet rendered as a single, continuously unfolding formal derivation** — imagine the printed pages of Gerhard Gentzen's *Untersuchungen über das logische Schließen* re-set by a Swiss type director who never once reached for a stock photo, scanned over hot-pressed cotton paper, and lit by the cold north-facing window of a university reading room at 9 a.m. The chosen seed is **"swiss typography clean"** (the *swiss* aesthetic sits at only 6% of the corpus — claiming nearly empty room), and it is deliberately crossed with the **grid-lines motif** (8% — also under-claimed) and a **cool-grays palette** (5% — under-claimed) so the page never warms into the corpus's reflexive honeyed neutrals. The tone is **scholarly-intellectual** (9% in the tone corpus, under-claimed) but never stuffy: it is the voice of a patient logician walking you through a derivation line by line, occasionally pausing to point out where an inference rule is being discharged. Nothing here shouts. There is no hero headline begging for a click, no testimonial, no pricing ladder. The site behaves like a *proof*: premises are introduced, rules are applied, sub-derivations are nested and discharged, and the bottom of the page is a Q.E.D. tombstone (∎). The mood is precise, quietly confident, faintly austere — the satisfaction of a closed bracket, the click of a turnstile (⊢) resolving. Two textures keep it from being sterile: (1) a **faint blueprint-graticule** — a 32-pixel grid of 0.5px hairlines that fades in and out as you scroll, like graph paper showing through tracing vellum; and (2) **registration-mark glyphs** in the page margins (the ⊕ printer's-crosshair) that subtly drift toward the cursor. Everything else is white space, hairlines, and one ink colour. ## Layout Motifs and Structure The composition is **minimal-navigation** (6% in the layout corpus — claimed) over a **strict 12-column Swiss grid** with a **24-pixel base unit, 48-pixel gutters, and a 1.5× modular type scale**. There is no menu drawer, no hamburger, no sticky CTA bar. Navigation is a single **derivation-line ruler** fixed to the left margin: a vertical hairline with tick marks at each section, labelled like proof steps — `1.`, `2.`, `3.` … `∎`. As you scroll, the active step's tick thickens to 2px and its label sets in the ink colour; the rest stay 0.5px and 60%-grey. Clicking a tick scrolls to that step. The page is **one continuous vertical column modelled as a natural-deduction proof**: - **Step 1 — Axiom.** A near-empty viewport: the wordmark `論理 / ronri.net` set small in the upper-left, a single horizontal inference bar (a 1px rule with the rule-name "(ax)" in a 10px label hanging off its right end), and below the bar one premise sentence. Acres of white above and below. The blueprint graticule is at full faint visibility here. - **Step 2 — Introduction.** A two-up asymmetric split (7 columns / 5 columns): on the left, prose introducing what ronri.net *is*, set as a justified Swiss text block; on the right, a live **truth-table widget** — a tiny matrix of T/F cells that fills in row by row as it scrolls into view, with the satisfying column highlighting in the ink colour. - **Step 3 — Sub-derivation (nested).** This whole block is *visually indented* — pushed two columns to the right and bracketed on the left by a tall square bracket `⌈ … ⌋` drawn in SVG, the way an assumption-scope is bracketed in Fitch-style proofs. Inside: a small set of cards (the only card-grid on the site, kept to exactly three) describing facets of the work. The bracket "discharges" — animates closing with a path-draw — when the block leaves the viewport. - **Step 4 — Lemma.** A full-bleed band where the graticule grid becomes briefly *visible and crisp* (1px, ink-coloured) and a single large statement is set across it in the display face, with a horizontal inference bar above and below it, rule-name "(⊢)". - **Step 5 — Case analysis.** A horizontal triptych: three vertical panels (∨-elimination's three sub-cases), each headed by `Case 1`, `Case 2`, `Case 3`, stagger-revealed left to right. - **Step 6 — Q.E.D.** The proof closes: the left-margin ruler's final tick is `∎`; the section is a single centred black square glyph over white, with the closing inference bar and the rule-name "(∎)" below it. Footer links (contact, etc.) are set tiny beneath, as a "References" list with bracketed numerals `[1] [2] [3]`. No diagonal sections, no parallax-photo heroes, no bento boxes. The only depth is the *indentation* of nested sub-derivations and the layering of the graticule behind the type. ## Typography and Palette **Fonts — Google Fonts only, three voices:** - **Display & wordmark — `Archivo` (Variable; wght 100–900, optional EXPANDED axis if available, otherwise the static cuts).** A grotesque with a faintly mechanical, drafting-table feel — perfect for inference-rule labels and the large lemma statement. Used at wght 600–800 for statements, wght 400 for rule-names. Set tight (-1% tracking) at large sizes. - **Body & prose — `Spectral` (serif, wght 300/400/500, italic available).** A genuine reading serif designed for screens, with a calm scholarly grey colour on the page. All running prose, justified, with hyphenation on, in a generous ~62-character measure. Italic Spectral carries metavariables and emphasis. - **Logic notation, ruler labels, truth-table cells, code — `JetBrains Mono` (wght 400/700).** The monospaced voice for everything formal: `⊢`, `∧`, `∨`, `¬`, `→`, the step numbers `1. 2. 3.`, the `T/F` cells, the bracketed references `[1]`. Its even rhythm makes the truth tables and proof-step numerals line up exactly. **Palette — cool-grays, four greys + one ink + one accent (six total, all hex):** - `#F7F8FA` — **vellum white**, the page ground (faintly cool, never cream). - `#E4E7EC` — **graticule grey**, the faint blueprint hairlines and table borders. - `#9AA1AC` — **margin grey**, inactive ruler ticks, rule-name labels, captions. - `#3B414B` — **reading grey**, the colour Spectral body text actually sets in (softer than pure black). - `#0E1116` — **proof ink**, near-black, used for the wordmark, active statements, active ruler tick, the ∎ square. - `#2A4FD6` — **turnstile blue**, the single accent: highlighted truth-table columns, the active inference bar, the discharge animation, the drifting registration crosshair, link underlines. Used sparingly — it should feel like a logician's blue pencil. ## Imagery and Motifs **No photography. No 3D renders. No stock illustration. No icon set.** The corpus is 98% photography; ronri.net refuses it entirely. Every visual is either type, a hairline, or a hand-keyed SVG of a logical object. - **The inference bar.** The recurring hero element: a horizontal rule (1px ink) with premises set above it and the conclusion below, and a small monospace rule-name hanging off its right end in parentheses — `(ax)`, `(∧I)`, `(∨E)`, `(⊢)`, `(∎)`. It is drawn with `path-draw-svg` so each bar *writes itself* left-to-right when scrolled into view. - **The Fitch bracket `⌈ … ⌋`.** A tall thin SVG square-bracket marking the scope of an assumption; nested sub-derivations live inside it. It animates: the bracket "opens" (draws downward) on entry and "closes" (draws back up, hairline thinning to nothing) on exit — the visual grammar of *discharging an assumption*. - **The blueprint graticule.** A CSS-generated 32px grid of `#E4E7EC` 0.5px lines covering the whole page, its opacity tied to scroll position — full-faint at the axiom, near-invisible mid-page, crisp-and-ink-coloured at the lemma band. Like graph paper breathing under the type. - **The truth-table matrix.** A minimal grid of monospace `T`/`F` cells with hairline borders; satisfying assignments highlight their row in turnstile-blue. It fills in row-by-row on scroll, never decorative — it is *content*. - **The registration crosshair `⊕`.** Small printer's-registration marks parked in the four page margins; they drift a few pixels toward the cursor (a quiet `cursor-follow`/`magnetic` micro-interaction) and snap back with a spring ease when it leaves. - **The turnstile `⊢` as bullet.** Wherever a list bullet would go, the turnstile glyph sets in margin-grey — "from these, the following follows." ## Prompts for Implementation Build ronri.net as **one HTML file, one CSS file, one ES module** — no framework, no bundler, no build step. Treat the entire page as **a single natural-deduction proof read top to bottom**: premises introduced, rules applied, a sub-derivation nested and discharged, a lemma proved, cases analysed, Q.E.D. **There is no CTA. No pricing block. No stat grid. No testimonials. No FAQ accordion. No email signup. No newsletter.** The only interactive primitives are the left-margin derivation ruler, the truth-table widget, the Fitch-bracket discharge, and the drifting registration crosshairs. **Storytelling structure — six proof steps**, each a full-viewport-or-taller `
` mapped to one ruler tick (`1. 2. 3. 4. 5. ∎`): 1. *Axiom* — almost-empty viewport, wordmark, one inference bar `(ax)`, one premise sentence, full-faint graticule. 2. *Introduction* — 7/5 asymmetric split: justified Spectral prose left, scroll-filling truth-table right. 3. *Sub-derivation* — visually indented two columns, wrapped in an SVG Fitch bracket that opens on entry and closes on exit; exactly three small cards inside. 4. *Lemma* — full-bleed band, graticule turns crisp and ink-coloured, one large `Archivo` statement between two `path-draw` inference bars, rule-name `(⊢)`. 5. *Case analysis* — horizontal triptych `Case 1 / Case 2 / Case 3`, stagger-revealed left→right. 6. *Q.E.D.* — centred `∎` black square over white, closing inference bar `(∎)`, footer set tiny as a bracketed `[1] [2] [3]` references list. **Motion** (lean on `path-draw-svg`, `stagger`, `fade-reveal`, `scroll-triggered`, `cursor-follow`/`magnetic`, `spring`): - Inference bars **write themselves** left-to-right via `stroke-dashoffset` animation on scroll-in. - The Fitch bracket **draws open** downward on section entry, **draws closed** upward on exit (the discharge). - Truth-table cells **fill row by row** as the table enters view; the satisfying row's cells flip from `#9AA1AC` to `#2A4FD6` with a 120ms stagger. - Ruler ticks: active tick **thickens** 0.5px→2px and label colour transitions margin-grey→proof-ink over 200ms. - The graticule's opacity is a **direct function of scroll progress** — no easing, just a clean linear map, because a grid should feel mechanical. - Registration crosshairs `⊕` translate toward the cursor with a soft cap (~6px max) and `spring` back. - Honour `prefers-reduced-motion`: bars and brackets appear already-drawn, tables already-filled, crosshairs static. - Every animation is in service of the *proof metaphor*; nothing animates "to be lively." **Typographic detail:** justified Spectral body with hyphenation; `JetBrains Mono` for all logical symbols, step numerals, T/F cells, and reference brackets; `Archivo` only for the wordmark, rule-names, and large lemma statements. Generous leading (1.7 for prose). The page should read like a well-set proof page from a logic monograph — quiet, exact, and complete. ## Uniqueness Notes Differentiators, each a deliberate departure from the frequency analysis: 1. **The page IS a formal proof.** Sections are proof *steps* on a left-margin derivation ruler (`1. 2. 3. ∎`); content is bracketed by SVG inference bars with parenthesised rule-names; a nested sub-derivation lives inside an animated Fitch bracket that literally *discharges* on scroll-out. No other site in the corpus uses natural-deduction structure as its layout system — the corpus's dominant `card-grid` (91%) and `hero-dominant` (16%) patterns are replaced by a single vertical derivation. 2. **Swiss aesthetic kept genuinely cold.** *Swiss* is 6% of the aesthetic corpus, and the existing swiss sites drift toward honeyed/warm neutrals; ronri.net stays in a strict **cool-grays palette (5%, under-claimed)** — vellum white `#F7F8FA`, four greys, near-black proof ink, and one austere turnstile-blue `#2A4FD6` accent used like a logician's pencil. The corpus is 98% *warm*; this refuses warmth. 3. **No photography, at all.** Against a 98%-photography corpus, every visual is type, a hairline, or hand-keyed SVG of a logical object — inference bars, Fitch brackets, a breathing blueprint graticule (`grid-lines` motif, 8%, under-claimed), truth-table matrices, registration crosshairs, the `⊢` turnstile as bullet. No stock images, no 3D, no icon library. 4. **A working truth-table widget as content, not decoration.** A monospace T/F matrix that fills row-by-row on scroll and highlights satisfying assignments in blue — interactive, but it teaches rather than sells. 5. **Anti-CTA by construction.** No pricing, stats, testimonials, FAQ, or signup forms — the page ends on a Q.E.D. tombstone (`∎`) and a tiny bracketed references list, the way a proof ends, not the way a landing page ends. **Chosen seed/style:** `swiss typography clean` (from seeds.json) — extended with cool-grays palette, grid-lines motif, scholarly-intellectual tone, minimal-navigation layout. **Avoided overused patterns** flagged by `frequency.sh`: hand-drawn (94%), glassmorphism (83%), photography (98%), card-grid as the primary system (91%), full-bleed-photo heroes, warm palettes (98%), gradient backgrounds (94%), cursor-follow used as a gimmick, parallax-photo storytelling, pastoral-romantic tone (34%). The only borrowed-from-common patterns — `path-draw-svg`, `stagger`, `cursor-follow`, `spring` — are repurposed strictly to dramatize formal-proof mechanics.