# Design Language for nonri.net

## Aesthetics and Tone

**nonri.net** is a **surrealist dialectical broadcast** — a quiet, two-channel transmission about the *withdrawal of reason*. The domain reads as **non-ri** (非理) — *without principle, against logic, the ungiven cause*. The .net TLD is taken at its most literal: a net, a mesh, a dragnet thrown over the slipping surface of meaning. The site is built as if a 1971 East-European public broadcaster had been instructed to air, every midnight, a thirty-minute program in which every claim made on the left half of the screen was simultaneously denied, dreamt, or dissolved on the right half — and viewers were expected to find the unspoken third channel by attention alone.

The tone is **mysterious-moody, scholarly-but-dispossessed** — the register of a librarian who has discovered that the card catalog is sorting itself. Visitors arrive into hush. Two halves of a wide page breathe at slightly different rates: the left at 60 BPM (a resting heart), the right at 84 BPM (a heart that has just realized it is being watched). Cursor movement raises a faint static hum in the background audio (opt-in only; soundless by default), and an ambient warm-burgundy glow seeps from the seam where the two halves meet, as if a wound were leaking light.

Inspirations, named so the implementer can study them:
- **Magritte's *The Treachery of Images*** — the gulf between word and thing, but reframed as a gulf between *left page* and *right page*.
- **Tarkovsky's *Mirror* (1975)** — slow-burn dissolves, sepia film grain bleeding into burgundy washes, a domesticity that becomes uncanny by patience alone.
- **Borges' *The Library of Babel*** — the suspicion that every claim has an exact, well-formed denial, shelved one corridor away.
- **Hilma af Klint's *Paintings for the Temple*** — esoteric diagrams as architecture; geometric precision in service of unprovable cosmology.
- **The interior of an abandoned 1960s East German public-television studio** — burgundy velvet, oxidized cream walls, brass dials, a single monitor still warm.
- **Lygia Clark's *Bichos* sculptures** — hinged metal that only completes its form when handled; the site, similarly, only resolves when both halves are read at once.

There is no friendliness. There is no urgency. There is, instead, a slow burgundy patience that waits for the visitor to notice the mismatch and lean in.

## Layout Motifs and Structure

The site is a **strict vertical split-screen** divided not at 50/50 but at the **golden seam: 38.2% / 61.8%**, with the narrower channel on the left (the "denial" channel, *non-*) and the wider channel on the right (the "principle" channel, *ri*). The seam itself is an active design element: a 1px hairline of `#7A1F2E` (oxidized burgundy) that pulses at 60 BPM, occasionally bleeding a 24px-wide warm halo of `#F2E4D2` mist into both halves.

This is **not a card grid**. There are **no cards**. There are **no CTAs, no pricing tables, no stat blocks, no testimonials**. There is only the dialectic.

**The two channels:**

- **Left channel (non-, 38.2%)**: scrolls vertically at 1.0× speed. Holds *negations* — short, declarative sentences set in oversized italic serif, one per panel. Color: oxidized cream `#F2E4D2` on burgundy ground `#3A0F18`. Each panel is exactly `100vh` tall and contains one sentence, vertically centered, no other ornament.
- **Right channel (ri, 61.8%)**: scrolls vertically at **0.92× speed** (a deliberate parallax mismatch). Holds *affirmations* — longer paragraphs of contemplative prose set in a refined serif body, accompanied by a single morphing diagram per panel. Color: burgundy `#3A0F18` on cream ground `#F2E4D2`. Right-channel panels are `~108vh` tall, so the two channels slip out of phase by exactly 8% per scroll-frame. Every twelfth panel they re-align — a moment the design literature on the site calls **"the kiss"** — and a brief cross-channel animation links them with a hand-drawn ink-bridge SVG.

**Spatial system:**
- 16-column underlying grid at desktop (1440px), collapsing to a stacked-sections single column at <768px (the dialectic on mobile becomes a vertical conversation rather than a side-by-side mirror — see Mobile Adaptation below).
- Type sets to a **20px baseline grid**; both channels share the baseline so cross-channel sight-lines line up at the kiss-frames.
- Each channel is bordered, on its outer edge, by a vertical **8vw margin of pure ground** — the literal *ma* of the design. Content never touches the outer browser edge.
- The header is **a single horizontal band** of `40px` height across the very top, holding only the site mark `non | ri` (with the pipe character itself as the seam) and a small brass-toned timecode that updates every second to the visitor's local time, formatted in a fictional 30-hour day (the system silently subtracts 6 hours from the wall clock — visitors who notice are already participants).
- There is **no footer in the conventional sense**. The site ends with a final unified frame in which both channels collapse into one centered column, set against a black ground, holding a single sentence: *"Neither half was true. Read again."*

