# Design Language for nonri.day ## Aesthetics and Tone nonri.day is **a koi pond rendered as a daily ledger** — an immersive, full-bleed observation deck where each visit is a single contemplative dive into still water lit from below by lacquered gold. The name "nonri" is read three ways at once and the site holds all of them: the Japanese pond-fish *nishikigoi* / *錦鯉* (the brocaded carp); the Korean root **논리** (*non-ri*, "logic" — the ordered drift of thought beneath an apparently still surface); and the English fragmentation *non-ri* — *not-village*, *not-place*, *the room where you are alone with one day at a time*. The site is a daily ritual portal: each calendar day surfaces a single bokeh-lit tableau — a koi carrying a question, a lacquered numeral, a held breath — and the visitor is invited to **stay** rather than **scroll**. The mood is **lacquered tranquility** — the polished hush of a tatami room overlooking a moonlit garden, but the moon is a softly defocused stadium light and the garden is rendered through a 50mm f/1.2 lens at full aperture. Every edge is a smear of light. Every fish is a slow gold comma drifting across the void. The site is unhurried to the point of insistence: a koi takes nine seconds to cross the viewport; a date numeral takes four seconds to bloom from a pinprick of light to its final weight; the cursor leaves a trail of dispersing pond-ripples. We are stating, with the conviction of a kaiseki chef plating a single chestnut: **slowness is the luxury, attention is the product, and the day itself is the gift**. The tonal register is **luxurious without ornament** — closer to a Hermès orange box than a Versace baroque flourish. The interface speaks in the voice of a soft-spoken concierge at a ryokan in Kanazawa: it offers, it does not insist; it withdraws when not addressed; its few flourishes are reserved for moments of arrival (the daily date stamp, the breath-prompt, the koi's emergence). Where most "zen minimalist" sites achieve calm by *removing* color and texture, nonri.day achieves it by **layering velvet darkness under jewel-toned koi** — the calm comes from the gravitational depth, not from white space starvation. There is no whitespace here; there is **water-space**. ## Layout Motifs and Structure **The canvas is a single full-bleed pond.** No gutters, no margins, no max-width. The viewport *is* the pond surface, and the page extends edge-to-edge without ever conceding the existence of a "container." On widescreen displays (≥1440px), the layout becomes a **horizontal koi-stream**: the daily tableau occupies the entire screen, and lateral movement (cursor x-axis, trackpad swipe, arrow keys) drifts the camera along an 8000px-wide pond with three distinct depth-planes parallaxing at 0.4x, 1.0x, and 1.6x. On portrait viewports, the same scene re-stages vertically: the koi rise from below rather than glide across. There is no responsive "breakdown" — there is a **rotation of the pond**. **The composition obeys a triadic spatial grammar:** every screen is divided not into a grid of rows and columns, but into **three depth-strata** — *Surface* (top 32% of viewport, holding the date stamp, the breath-prompt, and the brocaded title in retro-display), *Middle Water* (the central 44%, where the principal koi swims and the daily tableau resolves), and *Lacquered Floor* (bottom 24%, the navigational tray rendered as a thin gold-leaf strip with three ritual entries: *Today / 今日*, *Pond / 池*, *Letters / 文*). These three strata are never separated by visible dividers; they are separated by **focus depth** — the surface is sharpest, the middle is shallow-DOF, the floor is lacquer-shine soft. **Key structural panels (each a full-bleed scene in its own right):** 1. *The Threshold (今日の池, "today's pond")* — landing tableau. A single colossal date numeral (e.g., *11.V.MMXXVI*) rendered in the retro-display face, sitting on the surface stratum. A single koi crosses the middle stratum on a 9-second loop. The visitor is asked, in a quiet sub-headline, *"Stay one minute."* A breath-circle at the bottom expands and contracts on a 4-7-8 breathing cadence; if the visitor matches it for three cycles, the koi turns and looks back. This is the only "interaction" the site asks for, and it is optional. 2. *The Drift (流れ)* — horizontal/vertical scroll panel. As the visitor moves the camera through the pond, six to nine bokeh-lit tableaux pass — each a single composed scene: a paper lantern dissolving into the water, a koi carrying a single hand-set retro numeral, a lacquered black moon, a lily pad with a folded letter on it, a hand reaching into water from off-frame. Each tableau holds for 12 seconds before the camera invites continuation. There is no "next" button — only a faint gold-leaf chevron that pulses on the breath cadence. 3. *The Ledger (日録)* — a back-of-the-pond panel that lists the past 30 days as a vertical column of dates in the retro-display face, each accompanied by a 2-line haiku-length reflection. The visitor scrolls; each entry's koi swims briefly across the right margin as the entry centers. This is the only "list" view on the site, and it occupies a single full-bleed scene rather than a sidebar. 4. *The Letter Drop (文箱)* — a final scene in which the visitor may compose a single sentence to be sent to themselves in 30 days. A folded-paper lily pad floats on the water; the visitor types onto it; on submit, the letter sinks slowly with a koi escort, leaving a single ripple. No social, no share, no public. The letter is for the visitor alone. **Negative-space is replaced by negative-light.** Where Swiss design uses paper-white as the carrier, nonri.day uses **black-lacquer water** — the darkness is the medium. Headlines float on it; bokeh dots breathe through it; gold-leaf strips bisect it. The visitor is never standing on a page; the visitor is always **looking down into water**. ## Typography and Palette **Primary Display — *Bagel Fat One* (Google Fonts).** A retro-display face with bulbous, lacquered, hand-set show-card energy — chosen because it carries the weight of a 1960s Japanese hot-spring resort signboard while remaining readable as a date-numeral at 18vw. Used exclusively for the daily date stamp on the Threshold panel and for the colossal era-numeral above the Ledger. Set in ferrous gold (#C8A24B) on lacquer black, with a 0.4px inner gold stroke at 28% opacity to suggest gilding rather than flat color. Rendered at clamp(8rem, 18vw, 20rem) on Threshold; clamp(4rem, 9vw, 9rem) on the Ledger. Letter-spacing -0.012em. **Never used for body copy; never used at small sizes.** **Secondary Display — *Yeseva One* (Google Fonts).** A retro-display serif with hand-cut, slightly distressed terminals and a faint show-poster nostalgia. Used for tableau captions (e.g., *"the koi who carried the questions"*) at clamp(1.6rem, 3.4vw, 2.6rem). Set in dawn-rose (#D85A6E) at 78% opacity. Letter-spacing -0.005em. Italic variants used for the Korean reading of *논리* on the Threshold sub-line. **Body & UI — *Shippori Mincho* (Google Fonts).** A vertical-friendly Mincho serif with soft, almost watercolor-edged terminals. Used for breath-prompts, haiku-reflections in the Ledger, and the single sub-headline beneath each tableau. Weight 400 at 18px / 1.85 line-height with -0.003em letter-spacing for prose; weight 500 at 14px tracking +0.02em for the gold-leaf navigation tray. Mincho was chosen over a Western serif because the site is, at its root, a koi pond — the body voice should *sound Japanese* without being kitsch. **Annotation — *Klee One* (Google Fonts).** A schoolbook-handwritten Japanese face used at a single size (15px, weight 400) for the Letter Drop's input echo and for the past-letter envelopes in the Ledger. It is the only handwritten note in an otherwise lacquered space — it adds **the human hand**. **Palette — TRIADIC, anchored on a 120°-rotated wheel:** | Role | Hex | Notes | |------|------|-------| | Lacquer Black (carrier, 92% of canvas) | **#0E1014** | The pond-water at midnight. Slightly blue-cast to keep golds and rose vibrant. | | Ferrous Gold (primary accent — koi scales, retro-display, gold-leaf trays) | **#C8A24B** | Triadic anchor #1. Aged-leaf, not glitter. | | Brocade Vermillion (koi spots, breath-circle ignition state) | **#C9453B** | Triadic anchor #2 — 120° from gold. The kohaku (red-and-white) koi pattern. | | Brocade Indigo (deep-water glow, hover-state ripples) | **#3B5DC9** | Triadic anchor #3 — 120° from vermillion. | | Dawn-Rose (secondary display, captions) | **#D85A6E** | A warm shift off vermillion for type that should not compete with the koi. | | Pond-Pearl (rare highlight — the breath-circle apex, the lily-pad letter glow) | **#F4EBD0** | Cream-pearl, not white. The single luminous moment. | | Bokeh-Mist (ambient particle haze) | **#1F2A44** | A halfway-house between lacquer and indigo for the shallow-DOF bokeh dots. | The triad is the **three koi colors of the brocaded breed**: gold (*ogon*), vermillion (*kohaku-spot*), indigo (*asagi*). The palette is the fish. ## Imagery and Motifs **The koi is the only protagonist.** The site has exactly one recurring visual character: a brocaded carp rendered as a hand-painted SVG with 14 articulated segments (head, 3 dorsal, 3 ventral, 6 tail-fin, caudal-tip), animated as a sine-wave swim cycle with a 1.8s period, slight phase offsets per segment to simulate the lateral undulation of true koi swimming. Three color liveries appear (matching the triad): **Ogon** (pure gold), **Kohaku** (pearl with vermillion spots), **Asagi** (indigo back, gold belly). On the Threshold, only one koi is present (selected by date hash so each visit-day shows a consistent fish). On the Drift, up to three swim simultaneously at staggered depths. On the Ledger, a single small koi swims past the active entry. **Never more than three on screen at once.** The koi must always feel rare. **Bokeh-background as the universal backdrop.** Every scene is rendered against a procedurally-generated bokeh field: 80–120 hexagonal aperture-shaped light disks at three depth-planes, with disk radius 12–48px, opacity 0.04–0.18, blur 6–14px, drifting on a slow 2D Perlin-noise current at 0.3px/frame. The hexagonal aperture (rather than circular) is a deliberate photographic affectation — it tells the eye *"you are looking through a real lens"*. Disk colors are sampled from the triad with 70% gold-warm, 22% indigo-cool, 8% vermillion-rare. The bokeh field is the *light leaking through the pond surface from a sky we never see*. **Lacquered surfaces and gold-leaf traces.** The few solid elements (the navigation tray, the date-stamp underline, the breath-circle ring) are rendered as **gold-leaf**: a noise-textured gradient of #C8A24B → #E2BE63 → #C8A24B on a 22° axis, with a faint 1px crackle-overlay at 8% opacity to suggest aged-foil rather than chrome. Hover states bring the leaf to a gentler 92% brightness rather than a brighter shine — gold *softens* under attention here, it does not flare. **Ripples on cursor, breath, and koi-pass.** Every cursor stop within a tableau spawns a single dispersing ripple (3–5 expanding circles, opacity 0.2 → 0, scale 1 → 4, duration 1400ms, ease-out). Each breath-circle exhale spawns a synchronized ripple at the circle's center. Each koi pass leaves a faint wake-ripple along its trajectory. Ripples are the only "feedback" language the site speaks; there are no sound cues, no toast notifications, no haptic mimics. **Vertical-text Japanese flourishes.** A single column of vertical *tategaki* Japanese (the day's *kigo* — seasonal word — pulled from a 360-word lexicon: *春陰*, *陽炎*, *残月*, *時雨*, etc.) sits on the right edge of the Threshold panel at 2vw width, in Shippori Mincho weight 400, gold at 22% opacity. This is the only multilingual element on every page; it is decorative, but it is *not noise*. It is the calendar speaking in its mother tongue. **No photographs. No icons. No emoji. No charts.** The site refuses the standard kit. Its only image-objects are: the koi (SVG), the bokeh (procedural canvas), the gold-leaf strips (CSS), the lily-pad letter envelope (SVG), the breath-circle (SVG), the cursor-ripple (CSS). Everything else is either type, water, or light. ## Prompts for Implementation **Architecture: a single full-bleed canvas-stage shell.** One HTML document per scene, each scene occupying 100vw × 100vh with `overflow: hidden` and a fixed-position bokeh canvas behind a fixed-position koi SVG layer behind a fixed-position type layer. No conventional page-flow; sections are full-bleed scenes joined by a horizontal-pan controller (desktop) or a vertical-rise controller (mobile). The router is a single `currentScene` integer and a CSS transform on the parent stage. **Bokeh field — vanilla Canvas2D.** A single `` filling 100vw × 100vh, redrawn at ~30fps via `requestAnimationFrame`. 96 hexagonal disks initialized with random {x, y, depthPlane, baseRadius, hue}; each frame, x and y are perturbed by `simplex2D(disk.id, time*0.0003) * disk.depthPlane`, radius pulses on a slow sine, opacity follows a slow inhale-exhale matching the breath cadence. Disk colors are radial gradients from `hue at 0.7 alpha` to `hue at 0`. **Do not use heavy WebGL.** Canvas2D with composite mode `lighter` is enough and runs at 60fps even on integrated graphics. **Koi SVG with per-segment skeleton animation.** Each koi is a 14-segment SVG path family with `transform-origin` set per-segment along a body-spine. A JS animation loop sets each segment's `rotate(angle)` where `angle = baseAmplitude * sin(time * frequency + segmentIndex * phaseOffset)`. The koi's whole-body translation follows a Bézier path that traverses the viewport in 9 seconds, with a slight Y-axis sine-wobble at 0.4Hz amplitude 8px. **Spring-physics on direction-change**: when the koi reaches the off-screen edge and re-enters, its turn-to-face uses `cubic-bezier(0.34, 1.56, 0.64, 1)` (a back-out-spring) so the head swings around with believable inertia. This is the *spring* in the seed-vocabulary: not a UI bounce, but a fish's turn. **The breath-circle is the only "input" the site asks for.** SVG circle, gold-leaf stroke 2px, radius animating between 80px (inhale, 4s) and 120px (held, 7s), back to 80px (exhale, 8s). On exhale, a ripple spawns; on the third synchronized exhale (detected by the visitor matching their cursor-stillness to the cadence), the koi turns and looks at the cursor. **Do not gamify** — there is no badge, no streak, no "you completed the meditation." There is only the koi, looking back. **Animation language — "spring" applied with restraint.** Every interactive element uses a true spring tween (custom JS, mass=1, stiffness=120, damping=14) rather than a duration-based ease. Hover on the gold-leaf nav tray: spring scale 1 → 1.03. Click on a tableau caption: spring opacity 0.78 → 1.0. Breath-circle expansion: pure cubic-bezier (a breath is not a spring). Koi turn: spring on the head segment only. The spring system is registered globally; every new interactive element opts in by name. **Type-loading discipline.** Self-host the four Google Fonts via `font-face` with `font-display: swap`; preload Bagel Fat One (the Threshold's first paint) and Shippori Mincho (the body voice). The other two faces (Yeseva, Klee) load lazily. Do not animate type entrance — type **is the still water**; it does not flicker. **Storytelling priorities, in this order, ranked by the single test "does this deepen the pond?":** 1. Land in stillness. The Threshold must hold for at least 4 seconds before any motion begins. 2. Reward staying. The koi turns only after three synchronized breaths — the visitor who skips this never knows it exists. 3. Allow drifting. The horizontal pan must feel like a gondola, not a scroll. 4. Honor returning. The Ledger remembers every prior day the visitor has visited (localStorage) and lights their dates faintly gold. 5. End in privacy. The Letter Drop is for the visitor alone; nothing is sent, nothing is shared. **EXPLICITLY AVOID:** - No CTA above the fold. No sign-up modal. No newsletter. No "Get Started." The site has no users, only visitors. - No pricing page, no plans, no tiers. nonri.day is free, and that is structural, not promotional. - No stat-grid, no "trusted by," no logo cloud, no testimonial carousel. The site has no credentials to flash. - No sticky header, no breadcrumb, no progress bar, no scroll-percentage. The visitor is not measured here. - No emoji, no toast notifications, no skeleton-loaders. **The pond is always already loaded.** - No dark-mode toggle. There is one mode: lacquer at midnight. - No social share. The day is not for sharing; it is for keeping. **Performance discipline:** The bokeh canvas, the koi SVG, and the spring engine combined must hold 60fps on a 2019 MacBook Air. If a feature drops the budget, *the feature is wrong, not the budget*. Limit koi count to 3 simultaneous, cap bokeh disks at 96, debounce ripple spawns at 80ms. ## Uniqueness Notes **Differentiators from other designs in the registry of 340+ siblings:** 1. **Triadic palette anchored on koi-livery genetics, not color-wheel theory.** Frequency analysis shows triadic at 2% — already rare. But beyond rarity, this site grounds the triad in *biological reality*: gold (*ogon*), vermillion (*kohaku*), indigo (*asagi*) are the three classic brocaded-koi color genes. Most "triadic" sites pick three hues 120° apart and stop there; nonri.day argues that the triad is *the fish itself*, and every accent on the page is therefore a scale, not a swatch. 2. **Bokeh-background (2% in registry) deployed as the structural carrier rather than as decoration.** Most sites that use bokeh treat it as a background-of-a-background — a soft visual filler behind a hero image. Here the bokeh **is** the medium. There is no hero image; the lens-defocused light field carries the entire visual weight, and the koi is a silhouette moving through it. This inverts the usual figure/ground relation: light is the figure, fish is the cut-out. 3. **Retro-display typography (2% in registry) used as gilded show-card numerals, not as nostalgic flair.** Bagel Fat One is treated as a single-purpose ceremonial object — used only for the daily date and the era-stamp, in gold-leaf on lacquer-black. It is not used to "feel retro"; it is used to **weigh the day**. The retro-display becomes a *gilded numeral plate*, closer in spirit to a Hermès orange-box embossing than to a 1970s record-sleeve. 4. **Tropical-fish motif (5% in registry) re-cast as a meditative, slow-protagonist character rather than as decorative aquarium-noise.** Most sites that invoke fish use them as ornamental swarms or as playful icons. Here, exactly one koi at a time swims with hand-painted livery, on a 9-second loop, with spring-physics inertia on its turn. The koi is not décor; it is **the only animate being on the site, and you are watching it.** This is a singular protagonist, not a pattern fill. 5. **Full-bleed (47% in registry — common, but here re-radicalized as "no responsive breakdown.")** Where most full-bleed sites drop to a stacked layout on mobile, nonri.day **rotates the pond**: on portrait viewports, the koi rises from below, the type stacks vertically with *tategaki* discipline, and the same composition re-orchestrates rather than disassembling. The site has two valid orientations, not a "primary + fallback." 6. **Spring-pattern (34% common) constrained to a single physical metaphor — the koi's turn — and absent from all UI hover/scroll bounce.** While 34% of sites use spring animations on cards, hovers, and entrances, nonri.day uses spring-physics on exactly one motion: the koi's head-turn at the edge of the viewport, modeling a fish's body inertia. The rest of the site uses cubic-bezier easing tuned to breath rhythm (4-7-8). Spring becomes a *biological* signal, not a UI flourish. 7. **Refuses the "zen minimalist" white-space cliché in favor of "lacquered depth."** Registry shows zen at 5% and japanese-minimal at 5% — both well-trodden. But nearly every implementation reaches calm via *paper-white emptiness*. nonri.day inverts this: the carrier is **lacquer-black water**, depth is the medium, and stillness comes from gravitational pull, not from absence. The pond is full; it just moves slowly. 8. **No "user" — only "visitor."** The site explicitly refuses CTA-heavy patterns, sign-ups, sharing, metrics, and engagement loops. The Letter Drop sends a letter from the visitor to themselves; the Ledger is local-only; there is no analytics dashboard for the visitor's "streak." This is structurally aligned with the *luxurious* tone in the seed: privacy is the luxury good. 9. **Tri-lingual root: Japanese (錦鯉), Korean (논리), English (non-village).** The single domain name carries three readings, and the site honors each: vertical *tategaki* kigo on the Threshold (Japanese), the *논리* romanization in the sub-headline (Korean), and the English fragmentation *non-ri / not-place* in the About scene's epigraph. This is rare in the registry, where bilingual sites typically pick one foreign accent. **Chosen seed/style (from assignment):** *aesthetic: zen, layout: full-bleed, typography: retro-display, palette: triadic, patterns: spring, imagery: bokeh-background, motifs: tropical-fish, tone: luxurious.* **Avoided patterns (from frequency analysis):** - Avoided **hand-drawn aesthetic (75% — vastly overused)** despite its prevalence; the site is lacquered-and-procedural, not sketchbook. - Avoided **photography imagery (80% — vastly overused)**; the site uses no photographs at all, only SVG, canvas, and type. - Avoided **gradient palette (81% — vastly overused as a default)**; while the gold-leaf strips use a noise-textured gradient, the dominant carrier is flat lacquer-black, and color is anchored in three discrete hues, not interpolated. - Avoided **warm palette (80% — overused)**; the triad is cold-anchored on indigo with warm gold and vermillion as accents, breaking the warm-default trend. - Avoided **mono typography (81% — overused)**; no monospace anywhere on the site. The voice is Mincho-serif, retro-display, and Japanese schoolbook handwriting. - Avoided **friendly tone (66% — overused)** and **authoritative tone (48% — overused)**; the chosen *luxurious* register is cooler and quieter than either, more concierge-at-a-ryokan than spokesperson. - Avoided **dashboard layout (74% — vastly overused)** and **card-grid (50% — overused)**; the site has zero cards and zero dashboards. Each scene is a single full-bleed tableau. - Avoided **parallax pattern (77% — vastly overused as cliché)** at the page-scroll level; parallax appears only as the three-stratum depth motion within the pond, not as scroll-driven background offsets. - Avoided **stagger pattern (68% — overused)**; type does not flicker in, sections do not cascade. The pond is *already there* when you arrive.