# Design Language for ronri.day ## Aesthetics and Tone ronri.day (論理 — "logic," "reasoning") is built as **a working logician's chalkboard rendered with Swiss-typographic discipline** — imagine the wall of a 1960s symbolic-logic seminar room where every proof is still half-finished, every premise is pinned with a brass tack, and a single cool overhead light makes the cobalt ink glow against bone-white plaster. The aesthetic is **swiss typography clean cross-bred with the visual grammar of formal logic notation** — truth tables, inference lines, scope brackets, Venn lenses, sequent turnstiles (⊢), and the quiet authority of a system that either holds or does not. The tone is **scholarly-intellectual with a dry, almost wry calm**. Nothing is decorative for decoration's sake; every mark on the page is either a symbol that *means* something in propositional or predicate logic, or a grid line that *organizes* meaning. The mood is the satisfaction of a clean QED — the small mechanical click of a valid deduction landing. Cold, lucid, exact, but never sterile: there is warmth in rigor, the way a well-set theorem is beautiful. No mysticism, no gradients-as-mood, no glassy blur. This is the opposite of the corpus's 83%-glassmorphism / 98%-warm-palette / 94%-gradient mainstream. It is **monochrome bone-and-cobalt, hard-edged, ink-on-paper**, with one disciplined accent (a "true" red) used the way a logic professor uses red chalk: sparingly, only to circle the conclusion. Deliberately avoided per the frequency analysis: hand-drawn (94%), glassmorphism (83%), photography (98%), warm palette (98%), gradient (94%), parallax (90%), cursor-follow (89%), spring (84%), magnetic (79%), card-grid (91%), full-bleed (87%). This site is a counter-statement to all of them. ## Layout Motifs and Structure The page is governed by a **strict 12-column Swiss grid with a visible baseline lattice** — the grid is not hidden infrastructure, it is *exposed* as a faint cobalt hairline mesh (0.5px, 8% opacity) behind every section, the way graph paper underlies a proof. Margins are generous and asymmetric: a wide left "annotation gutter" runs the full height of the document, holding line-numbers (1., 2., 3. … like numbered proof steps), small reference glyphs, and the occasional marginalia in a slanted hand. Content lives in the right 9 columns; the left 3 are the logician's margin. Structural motifs: - **The Proof Column.** The entire site reads top-to-bottom as a single continuous *derivation*. Each section is a numbered step. A vertical **inference rule** — a 1px solid cobalt line — runs down the left edge of the content column, occasionally interrupted by a horizontal bar (the fraction line of a logical inference: premises above, conclusion below). - **Truth-table bands.** Section dividers are not whitespace — they are **miniature truth tables**: a row of monospace `T` and `F` cells (T in cobalt, F in pale grey) that the visitor can read as an actual evaluation. Each band is functional ASCII-logic, never random. - **Scope brackets.** Large structural quotations and pull-statements are wrapped in oversized square brackets `[ … ]` or scope-indicating staples, echoing the bracketing of logical scope. The brackets are set in thin hairline strokes, ~4× the body size. - **Venn intersection panels.** Where two ideas meet, two outlined circles overlap; the lens of intersection is the only place a subtle tint (pale cobalt 6%) appears. No filled blobs, no organic flow — these are compass-drawn perfect circles. - **No hero, no card grid.** There is no full-bleed hero image and no card-grid (both >85% in the corpus). The "hero" is a single centred logical formula, hand-set, occupying generous ma (negative space) — `ma-negative-space` and `single-column` are both under 20% in the analysis and are claimed here. Composition is **asymmetric** (41%) only in the gutter offset; the content itself is **centred and single-column**, calm and axial. ## Typography and Palette **Fonts — all available on Google Fonts. The pairing is three voices: a Swiss neo-grotesque for structure, a humanist serif for prose, a true monospace for all logical notation.** - **Display & Headings — *Archivo* (variable, weights 600–900, slightly expanded tracking on caps).** A precise, Helvetica-lineage grotesque with a faint engineering chill. Used for section numbers, the wordmark "論理 · ronri.day", and short imperative headings set in tight, all-caps or sentence-case. Letter-spacing on the wordmark: +0.04em. This is the "Swiss" backbone — clean, neutral, authoritative. - **Body & Argument Prose — *Spectral* (weights 300, 400, 500; italic available).** A calm, screen-tuned humanist serif with low contrast and generous x-height; reads like a well-set logic textbook (Quine, Lemmon, Suppes). Used for all running explanation, definitions, and the connective tissue between formal steps. The italic carries marginalia and Latin tags (*modus ponens*, *reductio ad absurdum*, *ex falso quodlibet*). - **All Logical Notation, Truth Tables, Code, Line-Numbers — *JetBrains Mono* (weights 400, 500, 700).** Every `∧ ∨ ¬ → ↔ ∀ ∃ ⊢ ⊨ □ ◇ ∴`, every `T`/`F` cell, every numbered proof step, every inline symbol is monospace. `mono` is at 94% in the corpus but here it is used *correctly* — as the typeface of formal symbolism, not as a generic "techy" affectation. Ligatures ON so that `->` renders as `→` and `<->` as `↔`. **Palette — bone, ink, cobalt, and one red. Strictly monochrome + single accent. No gradients.** - `#F7F5EF` — **Bone / Chalkboard-Paper.** The page ground. Warm-white plaster, very slightly off-cream, never pure #FFFFFF. - `#14161A` — **Ink Black.** Body text, headings, the heaviest rules. Near-black with a hint of blue. - `#1E3A8A` — **Cobalt / Proof-Ink.** The dominant structural colour: grid lattice, inference lines, `T` cells, the wordmark, links, scope brackets. This is the "blue chalk" of the logic seminar. - `#9CA3AF` — **Graphite Grey.** Secondary text, `F` cells, baseline mesh, disabled/hypothetical states (premises not yet discharged). - `#C2410C` — **QED Red.** The single accent. Used *only* to mark a conclusion, to circle a contradiction (⊥), to underline the word that turns the argument. Appears perhaps three or four times on the entire page. Never in backgrounds, never in gradients. - `#E8E4D8` — **Aged Paper Shadow.** Faint panel fills and the inactive cells of truth tables. Contrast is high (#14161A on #F7F5EF), edges are crisp, no soft shadows — only thin offset hairlines, the way ink sits on paper. ## Imagery and Motifs **No photography. No 3D renders. No stock illustration. No organic blobs. Everything is hand-built SVG and live HTML, and every visual element is a *real* piece of logical notation that the visitor can read.** - **The Truth Table** — the recurring leitmotif. Rendered as a clean monospace grid: `p | q | p→q`, with `T`/`F` rows that *actually evaluate correctly*. Used as section dividers, as the favicon (a 2×2 truth table), and as a full-width "appendix" near the end. Animated by progressive disclosure: rows reveal one at a time as you reach them, the final true/false column drawn last in cobalt (or red if the formula is a contradiction). - **The Inference Rule** — a horizontal bar with premises typeset above and the conclusion below, in the classic Gentzen style. Scattered through the document as structural punctuation. Each one is a valid step. - **Venn diagrams** — compass-perfect outlined circles, 1px cobalt strokes, intersections faintly tinted. Two, occasionally three circles. The shaded lens is the *only* tinted shape on the page. - **Scope brackets & turnstiles** — oversized `[ ]`, `⊢`, `⊨` rendered as thin hairline SVG, used as decorative-but-meaningful framing for pull-quotes. - **The Baseline Lattice** — the exposed grid itself is a motif: faint cobalt graph-paper under everything, like the ruled paper a proof is written on. - **Marginal glyphs** — tiny monospace symbols in the left gutter: `∴` beside conclusions, `?` beside open questions, `✗`/`⊥` beside refuted lines, `□` (QED box) beside completed arguments. These act as a wayfinding system. - **Annotation hand** — sparse italic Spectral notes set at a slight 3–4° rotation in the gutter, as if pencilled by a reader: "but cf. line 4", "this is where it bites", "necessary, not merely true". Texture: a barely-perceptible paper grain (≤3% noise) on the bone ground only — not the corpus's heavy `grain-overlay`, just enough to keep the white from feeling like a screen. Everything else is flat, hard-edged, exact. ## Prompts for Implementation Build ronri.day as **a single-route, vertically scrolled document that reads as one continuous logical derivation** — one HTML file, one CSS file, one JS module. No nav menu beyond an in-page progress rail; no router; no footer CTA; no pricing block; no stat-grid; no testimonial row; no email-signup; no "get started" button. The whole page is a proof; the visitor walks down it. **Narrative structure (numbered steps, full-screen sections, ~80–100 second descent):** 1. **Step 1 — The Wordmark & The Question.** Bone ground, exposed cobalt lattice fades in. Centred: `論理 · ronri.day` in Archivo, beneath it a single logical formula hand-set in JetBrains Mono — e.g. `( P → Q ) ∧ P ⊢ Q` — with the `⊢` oversized in hairline. Beneath that, one line of Spectral italic: *"a place to think clearly about what follows from what."* Generous ma. No scroll cue except the inference line beginning to draw downward from beneath the formula. 2. **Step 2 — Premises.** The left gutter line-numbers start. Two or three short premise blocks, each prefixed with a monospace step number and a `∴`-less plain bar; Spectral prose explains, JetBrains Mono states the formal version. A small Venn panel: two outlined circles drifting into overlap as the section enters view, the lens tinting pale cobalt. 3. **Step 3 — Truth-Table Interlude (full-width divider).** A real truth table for the formula introduced in Step 1. Rows reveal top-to-bottom with a `typewriter-effect` on each cell (monospace, so the caret is honest); the result column draws last, cobalt for `T`, the single `F` row left in graphite. This is the first divider band and sets the pattern. 4. **Step 4 — The Inference.** A Gentzen-style rule: premises typeset above a horizontal bar, conclusion below. The bar *draws* left-to-right via `path-draw-svg` as it scrolls into centre; the conclusion fades up only after the bar completes (`fade-reveal`, `blur-focus` resolving from 4px to 0). Spectral prose alongside names it (*modus ponens*). 5. **Step 5 — The Objection.** Graphite-toned section (this step is "hypothetical / not yet discharged"). A counter-premise. A `⊥` symbol in QED Red appears in the gutter. An annotation-hand note at 3° rotation: *"if this stands, the argument collapses."* Tension held in colour: everything here is grey, not cobalt. 6. **Step 6 — Resolution.** The objection is answered; the section's greys resolve to ink-and-cobalt as you scroll through (a `counter-animate` on a small "confidence" figure ticking from a low value toward 1.0 — `counter-animate` is only 16% in the corpus). The `⊥` in the gutter is struck through. 7. **Step 7 — QED.** The conclusion from Step 1 re-appears, now alone, large, centred — and a single hairline rectangle (the QED box `□`) draws itself around the final word in QED Red. One line of Spectral: *"…which was to be shown."* The inference line that has run down the entire left edge terminates here in a small filled cobalt square. 8. **Appendix — Reference Card.** A calm, static panel: a glossary of the symbols used (`∧ ∨ ¬ → ↔ ∀ ∃ ⊢ ⊨ □ ◇ ⊥ ∴`), each with its name and a one-line gloss, set as a monospace two-column table on aged-paper fill. This is the only place that resembles a "list," and it earns it. **Motion language:** everything moves like *writing*, not like *floating*. Lines *draw* (SVG stroke-dashoffset). Cells *type* (monospace reveal with caret). Sections *resolve* from blur to sharp (`blur-focus`). Numbers *count* (`counter-animate`). Reveals *stagger* down the proof in source order. **No parallax, no cursor-follow halos, no spring/elastic bounce, no magnetic buttons, no tilt-3d, no card-flip** — these are the corpus's top patterns and they would make the page feel imprecise. The progress rail on the right is the exposed inference line; its fill tracks scroll. Respect prefers-reduced-motion: with it on, all draws/types/counts become instant final states — the proof is simply *already complete*. **Voice in copy:** measured, exact, occasionally dryly funny in the gutter notes. Use real Latin logic tags. Never hype. The page should feel like it was set by someone who cares whether the argument is *valid*. ## Uniqueness Notes Differentiators, each a deliberate departure from the frequency analysis: 1. **Logical notation as the entire visual system.** Truth tables, Gentzen inference rules, scope brackets, turnstiles, Venn lenses, and QED boxes are not ornament — they are the layout grammar, and each instance is *semantically valid* (real evaluations, real syllogisms). No site in the corpus is built on formal-logic notation; this claims empty territory entirely. 2. **Hard monochrome bone-and-cobalt with a single "QED red" — against the 98% warm / 94% gradient / 83% glassmorphism mainstream.** Zero gradients, zero blur-as-mood, zero warm earth tones. Ink on paper. The accent colour appears three or four times on the whole page, used like a professor's red chalk. 3. **The page *is* a proof.** A single continuous numbered derivation from premises to QED, with an exposed left-gutter line-number column and a vertical inference line running the full height — `single-column` + `ma-negative-space` (both <20% in the corpus) instead of the 91% card-grid / 87% full-bleed defaults. 4. **Motion that writes rather than floats.** Stroke-draw, monospace typewriter cells, blur-to-sharp resolution, and `counter-animate` (16%) — explicitly *no* parallax (90%), cursor-follow (89%), spring (84%), magnetic (79%), or tilt-3d (30%). 5. **Three-voice typography used for what each voice is *for*:** Archivo (Swiss structure) / Spectral (humanist argument prose) / JetBrains Mono (and *only* mono) for every symbol, with logic ligatures on — `mono` reclaimed as the typeface of symbolism rather than generic "tech." Chosen seed/style: **swiss typography clean** — extended into *aesthetic: swiss + editorial, layout: single-column + ma-negative-space, typography: sans-grotesk + serif-revival + tech-mono, palette: monochrome + high-contrast, patterns: path-draw-svg + typewriter-effect + counter-animate + blur-focus, imagery: line-illustration + minimal, motifs: grid-lines + book-scholarly, tone: scholarly-intellectual.* Avoided patterns from frequency analysis: hand-drawn (94%), glassmorphism (83%), photography (98%), warm (98%), gradient (94%), parallax (90%), cursor-follow (89%), card-grid (91%), full-bleed (87%), spring (84%), magnetic (79%), tilt-3d (30%), pastoral-romantic tone (34%), gradient-mesh imagery.