**Mobile Adaptation:**
On viewports <768px, the split is preserved as a *vertical stack with chromatic memory* — left-channel panels keep burgundy ground and italic serif; right-channel panels keep cream ground and roman serif; alternation creates a striped scroll. The kiss-frames become full-width unified panels. The 0.92× parallax mismatch is replaced by a 6px lateral drift on each panel as it enters the viewport.

## Typography and Palette

**Fonts (all Google Fonts):**

- **Display / negation channel:** **`Cormorant Garamond`** — italic, weight 500, set at `clamp(2.4rem, 5.6vw, 4.8rem)`, line-height 1.12, letter-spacing -0.012em. Its narrow, contemplative serifs and pronounced italic give the negations their *whispered* quality. Used exclusively in the left channel.
- **Body / principle channel:** **`Newsreader`** (Google Fonts) — weight 400, optical-size variable, set at `1.0625rem` / `1.78` line-height with hanging punctuation. Newsreader is a low-contrast Renaissance serif tuned for long-form reading on screen; it gives the right channel a *patient broadcast* quality that contrasts with Cormorant's whisper. Used exclusively in the right channel.
- **Mark / timecode / seam annotations:** **`JetBrains Mono`** — weight 400, set at `0.6875rem`, all lowercase, letter-spacing +0.08em. Used for the site mark `non | ri`, the 30-hour timecode, panel numerals (e.g., `panel 014 / kiss 002`), and the small marginalia that occasionally appears in the seam.
- **Diagrammatic labels** (inside the morphing right-channel diagrams): **`Cormorant Garamond` small caps** at `0.78rem`, weight 600, letter-spacing +0.16em. Treated as ink annotations on the diagrams.

Three font families total — disciplined. No more.

**Palette (8 named values, all hex):**

- `#3A0F18` — *Burgundy of Withdrawn Reason* — primary ground for the right channel's text; primary fill for the left channel's ground. The color of dried wine on dark velvet.
- `#7A1F2E` — *Oxidized Burgundy* — the seam, hairlines, hover underlines, and active links. One half-tone lighter than the primary.
- `#F2E4D2` — *Cream of Pages Long Read* — primary ground for the right channel; primary fill for the left channel's text. Slightly warm, slightly oxidized — never pure white.
- `#E8D4B8` — *Aged Cream* — a deeper cream for diagram fills, blockquote backgrounds, and the kiss-frame ground.
- `#B8956F` — *Brass-of-the-Unused-Dial* — accent for the timecode, panel numerals, and one (and only one) decorative line per right-channel panel: the underline-draw on the diagram caption.
- `#1A0508` — *Nearly-Black Burgundy* — used only at the final unified frame, for the site's last sentence and ground. Never appears elsewhere.
- `#9A6B52` — *Sepia of Forgotten Footnotes* — body color of the marginalia inside the seam; never used at a size larger than `0.6875rem`.
- `#5A2638` — *Deeper Burgundy* — used only inside SVG illustrations as the secondary ink color, never as a UI surface.

The palette reads as **deep-burgundy / burgundy-cream**, with brass accents and a sepia footnote register. Warmth without comfort. The combination is, by design, almost absent in the site corpus (frequency: deep-burgundy 2%, burgundy-cream 1%) — a deliberate choice.

## Imagery and Motifs

**No photography.** Not one photograph anywhere on the site. This is a non-negotiable rule.

All visual elements are bespoke SVG illustrations rendered in a strict duotone of `#3A0F18` ink on `#F2E4D2` ground (or the inverse), with occasional `#B8956F` brass accents. Every illustration is hand-drawn in the style of a 1920s scientific encyclopedia plate — thin, confident pen-strokes, fine cross-hatching, the geometry slightly imperfect.

