# Design Language for nonri.org ## Aesthetics and Tone `nonri.org` is the working surface of an imagined institution called **the Nonri Bureau of Reasoning** — a place where arguments are *assembled in public*. "Nonri" (논리) means *logic*, and the site treats logic not as cold machinery but as a craft practiced at a drafting table: premises pinned with brass tacks, inference lines ruled in fading ink, contradictions caught in red wax pencil. The governing aesthetic is **drafting-table constructivism** — a hybrid of architectural blueprint, Soviet-constructivist diagonal energy, and the quiet precision of an old logician's notebook. It is *cool*, not warm; *built*, not grown. Where the wider corpus drowns in warm honeyed gradients and hand-drawn doodles, nonri.org is **ink-blue, chalk-white, and oxidized-copper** — the colors of plans being drawn, erased, and re-drawn. The tone is **scholarly-intellectual with a constructivist edge**: confident, a little austere, faintly theatrical the way a chalkboard demonstration is theatrical. Copy is written in numbered steps, lemma-and-proof cadence, the occasional *Q.E.D.* set as a typographic flourish. Nothing is "fun" in the dopamine sense; the pleasure is the pleasure of a clean derivation — the click of a syllogism closing. The site should feel like watching someone *think well, slowly, on purpose*, with every move shown. ## Layout Motifs and Structure The page is **one continuous vertical "proof sheet"** — a single tall column of cream-white paper floating over a deep ink-blue ground, ruled with a faint **5mm engineering grid** that never fully disappears (it fades to 4% opacity behind body text, brightens to 14% in the margins). The column is **deliberately off-center**: pushed to the right two-thirds, leaving a wide left **"derivation margin"** where step-numbers, lemma labels, and ruled inference-lines live — like the margin of a mathematics workbook where the *why* is written next to the *what*. Structure as a **seven-step derivation**, each step a full-viewport "stanza" that scrolls past: 1. **Axiom** — the opening claim, set huge. 2. **Definitions** — terms boxed in thin-ruled frames, dragged into place. 3. **Lemma I** — a small supporting result, shown being proved. 4. **Lemma II** — a second, connected by a hand-ruled bracket spanning both. 5. **The Inference** — the main move; diagonal constructivist composition, blocks rotating into alignment. 6. **The Objection** — a counter-argument rendered in red wax, then *struck through* (not deleted — visibly crossed out, the way real reasoning keeps its scars). 7. **Q.E.D.** — resolution; the whole derivation collapses into a single tight diagram, the grid finally going quiet. Navigation is a **vertical ruled "proof spine"** down the far left: seven brass-tack dots connected by a thin inference-line, each tack labeled with a tiny step-numeral that only resolves on hover. No top bar, no hamburger, no logo lockup, no footer slab — the spine *is* the chrome. Section transitions snap to a baseline like a typewriter platen catching the next line. ## Typography and Palette **Type system — Google Fonts only:** - **Display / axioms:** `Fraunces` (variable, weights 400–900, optical size and "soft"/"wonk" axes). Fraunces is a serif with a constructivist temperament — high-contrast, slightly mechanical ball terminals, an engraved feel that reads like a title page on a 1920s mathematics treatise. Used for the Axiom and Q.E.D. at 56–104px, tracking `-0.02em`, never lighter than 600 at large sizes. - **Body / proof text:** `Spectral` (weights 300, 400, 500, 600 + italic). A screen-built serif with calm rhythm and a true, expressive italic — used for all running argument, lemma bodies, definitions. Set 19–21px, line-height 1.62, measure capped at 64ch. The italic carries every "i.e.", "viz.", and quoted premise. - **Margin labels / step-numerals / UI:** `IBM Plex Sans` (weights 400, 500, 600, all-caps for labels). Plex-clean, neutral, faintly technical — used at 11–13px, tracking `0.14em` uppercase, for STEP 01, LEMMA II, DEFINITION, the proof-spine numerals, and the struck-through OBJECTION tag. - **Mathematical / symbolic accents:** `Spectral` italic only — therefore (∴), because (∵), turnstile (⊢), and Q.E.D. are set as glyphs in Spectral, never as an icon font, never mono. **Palette (minimum three, here eight):** - `#0E1E33` — **drafting ink** (the deep blue-black ground; the chalkboard). - `#16294A` — **plan blue** (raised panels, the objection's backing before it's struck). - `#F4F1E6` — **proof cream** (the paper column; primary reading surface). - `#E7E2D0` — **margin cream** (the slightly aged derivation-margin). - `#7FB2C9` — **chalk cyan** (ruled grid lines, inference-lines, the proof-spine line — luminous on ink). - `#B5793D` — **oxidized copper** (brass tacks, step-numerals, the Q.E.D. flourish, hover accents). - `#C2402F` — **wax red** (used *only* for the Objection and any flagged contradiction — scarce, deliberate). - `#2F4A2E` — **errata green** (used *only* for accepted corrections and the final "consistent" seal). Contrast logic: cream-on-ink for full-bleed stanzas; ink-on-cream for the column interiors; cyan and copper are *line* colors, never fill colors; red and green appear at most once each per page. ## Imagery and Motifs No photography. Everything is **drawn as construction** — SVG line-work that looks ruled, not sketched. - **The engineering grid** — ever-present 5mm cyan grid, behaving like real graph paper: it bleeds through the cream at low opacity and is fully visible in the margins. On scroll it parallaxes a few pixels slower than the text, so the paper seems to *float a hair above* the grid. - **Inference-lines** — thin (1px) cyan rules with small right-angle elbows, drawn via `path-draw-svg` to *grow* from premise to conclusion as a step enters. Some carry a tiny ⊢ at the joint. - **Brass-tack pins** — small radial-gradient copper discs (8–12px) that "hold down" definition boxes and pinned premises; each casts a soft 2px offset shadow, and on hover the pinned box lifts 3px and the tack glints (a 200ms specular sweep). - **Definition frames** — terms enclosed in 0.75px ruled rectangles with clipped corners (the corner notched out, like an architect's titleblock), the term itself in Fraunces small-caps inside. - **The spanning bracket** — a large hand-ruled curly/square bracket (SVG) that visually *embraces* Lemma I and Lemma II, drawn in one continuous path-stroke when Step 4 is reached. - **Constructivist diagonals (Step 5 only)** — three or four solid ink-blue and cream slabs rotated 8–14°, sliding into orthogonal lock as the Inference resolves; a single thin cyan diagonal cuts the full width like a ruler laid across the page. - **The strike-through (Step 6)** — the Objection block sits on plan-blue, fully legible, then a single wax-red diagonal stroke is *drawn across it* (left to right, ~400ms) and the block desaturates to 55% — crossed out, not removed. - **The Q.E.D. mark** — a small filled copper square (∎) that, at the very end, animates from outline to fill, accompanied by a tiny errata-green "CONSISTENT" stamp rotated −4° in the margin. - **Marginalia ticks** — faint pencil-grey check-marks and tiny "✓ holds" notes that fade in beside each lemma once it's "proved" on scroll. ## Prompts for Implementation Build nonri.org as **one HTML page, one CSS file, one ES module** — no framework, no build step, no service worker. It is a roughly 90-second guided walk through a single seven-step derivation. There is **no CTA, no pricing block, no stat-grid, no testimonials, no email capture, no contact form, no FAQ, no logo wall, no newsletter bar, no cookie banner, no chatbot**. If a section feels like marketing, cut it; the only "conversion" is the reader reaching Q.E.D. **Narrative spine (the seven stanzas, vertical scroll):** 1. **Axiom.** Cream column on ink ground, grid faint. The opening claim in Fraunces 96px, set as if chiseled. STEP 01 in the copper margin. As it settles, a single cyan inference-line draws downward off the bottom edge — the proof "begins." 2. **Definitions.** Two or three terms slide in from the left margin and *pin themselves* with brass tacks (`spring`-eased, slight overshoot, tack-glint on land). Each term in a notched-corner ruled frame; hover lifts the frame 3px with a soft shadow. 3. **Lemma I.** Spectral body text writes the small supporting result; an inference-line grows alongside it via `path-draw-svg`, and on completion a pencil-grey "✓ holds" tick fades into the margin. 4. **Lemma II.** A second lemma; when it enters, a large SVG bracket draws in one stroke to *embrace* both Lemma I and Lemma II, with a ⊢ glyph at the joining elbow. 5. **The Inference.** The composition breaks orthogonal: 3–4 ink/cream slabs enter rotated 8–14° (`stagger`), then `morph`/rotate into perfect alignment as the conclusion sentence completes; one thin cyan diagonal sweeps the full width. This is the visual climax — the syllogism "clicking shut." 6. **The Objection.** A plan-blue block fades up carrying the counter-argument, fully readable, OBJECTION tag in Plex caps. After a 600ms beat, a wax-red diagonal strokes across it (left→right, ~400ms) and the block desaturates to 55% — visibly struck through, kept as a scar. A short Spectral-italic line below explains *why it fails*. 7. **Q.E.D.** Everything quiets: grid drops to 4%, the cyan spine-line goes still, the whole derivation reflows into one compact diagram. The copper ∎ animates outline→fill; a small errata-green "CONSISTENT" stamp rotates in at −4° in the margin. One final Spectral line, then nothing. No footer. **Motion rules:** - Primary easing is `spring` with mild overshoot for pinned/landed elements; `path-draw-svg` for every inference-line, the bracket, and the strike-through. - Section entrances are `scroll-triggered` and snap to a typewriter baseline — a tiny vertical "catch" (≈8px settle) when a stanza locks in, optionally a soft platen tick if `prefers-reduced-motion` is not set. - The engineering grid parallaxes ~6–10% slower than content; nothing else parallaxes. - The proof-spine: active tack fills copper and grows 2px, its numeral resolving from blur; the connecting cyan line draws progressively as you descend, so the spine literally *constructs itself* as the proof advances. - Respect `prefers-reduced-motion`: replace all draw/spring/parallax with 200ms cross-fades; the strike-through appears instantly as a static crossed-out state. Reduced motion must still read as a complete proof. - Hover micro-interactions only on pinned frames (3px lift + tack glint) and spine tacks; no cursor-follow blob, no magnetic buttons, no tilt-3d cards. **Build notes:** - Mobile: column goes full-width, derivation-margin collapses to a thin left rule with step-numerals stacked above each stanza; the proof-spine becomes a slim top progress rule. Constructivist diagonals reduce to a single rotated slab to avoid clutter. - All symbols (∴ ∵ ⊢ ∎ Q.E.D.) are real Unicode glyphs in Spectral/Fraunces — never an icon font, never SVG text-as-image. - Keep the page light: SVG line-work and CSS gradients only; total under ~250KB excluding fonts. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Cool ink-blue + chalk-cyan + oxidized-copper, in a corpus that is 98% warm and 95% gradient.** nonri.org refuses the honeyed-neutral / warm-earthy default entirely; its only "warmth" is a single oxidized-copper accent used as line work, and red/green appear at most once each. This is a near-monochrome cool palette in a sea of sunset gradients. 2. **The argument *is* the layout.** Most sites here narrate over decorative scenery; here the page literally builds a seven-step proof — premises pinned, inference-lines drawn, an objection struck through and *kept as a visible scar*. The structure is a derivation, not a landing page wearing a costume. 3. **Drafting-table constructivism — blueprint grid + Soviet diagonals + logician's-notebook margin — a combination absent from the corpus.** The off-center column with a wide left "derivation margin" carrying step-numbers and ruled inference-lines is unlike the centered/card-grid/bento conventions that dominate (centered 83%, card-grid 90%, bento 14%). 4. **No mono typeface for a "logic" site.** The corpus reflexively reaches for mono (94%) and hand-drawn (96%) whenever a topic feels technical; nonri.org instead pairs `Fraunces` (engraved constructivist serif) + `Spectral` (calm reading serif) + `IBM Plex Sans` (only for tiny caps labels) — a serif-led, hand-drawn-free, mono-free system. 5. **Restraint as a feature.** A single climax (the Inference clicking shut), a single scar (the struck Objection), a single seal (Q.E.D. ∎ + "CONSISTENT" stamp). No CTA, no stats, no pricing, no logo wall — the only payoff is reaching the end of the proof. **Chosen seed / style:** *aesthetic: swiss + isometric (reinterpreted as drafting-table constructivism / blueprint), layout: asymmetric + immersive-scroll (off-center proof column with derivation margin), typography: serif-revival + serif-classic (Fraunces / Spectral, Plex Sans for micro-labels only), palette: midnight-blue + cool-grays + complementary (drafting ink, chalk cyan, oxidized copper), patterns: path-draw-svg + spring + scroll-triggered + morph, imagery: line-illustration + geometric-abstract (ruled SVG construction, no photography), motifs: grid-lines + sharp-angles + book-scholarly, tone: scholarly-intellectual.* **Avoided overused patterns from frequency analysis:** hand-drawn aesthetic (96%), glassmorphism (79%), photography imagery (98%), card-grid layout (90%), centered layout (83%), warm palette (98%), gradient palette (95%), mono typography (94%), cursor-follow (89%), magnetic (81%), tilt-3d (27%). None are used here — the page is cool, ruled, serif-led, asymmetric, and built entirely from drawn line-work.