# Design Language for nonri.net ## Aesthetics and Tone nonri.net takes its name from the Korean word **논리 (non-ri)** — *logic*, *reasoning*, the lawful joining of premises into conclusions. The site is built as **a quiet derivation hall**: a long, cool, north-lit room where arguments are assembled the way a watchmaker assembles a movement — every part visible, every joint legible, nothing decorative that does not also do work. The governing aesthetic is **evolved-minimal**: not the flat, blank-canvas minimalism of a thousand SaaS landings, but a *worked* minimalism — paper-grain under the white, hairline rules that actually rule something, a single ink color that earns its presence by carrying meaning. The frequency analysis shows `evolved-minimal` at literally **0%** of the 434-design corpus; this site claims that empty room entirely and furnishes it with the visual grammar of **formal proof** — natural-deduction trees, sequent turnstiles (⊢), inference bars, the small hollow square (□) that mathematicians draw for *QED*. The tone is **scholarly-intellectual** with a thin seam of **zen-contemplative** running through it: the site is patient. It does not shout `SIGN UP`. It does not have a price. It has *steps* — and it lets you watch each step land before the next one is drawn. The mood-board, if it had one, would be: a Penrose tribar sketched in pencil on graph paper; the typesetting of Gentzen's 1935 *Untersuchungen über das logische Schließen*; a single fluorescent tube humming over a chalkboard at 6 a.m.; the satisfying *click* of a syllogism closing. Cold light, warm logic. ## Layout Motifs and Structure The spine of the site is a **hexagonal-honeycomb lattice** — `hexagonal-honeycomb` sits at just **2%** in the layout frequency analysis, and this site treats it not as ornament but as the literal *structure of inference*: each hexagon is an **inference node**, a small claim; hexagons that share an edge are claims that share a deductive step; the honeycomb tessellates downward, premises at the rim feeding conclusions toward a single capstone hex at the bottom. The page is therefore not a stack of cards and not a centered column — it is a **comb that grows**. Concretely: - **Seven combs, scrolled vertically.** The site is one route, seven sections, each section a self-contained honeycomb cluster of 7–19 hexes. Section boundaries are not horizontal slabs; they are **inference bars** — full-width hairlines with the next section's "conclusion symbol" hung beneath them, exactly the way a natural-deduction proof draws a line under its premises. - **The 30° world.** Every hexagon is *flat-top* (vertices at 30° and 150°). Connecting tendrils between hexes run only at 0°, ±30°, ±60°, ±90° — the six honeycomb axes. Nothing in the layout moves at an arbitrary angle; the whole composition is locked to a six-fold grid, which is itself a visual argument about *lawfulness*. - **Ma inside each hex.** Each hexagon holds its content with at least 38% internal padding. A hex is mostly empty. This is deliberate `ma-negative-space` (15% in the corpus) deployed *inside* the honeycomb cells rather than between sections — breathing room as a property of each atom, not just the layout. - **The turnstile rail.** A persistent thin vertical rule sits 8vw from the left edge on desktop, broken at each section by a small ⊢ glyph and the section's roman numeral (I.–VII.). It is the proof's left margin. On mobile the rail collapses into a 3px ink stripe. - **No dashboard, no bento, no hero image.** There is a hero *moment* — a single hexagon, alone, centered, containing nothing but the word **논리** — but it is not a "hero-dominant" splash; it is the *root premise*, and it visibly sprouts the rest of the comb as you scroll. ## Typography and Palette **Fonts — Google Fonts only, a deliberate two-voice pairing (with one numeral specialist):** - **Display, wordmark, and all hexagon headings — *Newsreader* (variable, opsz 6–72, wght 200–700, italic axis).** A `serif-revival` face (serif-revival = 13% — moderate, but here used at its optical-size extremes in a way the corpus does not). The "nonri.net" wordmark is set in Newsreader at opsz 72, weight 380, lowercase, tracked −10 — it should read like the title page of a logic monograph. Section conclusion-sentences ("∴ the argument holds") are set in Newsreader *italic*, opsz 18, weight 420, because a serif italic is the closest digital analogue to a mathematician's handwriting. - **Body, premises, inference-step labels, captions — *Spline Sans Mono* (variable, wght 300–700).** A humanist `tech-mono` / `mono` voice (mono = 94% in the corpus — ubiquitous, yes, but *every* design uses Space Mono or JetBrains; almost none use Spline Sans Mono, whose softer terminals make a long proof readable rather than clattery). All formula text — `P → Q`, `¬¬P ⊢ P`, `∀x.(Fx → Gx)` — lives here, weight 400, 16px, 1.65 leading. Monospace is correct for logic notation because column alignment *is* the argument: premises stacked above an inference bar must line up. - **Numerals & glyphs only — *Fragment Mono* (regular).** Used exclusively for the section roman numerals, the hexagon node IDs (n₀₁, n₀₂…), and the □/■ QED markers. Its slightly machined figures distinguish "structural" numbers from "spoken" ones. **Palette — cool-grays + a single ink, with two semantic accents (high-contrast where it counts):** - **`#F4F5F3` — Vellum.** The page ground. Not pure white — a faint cool-warm graphite-paper white, carrying a 4%-opacity grain. - **`#E7E9E5` — Chalk Dust.** Hexagon fill at rest; the slightly recessed surface inside each cell. - **`#1B1D22` — Logic Ink.** Near-black with a blue undertone. All primary text, all hairlines, all hexagon edges. This is the *one* color that draws. - **`#5A5F66` — Graphite.** Secondary text, node IDs, the dormant parts of the comb that haven't been "proven" yet. - **`#2B4C8C` — Sequent Blue.** The accent of *derivation* — used for the ⊢ turnstile, the active inference bar, and the tendril that connects the hex you're reading to the hex it implies. Cool, restrained, never gradient. - **`#1F6F4A` — Verum Green.** Semantic only: a sub-proof that has closed, a `⊤`, a checkmark on a discharged assumption. - **`#9A2B2B` — Falsum Red.** Semantic only: a `⊥`, a counterexample row in a truth table, a struck-through fallacy. Used at most twice on the whole page. No gradients. No glassmorphism. No neon. The drama is entirely in **ink on vellum**, with blue as the color of *reasoning happening*. ## Imagery and Motifs **No photography. No 3D renders. No stock illustration.** Every visual is `abstract-shapes` (1% in the corpus — almost unclaimed) drawn from the iconography of formal logic, rendered as crisp inline SVG with 1.25px ink strokes: - **The inference bar.** A horizontal rule with premise-stubs above and a conclusion-stub below — repeated at section seams, repeated inside hexes that contain a mini-derivation. It is the single most-recurring mark on the site. - **The turnstile family.** ⊢ (proves), ⊨ (entails), ⊣ (co-proves), ⊬ (does not prove). These hang on the left rail and float, faintly, in the Vellum margins like watermarks. - **The QED square.** □ at the start of an open proof; ■ when the section's argument closes. The fill animates in (see below). This is the site's "completion" motif. - **Truth-table tiles.** In Section IV, a small grid of T/F cells — but drawn as hexagons too, so the table *is* part of the comb. Verum Green and Falsum Red appear only here and in one other place. - **Penrose-impossible joints.** As a recurring decorative-but-meaningful flourish: where three hexagons meet at a vertex, occasionally the connecting tendrils are drawn as an *impossible* tribar twist — a small visual joke about circular reasoning, which the copy then names and disarms. - **Graph-paper substrate.** A 24px square grid at 3% opacity under everything — the engineer's pad on which the comb is sketched. It very slightly *parallaxes* (the only parallax on the site, ±8px) so the comb feels drawn *on* a surface rather than floating. - **Discharge brackets.** The square brackets `[ ]` that natural deduction puts around a discharged assumption, drawn oversized and tall, used as section-opening framing devices. ## Prompts for Implementation Build nonri.net as **one HTML document, one CSS file (custom properties + container queries, no framework), one ~7KB vanilla JS module.** No SPA, no router, no build step. Target under 90KB before fonts. It should feel like reading a beautifully typeset proof, not using an app. **The narrative spine — a single argument, derived live as you scroll (seven combs):** 1. **I. The Root Premise.** A near-empty viewport: graph-paper substrate, the left turnstile rail, and one flat-top hexagon dead center holding only **논리** in Newsreader. A line of Spline Sans Mono beneath it, typed character by character (`typewriter-effect`): `Given: that some claims follow from others.` As the user begins to scroll, two tendrils sprout from the hex's lower edges along the 30° axes — the comb is starting. 2. **II. What Follows From What.** The first real cluster: 7 hexes, each a small everyday claim ("the streets are wet", "it rained"), connected by inference bars. The active connecting tendril glows Sequent Blue as it scrolls into the centered band. Copy introduces *modus ponens* without naming it yet — just shows it working. 3. **III. The Shapes of Argument.** ~13 hexes. The classic forms get their names: *modus ponens*, *modus tollens*, *hypothetical syllogism* — each as a labeled sub-comb. SVG inference bars draw themselves (`path-draw-svg`) the moment their hex enters the viewport: top stroke, then the bar, then the conclusion stub, ~600ms, eased. 4. **IV. Truth, Tabulated.** The truth-table section. A honeycomb of T/F hexes for `P → Q`. The row where `P` is true and `Q` is false flashes Falsum Red once and a tiny ⊥ is stamped in it — the only place the argument can break. Verum Green checks the other three rows. Copy: *an implication lies only when its promise is broken.* 5. **V. When Reasoning Folds On Itself.** The Penrose-tribar section: a sub-comb drawn as an impossible loop — "A because B, B because A." The copy names *circular reasoning* and *begging the question*, then the impossible joint visibly *un-twists* into an honest open question mark. A lesson in humility, animated. 6. **VI. Assumptions, And Discharging Them.** Oversized `[ ]` discharge brackets frame a sub-proof: an assumption is made (a hex outlined in dashed Graphite), used, then *discharged* — the dashes solidify into Logic Ink and a small superscript number appears, exactly as in a Fitch diagram. This is the most technically expressive section; let the brackets be huge, 40vh tall. 7. **VII. □.** The capstone. The whole comb above is now visible in a zoomed-out "minimap" hex at the top of this section; below it, one final hexagon with one final line in Newsreader italic — `∴ from the given, the rest.` — and then the open □ at the line's end fills, slowly, left to right, into ■. The page ends. No footer CTA. Just: `(논리 — the lawful joining of what is given to what is true.)` in Graphite, small, centered. **Motion principles:** - **Everything that animates is a *derivation step*.** No gratuitous fades. SVG strokes draw the way a pen draws (`stroke-dashoffset` 0→full). Inference bars land with a 1px settle. The QED square fills as a wipe. - **Sequent Blue is the cursor of reasoning.** The single tendril connecting "the hex you're reading" to "the hex it implies" is the only thing that glows; it tracks scroll position. Subtle cursor influence (`cursor-follow` is 89% in the corpus — used here at a *whisper*: the active tendril bends ≤4px toward the pointer, nothing more). - **The comb grows on scroll, never on load.** First paint shows only Section I. Each subsequent hexagon scales from 0.94→1 and its edges draw in as it crosses 70% viewport. `prefers-reduced-motion`: everything is simply *there*, fully drawn, no scaling. - **Respect the grid.** Hover on a hex lifts it 2px and thickens its edge to 2px Logic Ink — no shadows, no tilt-3d, no color shift. Restraint is the brand. **AVOID:** CTA buttons, pricing tables, stat counters, testimonial rows, signup forms, email capture, "trusted by" logo strips, gradient meshes, glassmorphic cards, neon glow, hero hero-images, dark mode. None of these belong in a derivation hall. ## Uniqueness Notes Differentiators this design commits to — no other site in the corpus should duplicate them: 1. **`evolved-minimal` at 0% — claimed in full.** The frequency analysis shows `evolved-minimal` is used by *none* of the 434 designs. nonri.net is its sole occupant, and it earns the label by making minimalism *do work*: the one ink color carries semantic load, the negative space lives inside atoms not gutters, and the only ornament (Penrose joints) is also a piece of the argument. 2. **The honeycomb is literally an inference structure, not decoration.** `hexagonal-honeycomb` sits at 2% in the layout corpus, and where it appears elsewhere it's typically a portfolio thumbnail grid. Here every hexagon *is* a claim and every shared edge *is* a deductive step — the layout's geometry and the site's subject are the same thing. Six-fold-axis lock-step throughout. 3. **Formal-proof typography as the entire visual vocabulary.** Inference bars, turnstiles (⊢ ⊨ ⊣ ⊬), discharge brackets, Fitch superscripts, the QED square — drawn from Gentzen-style natural deduction. No design in the corpus uses the iconography of mathematical logic as its primary motif system. Truth-table-as-honeycomb is, as far as the corpus shows, unique. 4. **The Penrose-tribar joke about circular reasoning.** A genuinely original interactive beat: an impossible-figure sub-comb that *un-twists itself* into an honest open question. Self-aware, on-theme, found nowhere else. 5. **Restraint as differentiation against a CTA-heavy corpus.** Where the bulk of the corpus leans on `magnetic` (81%), `spring` (85%), `tilt-3d` (27%) flourishes, nonri.net uses *only* pen-draws-stroke motion and a single blue tendril. The deliberately under-used `path-draw-svg` (40%) and `typewriter-effect` (12%) are deployed for derivation-growth and QED lines respectively — purposeful, never garnish. Chosen seed/style: **experimental type layout** — reinterpreted as *the experimental layout IS the typesetting of formal logic*: a page whose composition is a natural-deduction proof, where the grid is graph paper, the sections are inference steps, and the structure tessellates as a honeycomb of claims. Avoided patterns from the frequency analysis: `glassmorphism` (79%), `hand-drawn` aesthetic (96%), `card-grid` (90%), `full-bleed` (88%), `warm` palette (98%), `gradient` (95%), `photography` (98%), `cursor-follow` at full strength (89%), `magnetic` (81%), `pastoral-romantic` tone (35%) — none of these appear here; the site is cool-gray, ink-on-vellum, comb-structured, and contemplative.