**Core motif library (eight illustrations, deployed as morphing SVGs in the right channel):**

1. **The Cleft Apple** — an apple in clean ISO view that, on every page-load, slowly morphs (over ~6s, eased) into a perfect mirror of itself, the cleft moving from the right side to the left. The apple is an early **flowing-curves** statement: that the seam is not stable.
2. **The Library Hallway** — a one-point perspective hallway of bookshelves vanishing to a vanishing point that, by design, sits 4% below the geometric center of the panel — a Borgesian misalignment.
3. **The Heart Diagram** — a Vesalius-style human heart, opened, with a single arrow labeled *non-* pointing inward and a second arrow labeled *ri* pointing outward. The arrows alternate which direction they point on hover.
4. **The Hilma Spiral** — a tight, unspooling spiral of nested ellipses (a direct quotation of af Klint's geometric vocabulary), rendered in `#3A0F18` ink, used as the section-break motif at the start of each new movement.
5. **The Hand Holding Nothing** — a finely cross-hatched right hand, palm up, fingers slightly curled, holding a perfect circle of pure ground (a void). The void color is the *opposite* channel's ground — a quiet visual joke about which side the absence belongs to.
6. **The Two Tongues** — two tongues, anatomically rendered, facing one another but not touching, forming a near-symmetrical Rorschach. Used at the kiss-frames; on the kiss they animate to *almost* touch and then withdraw.
7. **The Inverted Compass** — a brass compass rose with the cardinal letters replaced by Latin abbreviations: *neg.* (where N would be), *aff.* (S), *dub.* (E, *dubito*), *cred.* (W, *credo*). The needle drifts slowly.
8. **The Chairs Facing One Another** — two empty wooden chairs, three-quarter view, set on a pale ground, facing one another with a small gap between them. The kiss-frame opener. No people.

**Decorative patterns (used sparingly, never as page-fill):**
- A **noise-texture overlay** at 4% opacity sits across the entire viewport — a faint analog-television grain that gives the site its broadcast feel. Generated via SVG `feTurbulence` with `baseFrequency=0.78`, never via raster.
- A **paper-aged texture** — visible only in the right channel's ground — implemented as a subtle CSS `background-image` of a single hand-drawn deckled-edge SVG at 800px tile, blended at `multiply` 6%.
- A **single horizontal hairline** (`#7A1F2E`, 0.5px) at the bottom of every right-channel panel, drawn from left margin to seam over 1.2s on enter (path-draw-svg), then static.

**No emoji. No icons. No 3D. No gradients except the 24px seam halo.**

## Prompts for Implementation

This is **a single long-form narrative scroll**, not a multi-page site. The visitor enters once and reads. There is no router beyond a single anchor-link table-of-contents accessible via a small brass dot in the upper-right of the seam (clicking it slides a translucent burgundy panel from the seam outward, listing the seven movements).

**Storytelling structure (seven movements, ~14 panels each, ~98 panels total):**

1. **Movement I — *Salutation Withheld.*** The site opens. Header pulses on. A single sentence appears in the left channel: *"What you are about to read may not be true."* The right channel is, for these first three panels, *empty cream* — the principle channel is silent, refusing to speak first.
2. **Movement II — *On the Treachery of Naming.*** Left channel begins to deny propositions: *"This is not a website. This is not a transmission. This is not a confession."* Right channel responds with patient counter-affirmations.
3. **Movement III — *The Library that Sorts Itself.*** A long, slow scroll featuring The Library Hallway diagram and a meditation on the Borgesian library of denials.
4. **Movement IV — *Kiss the First.*** Channels align. Two Tongues animate. A single shared sentence runs across the seam: *"Both halves were lying. Continue."*
5. **Movement V — *On the Withdrawal of Cause.*** The Heart Diagram. The arrows of *non-* and *ri* dance. Long meditation on Hume, on causation as habit.
6. **Movement VI — *Kiss the Second.*** Channels align. The Inverted Compass spins free.
7. **Movement VII — *The Last Frame.*** Both channels collapse to a single centered column on `#1A0508`. The final sentence: *"Neither half was true. Read again."* If the visitor scrolls back to the top from the final frame, the entire site reloads with the channels swapped — left becomes cream-on-burgundy roman serif; right becomes burgundy-on-cream italic. The negations become the affirmations. This is **the reading inversion** — only ~3% of visitors will discover it; that is the correct percentage.

**Animation principles:**
- Every transition uses one of two custom easings:
  - `cubic-bezier(0.22, 0.61, 0.36, 1.0)` — *the heartbeat ease* — for content entries.
  - `cubic-bezier(0.76, 0.0, 0.24, 1.0)` — *the dialectical ease* — for cross-channel events (kisses, mirror-flips, the inversion).
- **Stagger** between elements within a panel: 120ms steps, with a randomized ±20ms jitter so the rhythm never feels mechanical.
- **Morph** is the primary motion verb — the SVG illustrations transform via `<animate>` and `<animateMotion>` tags or, where richer interpolation is needed, via `flubber.js` path interpolation. Apple becomes mirror-apple, compass needle drifts, hand opens. Morphs are **slow** (4–8 seconds, eased), never snappy.
- **Scroll-triggered, not auto-playing.** Animations begin only when their panel crosses 30% of viewport. Reverse-scroll *un-runs* them.
- **Cursor follow** is used only on the seam: as the cursor approaches the vertical seam, the seam halo widens from 24px to 56px, eased, then narrows on cursor leave. Subtle, almost subliminal.
- **Parallax is intra-channel only** — the two channels' speed mismatch *is* the parallax. No additional Z-axis layered parallax.
- **Path-draw-svg** is reserved exclusively for: (a) the bottom hairline of right-channel panels, (b) the ink-bridge that links the channels at kiss-frames, (c) the Hilma Spiral movement opener. Never decorative; always meaningful.
- **Typewriter-effect** appears once and only once: in the final frame, where the closing sentence types itself slowly (180ms per character) onto the `#1A0508` ground.

**Sound (opt-in, off by default):**
A small brass dot near the timecode toggles a 30-second loop of analog tape hiss recorded from a real reel-to-reel, layered with a 60 BPM low-burgundy hum and an 84 BPM higher-burgundy hum panned hard to the right channel. Volume capped at -28 dB. The site is fully silent for visitors who do not enable it. No autoplay, ever.

**Performance and rendering:**
- All SVGs inline, never referenced as `<img>`, so they can be morphed by JS.
- The noise-texture overlay is a single SVG defined in `<defs>`, applied via `filter:url(#noise)` to the `<body>` once.
- The split-screen is implemented as a CSS Grid with two columns (`38.2fr 61.8fr`), the seam being the gap rendered as a generated `<div>` with `position: absolute` and `left: 38.2%`.
- Independent scroll speeds per channel are achieved by JS: each channel is `position: sticky` within a wrapper that translates inversely on scroll, with the wrapper's translate factor being 1.0 for left, 0.92 for right.
- The reading inversion at the end is a CSS class `.inverted` toggled on `<body>`, swapping CSS custom properties. No reload, despite what the visitor experiences as one.

**What the implementer must AVOID:**
- No CTA buttons. No "subscribe," "buy," "contact," "get started," "learn more." None. The site has no commercial surface.
- No pricing blocks, stat counters, testimonials, FAQ accordions, feature grids, comparison tables.
- No hero with a giant button. The hero is a sentence, in italic, withheld from action.
- No carousels. No tabs. No modal dialogs.
- No light-mode toggle. The palette is the palette. Burgundy and cream are not preferences.
- No social-media link footer. No "follow us." There is nowhere to follow.
- No cookie banner styled like the site — if a banner is required by law, it appears as a plain unstyled HTML alert, intentionally jarring.

**Storytelling first; interaction is the trace of attention.** The visitor's only true input is *reading slowly*.

## Uniqueness Notes

**Differentiators from the rest of the corpus (8+ specific):**

1. **The 38.2 / 61.8 vertical golden split as the *entire* page architecture.** Frequency analysis shows split-screen at only 3% of the corpus; of those, almost all are 50/50 horizontal hero variants. A *vertical, golden-ratio, full-page, parallax-mismatched* split-screen is, to this corpus, novel. The split is not a layout choice — it is the design's core proposition.

2. **Two channels with deliberately asynchronous scroll speeds (1.0× vs 0.92×).** The 8% phase-mismatch *is* the meaning. No other site in the corpus uses a left/right scroll-speed mismatch as a narrative device. This is the design's signature mechanism.

3. **The reading inversion at the end.** The site reloads with the channels swapped — italic and roman, burgundy and cream, negation and affirmation. The visitor who completes the site twice has read two opposite versions of the same document. No other site in the corpus has a *post-completion content inversion*.

4. **A "kiss" frame system** — every twelfth panel both channels re-align, the SVG tongues nearly touch, and a shared sentence crosses the seam. This deliberate-realignment-after-deliberate-misalignment device is unique to this design.

5. **Burgundy-cream + deep-burgundy palette combination.** Frequency analysis: deep-burgundy 2%, burgundy-cream 1% — both rare; the *combination*, with brass-of-unused-dial accent, is essentially absent. Most sites in the corpus lean warm-orange or cool-blue gradient. This is sonorous wine and oxidized paper.

6. **Three font families, each strictly assigned to a channel** (Cormorant italic = denial; Newsreader roman = affirmation; JetBrains Mono = seam annotations). No font crosses the seam. This rule is held with religious strictness — it is the typographic enactment of the dialectic.

7. **No photography. No 3D. No gradients except the seam halo.** In a corpus where photography appears in 80% of designs and gradient palette appears in 81%, this design rejects both, leaning entirely on hand-drawn duotone SVG illustration in a 1920s scientific-encyclopedia mode.

8. **The 30-hour timecode in the header**, silently offset by -6 hours from the visitor's wall clock. A small, optional puzzle: visitors who notice the discrepancy are participating in the dialectic; visitors who don't are still reading the document correctly. No one is told the rule.

9. **A surreal-aesthetic, mysterious-moody-tone, expressive-variable typography stack with morph-and-path-draw-svg patterns.** Surreal aesthetic appears in 6% of the corpus, mysterious-moody tone in 5%, morph in 15%, path-draw-svg in 22% — but the specific *combination* (surrealism + mysterious-moody + variable expressive typography + morph + path-draw + split-screen) is absent.

10. **The site refuses commerce.** No CTA, no signup, no follow, no subscribe, no pricing. It is an artwork that refuses to participate in its own marketing. In a corpus where the dashboard layout dominates (74%) and CTA-bearing hero sections are near-universal, the *active refusal* of all commercial UI is itself the differentiator.

**Chosen seed (composed from `seeds.json` vocabulary):**
`aesthetic: surreal | layout: split-screen | typography: expressive-variable | palette: deep-burgundy + burgundy-cream | patterns: morph + path-draw-svg | imagery: line-illustration + paper-aged + noise-texture | motifs: flowing-curves + book-scholarly | tone: mysterious-moody + scholarly-intellectual`

**Avoided patterns from frequency analysis (and why):**
- **photography (80%)** — refused entirely; replaced by hand-drawn duotone SVG.
- **gradient palette (81%)** — used only at the 24px seam halo; never as page-wide ground or hero fill.
- **dashboard layout (74%)** — refused; the site is a narrative scroll, not a panel of metrics.
- **friendly tone (66%)** — refused; the tone is mysterious-moody and scholarly-intellectual.
- **mono typography (81%)** — used only for the seam mark and timecode (small, marginal); the body type is two distinct serifs.
- **parallax (77%)** and **stagger (68%)** — used, but reframed: parallax is the channels' scroll-speed mismatch (a narrative device, not decoration), and stagger has jitter so it never reads as mechanical.
- **hand-drawn aesthetic (75%)** — used selectively in the SVG illustrations only, not in the typography or layout. The hand-drawn motif is a quotation, not an aesthetic surrender.
- **card-grid (50%)** — refused entirely. There are no cards on the site.
- **warm palette (80%)** — present (burgundy and cream are technically warm), but inverted in temperature feel: this is *cooled* warmth, the warmth of dried wine and aged paper, not of orange sunsets.

The design is a deliberate, slow-burn refusal of corpus defaults — a site that, by being patient and quiet, lets the visitor feel the absence of every web pattern they expected.
<!-- DESIGN STAMP
  timestamp: 2026-05-11T01:50:03
  domain: nonri.net
  seed: seed
  aesthetic: nonri.net** is a **surrealist dialectical broadcast** — a quiet, two-channel tra...
  content_hash: 995b92c50cf1
-->