# Design Language for nonri.xyz ## Aesthetics and Tone **nonri.xyz is a kinetic typography observatory mapped onto a Cartesian frame** — a full-screen, single-document essay in which the *only* protagonist is the word **non‑ri** itself, dissected and re-assembled across the three axes the TLD literally names. The .xyz suffix is not decorative; it is the design's spatial argument. **x** is denial (the strike-through axis, horizontal negation), **y** is reasoning (the column of consequence, vertical inheritance), **z** is the apparent depth in which letterforms parallax against one another so that the reader sees, as a perceptual fact, that "logic" (논리, *non-ri*) and "non-reason" (非理, *non-ri*) sit on the same word at different camera distances. Where nonri.day inhabits a koi pond and nonri.net broadcasts a dialectical seam, **nonri.xyz takes the family name *literally as a coordinate*** and lays the etymology out as a moving glyph-architecture. The mood is **the empty room of a 1968 type foundry the night before exhibition** — pinned proofs slowly turning on transparent monofilament, the smell of rubber cement, a single oscillating fluorescent tube humming at 50Hz, calipers and a folded grid drafting on the floor. The voice is patient, dry, almost laboratory, but every interaction gives the page a faint kinetic shudder, as if the room itself were lightly breathing. This is a **wordwork**, not a website. Visitors do not "browse" — they *enter a sustained typographic breath* in which the word **non-ri** is examined under three lights: as syllable, as axis, as denial. The tone is the tone of a **sumi-e calligrapher and a printers'-devil arguing politely in the corner of a shipping warehouse at 3:14 AM**. ## Layout Motifs and Structure **The site is a single fixed 100vw × 100vh stage. There is no scroll in the conventional sense.** Instead, the entire composition is a **3D coordinate cube** rendered with `perspective: 1800px` on the body and `transform-style: preserve-3d` cascading three layers deep. The visitor traverses the cube along its named axes: arrow-left/right walks the **x-axis**, arrow-up/down walks the **y-axis**, **W** and **S** keys (or pinch on touch) walk the **z-axis**. There is no scrollbar. There is no menu. There are only the three axes and a small monospaced **(x, y, z)** read-out fixed at the bottom-left, updating at 60fps as a four-decimal triplet. The cube's interior is divided into **27 cells (3 × 3 × 3)**, each cell a single full-bleed typographic tableau approximately one hero-screen on each side. The 27 cells correspond to the 27 readings of *non-ri* the site curates — each reading a unique etymological, phonetic, or semantic node. The reader can occupy any cell; arriving at a cell snaps the camera and types out, in `Fraunces` italic at 9.4vw, the **gloss for that cell** as a single sentence, then dissolves it back into pure glyph-architecture after a 4.6s contemplative dwell. **There are no cards. No sidebar. No header. No footer.** The only persistent UI elements are: (1) the corner read-out (x, y, z), (2) a 1px-stroked **wireframe armature** of the cube that appears, at 18% opacity, when the camera is *between* cells and vanishes when the camera is *at* a cell, and (3) a thin **horizon line** that always passes through the centroid of the current cell, anchoring the eye. **Composition rule:** every cell respects the **golden cross** — letterforms align to a 1.618 × 1.618 cross-grid superimposed on the cell, with the optical center of the largest glyph offset from geometric center by exactly +6.18% on whichever axis is currently being walked. This means the page is *always slightly off-center in the direction the visitor is heading*, producing a faint pull-toward-the-next-room sensation. **Asymmetry by counterweight:** wherever a heavy display glyph occupies one quadrant, a single 0.5px hairline rule of equivalent visual weight crosses the opposite quadrant. The page never balances by symmetry; it balances by tension between mass and line. ## Typography and Palette **Fonts (all Google Fonts, no exceptions):** - **Display / spatial protagonist — `Fraunces`** (variable, opsz 144, wght 100–900, italic + roman, SOFT 0–100, WONK 0–1). The whole site essentially *is* this font's variable-axis exhibition. Cell glosses are set in italic SOFT 100 WONK 1 at 9.4vw. The colossal **non‑ri** wordmark on the home cell is set in roman opsz 144, wght 900, SOFT 0, WONK 0, at a vertiginous 28.8vw. The variable axes are continuously interpolated by cursor proximity — moving the cursor toward a glyph pulls its **wght** higher and its **SOFT** lower, *as if the glyph hardened under attention*. - **Mono / coordinate read-out — `JetBrains Mono`** (weight 500, 11px, letter-spacing 0.04em, all-lowercase). Used exclusively for the corner (x, y, z) triplet, the single hidden "axis label" floaters that appear when an axis-key is pressed (a brief 0.6s ghost showing **x: denial**, **y: reasoning**, **z: depth**), and the etymology hover-cards (the only "card" in the site, and it is 1 line tall × 12 chars wide). - **Counter-script — `Noto Serif KR`** (weight 300). Used **only** for the Hangul glyph **논리** when it appears as the z-axis-deep ghost layer behind the Latin **non-ri**. Its appearance is rare — perhaps four cells out of 27 — and always at large scale, 22vw, slightly defocused with `filter: blur(0.6px)` to assert depth-distance. - **No body font.** This site has almost no prose. Every piece of text is treated as display. **Palette (eight tones, named after type-foundry pigments):** - `#0B0C0F` — **lampblack** (the void of the cube interior) - `#E8E2D1` — **rag paper** (the warm proof-paper tone used for wireframe and primary glyph fill on dark cells) - `#C24D2C` — **vermilion proof-mark** (used as an ink slash, a single pixel-thin underline animating left-to-right at 0.42s ease-out, the exclusive accent for *currently-active* etymological readings) - `#3A4A3F` — **drafting-table green** (the muted "y-axis" tonal floor; appears as a 6% opacity wash on cells whose principal etymology is 논리) - `#7C6E5A` — **rubber-cement tan** (the muted "z-axis" tonal mid; a 4% wash on depth-ambiguous cells) - `#1F2A3A` — **midnight-cyan plate** (the muted "x-axis" tonal floor; 6% wash on cells whose principal reading is denial / 非理) - `#F4F1E6` — **handmade vellum** (a paler rag tone used only for the cell-gloss italics, providing a 1.4-stop separation from rag-paper at small size) - `#9F4A2A` — **oxidized minium** (a deeper companion to vermilion, used only for the 1px wireframe at 18% opacity, never for type) The palette is **deliberately warm-neutral with one screaming chromatic exception** — the vermilion proof-mark — which appears in total area no more than 0.4% of the viewport at any moment. This is the *single point of red* that draws the eye the way an ink-stamp draws the eye on a mostly-white proof sheet. ## Imagery and Motifs **There is no photography. There is no illustration in the conventional sense. The motif library *is* the type itself, treated as architecture.** What follows are the motifs that recur across the 27 cells: 1. **The strike-through (x-axis motif).** A 0.5px vermilion rule that always animates from x: -100% → x: 0%, drawn left-to-right in 0.42s ease-out, terminating on the optical right-edge of the word it negates. It is the visual signature of denial. Used in any cell whose etymology bears the *non-* prefix sense. 2. **The descent-mark (y-axis motif).** A 1px rag-paper hairline drawn top-to-bottom over 0.6s ease-in-out, anchoring a glyph to a "below" position. Used to indicate inheritance, derivation, the dropping-down of consequence (the *-ri* of *논리* — the "rule" that *follows* from a premise). 3. **The depth-shimmer (z-axis motif).** A subtle 1.4px chromatic-aberration split (CMY fringes of 1px R-shift and 1px B-shift on the same glyph) that pulses at 0.084Hz (one full cycle every ~12s) and only on glyphs that occupy the rear depth-plane. This is the only "color" in cells that are otherwise strictly two-tone — a faint optical reminder that depth is the third axis. 4. **The proof-margin grid.** Every cell carries, at 8% opacity in oxidized-minium, a faintly etched **drafting-grid** of 7.2mm intervals (matching a real 1968 letterpress proof grid), aligned to the cell's optical center. The grid is *always* present — it is the bass-note of the entire site — but never asserts itself. 5. **The folded crease.** A single thin gradient (rag-paper → 3% darker → rag-paper, total width 18px) running diagonally across exactly nine of the 27 cells (one per cube-row), suggesting the page has been *folded once* along its longest diagonal and unfolded again. The fold-line is fixed in cell-coordinates so that as the camera passes through, the crease appears to slide naturally over the type. 6. **The kerning-shadow.** Where a heavy display glyph sits in a cell, a 0.4px-thick *negative* offset (a "ghost" duplicate of the glyph in lampblack on dark cells / rag-paper on light cells) sits at +0.7px, +0.4px behind it. This is not a drop-shadow; it is **a printer's kerning-proof shadow**, the kind a typesetter would draw when checking optical adjustments. 7. **The 27-cell index.** When the visitor presses **Tab**, the cube zooms out to a 3 × 3 × 3 wireframe overview at perspective 4500px, with each of the 27 cells reduced to a 60 × 60 px proof-thumbnail. The overview holds for as long as Tab is held, and when released, the camera dollies smoothly back into the cell from which it came. 8. **The breath.** The entire cube wireframe pulses imperceptibly at 12 BPM — a slow exhalation cycle that scales the wireframe by 1.004 and back. This is the room breathing. There are **no icons**, no pictograms, no UI affordances beyond the corner readout. The site asserts that **the word, properly displayed, needs no decoration**. ## Prompts for Implementation **Architecture: a single full-screen WebGL-free CSS-3D stage.** One HTML document. No router, no SPA framework. The stage is a single `
` with `transform-style: preserve-3d`, containing 27 `
` children each absolutely positioned in 3-space using `translate3d(x * 100vw, y * 100vh, z * 100vmin)` for `x, y, z ∈ {-1, 0, 1}`. The camera is a CSS variable triple (`--cam-x, --cam-y, --cam-z`) animated by a small JS module that listens to keyboard, pinch, and trackpad gestures and applies a single `transform: translate3d()` to the parent stage. The animation uses `cubic-bezier(0.16, 1, 0.3, 1)` (a custom "settle" curve) at 1.4s duration for cell-to-cell traversal. **Storytelling structure (the 27 cells):** Each cell is a single typographic vignette articulating one reading or sense of *non-ri*. The visitor is free to walk the axes in any order; there is no canonical path. However, each axis carries a thematic weight: - **x-axis (left → right):** denial → assertion. Cells leftmost are the *non-* readings (negation, withdrawal, refusal). Cells rightmost are the *-ri* readings (rule, principle, structure). Cells at center hold the word as **whole word, undivided**. - **y-axis (top → bottom):** ascent → descent of meaning. Top row is etymological *root* (Sino-Korean 理, Sino-Japanese 理, the radical 王 + 里). Middle row is *contemporary spoken sense* (Korean 논리 = "logic"). Bottom row is *poetic / withheld sense* (the 非理 of mu-ri = "unreasonable", "without principle"). - **z-axis (near → far):** literal → ghost. Near plane (z = +1) is the largest, sharpest display setting of the word. Mid plane (z = 0) is the working / kerning-proof depth where most cells live. Far plane (z = -1) is the depth where the **Hangul 논리** ghost layer sits, blurred at 0.6px and at 22vw. **Cell-to-cell entry behavior:** When the camera arrives at a cell, the cell's primary glyph is **already in place** (not animating in), but **the gloss types itself out** in `Fraunces` italic, character by character, at a deliberate 28ms cadence. After the gloss is complete, it dwells for 4.6s, then dissolves with a 0.84s `filter: blur(8px); opacity: 0` exit. The primary glyph remains, alone, until the next axis-key press. **Cursor reactivity:** Variable-axis interpolation. Every glyph in the active cell registers the cursor's distance via a `pointermove` listener (throttled to 16ms), and computes a per-glyph proximity value 0–1, which is mapped to a `font-variation-settings` change of `wght 200 → wght 900` and `SOFT 100 → SOFT 0`. Glyphs harden under the cursor's gaze. When the cursor is still for > 1.2s, all glyphs slowly relax back to baseline `wght 600 SOFT 50` over 2.4s ease-out. **The vermilion proof-slash:** Triggered on any *non-* sense cell when the cell becomes active. A 0.5px-tall, 100%-wide `::after` pseudo-element drawn in `#C24D2C`, animated `transform-origin: left center; scale-x: 0 → 1` over 0.42s `cubic-bezier(0.16, 1, 0.3, 1)`, anchored to the optical right-edge of the *non-* prefix glyph. Persists as long as the cell is active. Vanishes scale-x: 1 → 0 from the right on exit. **Bias toward immersive narrative experience.** This is a wordwork to be *inhabited*, not a brochure. There is no "About" section, no contact form, no testimonials, no pricing. Reject all of these. The visitor's reward for traversing all 27 cells is the slow, accumulating sense that they have *walked through a single word* — and that, in walking it, they have produced its meaning. **Final cell (1, 1, 1) — the corner.** When the visitor reaches the top-right-front cell, the gloss reads, in italic Fraunces at 9.4vw: *"the word non-ri, like the room it lives in, has three doors and no exit."* It dwells for 9.0s. There is no further interaction. The corner readout reads `(1.0000, 1.0000, 1.0000)`. **Transitions are physical.** Use only easing curves drawn from the physical world: `cubic-bezier(0.16, 1, 0.3, 1)` (paper-settle), `cubic-bezier(0.65, 0, 0.35, 1)` (calligrapher's stroke), and `cubic-bezier(0.5, 0, 0.5, 1)` (held breath). No `linear`, no `ease`, no spring overshoot. The site does not bounce. The site **settles**. **Sound (optional, opt-in via single keystroke `~`):** A barely-audible 50Hz fluorescent hum at -42dB, a 0.84Hz periodic paper-rustle at -38dB, and a single felt-pen-on-vellum tick (-32dB) timed to each axis-key press. Off by default. The site is silent unless asked. ## Uniqueness Notes **Differentiators from the 350+ siblings in the registry:** 1. **The TLD itself is the layout.** The .xyz suffix is treated, with absolute literal-mindedness, as a 3D Cartesian coordinate cube. No other site in the registry takes its TLD as its primary spatial argument. Frequency analysis shows `layered-depth` at 10% — already rare — but this site goes further: a *named, key-traversed, three-axis cube of 27 cells* is the architecture, not an ornament. 2. **A full-page CSS-3D cube without WebGL, scroll, or page-flow.** Frequency shows `horizontal-scroll` 10%, `immersive-scroll` 9%, and `single-column` 12%. None of those describe what this site is: a **scroll-free**, **discrete-cell**, **keyboard-traversed** spatial composition. The mere absence of `overflow-y` is, in this corpus, novel. 3. **`Fraunces` variable-axis interpolation tied to cursor proximity, per-glyph.** `cursor-follow` is at 22% but uses position offset; `tilt-3d` at 8%; `morph` at 15% — but none of these are *typographic-axis* interpolation. Hardening glyphs under cursor attention is a typographic interaction this corpus has not produced. The font's WONK and SOFT axes are exhibited as a *behavioral feature*, not a stylistic choice. 4. **Trilingual etymological cube — Sino-Korean 理, Korean 논리, English non-ri.** Where nonri.day argues the *koi-pond reading* of *nishikigoi-non-ri* and nonri.net argues the *dialectical-broadcast reading* of 非理, **nonri.xyz argues the geometric reading**: the word inhabits axes, not water and not a seam. The three sibling sites are now a **complete trinity** — pond, broadcast, cube — but only this site refuses both narrative and dialectic in favor of pure spatial typology. 5. **Type-foundry pigment palette (lampblack, rag-paper, vermilion proof-mark, drafting-table green).** The palette is named after the actual pigments and surfaces of a 1960s letterpress shop, not a mood-board. Frequency analysis shows `gradient` at 81% and `warm` at 81% — gradients dominate the corpus. This site has **zero gradients except a single 18px diagonal page-fold crease** in 9 of 27 cells. Flat, named, named-in-pigment-history palette is rare; using the names *as design rationale* is, to my knowledge, novel here. 6. **0.4% maximum vermilion area.** A measurable, deliberate constraint: the screaming red is a measured budget, not a stylistic preference. The site polices its accent with a printer's discipline. 7. **27 cells, no canonical path, no progress meter.** Where most "immersive scroll" sites have a clear linear story (frequency: `parallax-sections` 3%, `stacked-sections` 3%, `editorial-flow` 3%), this site offers **27 simultaneously-available, non-ordered, freely-traversable** cells. The visitor produces the meaning by the order they walk. This is closer to a *Calvino*-text or a *Cortázar*-Hopscotch than a website. 8. **No CTA. No pricing. No testimonials. No stat-grid. No card-grid. No sidebar. No menu. No header. No footer. No social links.** Frequency shows `card-grid` at 52%, `sidebar` at 26%, `dashboard` at 74%. This site has *none* of these. The only persistent UI is a 12-character monospace coordinate readout. 9. **Wordmark renders at 28.8vw — vertiginous display scale.** The home-cell wordmark **non-ri** at opsz 144, wght 900, occupies more than a quarter of the viewport's width. Hero-dominant at 8% in the corpus refers to hero *images*; a hero **wordmark** at this scale, with no surrounding chrome, is unusual. 10. **The room breathes at 12 BPM.** A site-wide 12-cycles-per-minute scale-pulse on the cube wireframe — half the resting human breath rate. The corpus has `parallax` (77%) and `stagger` (69%) but a slow physiological breath as a global ambient animation is not catalogued in the registry. It is the site's heartbeat, and it is half the visitor's. **Chosen seed/style: kinetic typography hero** (from `tools/design/seeds.json`). This seed appears nowhere in the registry's frequency for `kinetic-typography` as a top motif and the corpus shows `experimental-type-layout` underused; this design takes both literally — kinetic, typographic, and a hero that **is** the entire site. **Avoided patterns from frequency analysis:** - **Avoided:** hand-drawn (75%), photography (80%), gradient (81%), warm (81%), dashboard (74%), parallax (77%), stagger (69%), friendly (66%), centered (59%), card-grid (52%), authoritative (48%), full-bleed-photographic-hero (47%). - **Preferred (underused):** evolved-minimal (0%), terracotta-warm (0%) — *vermilion is its descendant*, kinetic-typography hero (uncatalogued), experimental-type-layout (uncatalogued), 3D coordinate composition (uncatalogued), `horizon-line + 27-cell cube` (uncatalogued).