# Design Language for naru.day ## Aesthetics and Tone naru.day is **a ferry landing at the hour before dawn** — *naru* (나루) is the old Korean word for the wooden jetty where a small boat is poled across still water, and this site treats each day as one such crossing: you push off from the bank, you glide across a sheet of cold blue, you arrive. The aesthetic is **Japanese-zen / nare-no-hate stillness rendered in cool river light**, deliberately turning away from the warm, hand-drawn, photograph-heavy crowd that dominates the corpus. Think of a single sheet of *kozo* paper laid over deep water, of the way mist sits on a river at 5 a.m., of a Hasui Kawase woodblock print of a jetty in indigo and grey with one lit lantern. Nothing is cheerful here and nothing is sad — the tone is **zen-contemplative**, the mood of someone standing at the water's edge with a cup of tea, watching the day arrive the way a boat arrives: slowly, then all at once. The emotional register is *patience made visible*. No urgency, no exclamation, no conversion funnel. Where most sites shout, naru.day exhales. Surfaces are matte, not glossy — there is **zero glassmorphism, zero frosted blur, zero neon glow** (the three things 79%+ of the corpus reaches for). Light comes from one low source, like a paper lantern on the dock, and everything else is the cool grey-blue of pre-dawn river. The only warmth permitted is a single thread of dawn-rose that appears exactly once, at the very bottom of the page, when the crossing is complete — the sun finally clearing the far bank. ## Layout Motifs and Structure The page is **one vertical river, scrolled top to bottom, the way you'd track a boat from the near bank to the far bank.** The governing principle is *ma* (間) — negative space as an active material, not leftover. Ma-negative-space sits at 15% in the corpus; this site pushes it to an extreme: **roughly 70% of every viewport is intentionally empty water.** Content is small, anchored low or to one side, never centered-and-large in the hero-dominant way 88% of sites default to. Structural rules: - **The waterline.** A single hairline horizontal rule (1px, `#3D4E63` at 40% opacity) sits at a fixed vertical position — 38% from the top — and stays there as a `position: sticky` element through the whole scroll. It is *the surface of the water*. Text blocks float just above it (sky) or just below it (reflection). Nothing ever crosses it abruptly. - **Seven stations, not seven sections.** The crossing has seven moments — *Bank*, *Push-off*, *Midstream*, *Stillness*, *Drift*, *The Far Bank in Sight*, *Arrival* — and each occupies a tall scroll-region (roughly 130vh) with one short text passage and one ink-line motif. There are no cards. There is no grid. Stations are stacked, generously spaced, asymmetrically aligned: odd stations hug the left third, even stations hug the right third, so the eye tacks back and forth like a poled boat. - **The lantern column.** A narrow fixed column on the far left (about 64px wide) holds a vertical dotted line and a single small circle — the lantern — that slides downward as you scroll, marking progress along the river. It is the only persistent navigation. No menu bar, no hamburger, no logo lockup top-right. - **No footer furniture.** The page does not end in a contact block or link farm. It ends in *Arrival*: the waterline dissolves, the dawn-rose thread appears, a single line of text, and a generous field of pale paper. That is the whole footer. ## Typography and Palette **Fonts — all Google Fonts, a quiet pairing of one serif voice and one slim sans, never more:** - **Display & passages — *Newsreader* (Variable, optical size, italic available).** Newsreader is a low-contrast, slightly literary serif with a beautiful true italic; set passages at 20–26px, `line-height: 2.0`, `letter-spacing: 0.01em`, weight 300–400. Station names appear in Newsreader *italic*, lowercase, 15px, letter-spaced wide (`0.3em`) — they read like margin notes in a travel diary. This is a **serif-revival** choice (13% of corpus) deliberately steering away from the 94%-mono default; there is no monospace anywhere on this site. - **Wordmark & numerals — *Zilla Slab* (light, 300).** "naru.day" is set in Zilla Slab Light, all lowercase, 28px, with the period as a small filled square (`▪`) rather than a dot — a tiny visual rhyme with the lantern. The seven station numerals (一 二 三 … or 1–7) use Zilla Slab Light at 13px. - **Optional CJK accent — *Noto Serif KR* (200).** The single Korean word 나루 may appear once, very large (clamp 80px–160px), weight 200, `#28384A`, at extremely low opacity (8%), as a watermark behind the *Bank* station. Used at most once. **Palette — cool river at pre-dawn, "ocean-deep" register, with exactly one warm note (ocean-deep is 3% in the corpus; warm palettes are 98% — this is the inversion):** - `#E8EDF1` — *kozo paper* — the base background, a faintly cool off-white, never pure `#FFF` - `#28384A` — *deep current* — primary text and the heaviest ink lines, a near-black blue - `#3D4E63` — *river slate* — the waterline, secondary text, station rules - `#6E8BA6` — *mist* — tertiary text, reflections, the lantern column dots - `#A9C2D4` — *shallows* — fills for ink-line motifs, hover wash - `#1B2733` — *far-bank shadow* — used only in the *Stillness* station as a low full-bleed band - `#E7B7AE` — *dawn rose* — the single warm thread, appearing ONLY at *Arrival*, never above it No gradients except one: a single vertical 8%-opacity wash from `#A9C2D4` to transparent on the waterline, suggesting depth. Gradient palettes are 95% of the corpus — this site is essentially flat by comparison. ## Imagery and Motifs **Everything is ink-line SVG — single-weight brush strokes, hand-built, no photography, no 3D render, no stock illustration, no gradient mesh.** Photography is in 98% of the corpus; this site has none. The visual vocabulary is the *sumi-e* river: - **The boat.** One tiny vessel — five strokes: hull, two for the prow curl, one for the pole, one for the figure — drawn in `#28384A` at 1.5px stroke. It is the scroll indicator: it appears at the *Push-off* station and travels down the right margin, rotating a few degrees with momentum, settling when you stop scrolling. ~28px wide. Drawn once, transformed via CSS. - **Ripple rings.** Concentric open arcs (never full circles), `#6E8BA6`, that emanate slowly from where the boat sits — `path-draw-svg` style stroke animation, 6–9 second loops, three rings max, fading as they widen. Wave-forms motif (2% of corpus). - **Reed strokes.** At the *Bank* and *Arrival* stations, 5–9 vertical single brush strokes of varying height (`#3D4E63`, 2px), slightly bowed, leaning a few degrees — riverbank reeds. They sway maybe 1.5 degrees on a slow sine, decoupled phases. - **The lantern.** A small filled square `#E7B7AE`... no — above *Arrival* the lantern is `#6E8BA6`; only at *Arrival* does it warm to `#E7B7AE`. It carries a faint radial glow (the only soft light on the page), 8% opacity, ~120px radius. - **The waterline hairline** itself is a motif: occasionally (every ~40s) a single shallow sine ripple travels along it left-to-right, a 3px amplitude perturbation, like wind crossing the surface. - **Reflection text.** Below the waterline, each station's name is echoed as a vertically-mirrored, 12%-opacity, blurred-by-1px copy — the word reflected in water. This is the closest the site comes to blur, and it is used only here, only on the small station labels. Nothing blinks, nothing pulses for attention, nothing bounces. All motion is *current* — slow, directional, easing like water finding level. ## Prompts for Implementation Build naru.day as **a single-route, single vertical scroll — one HTML file, one CSS file, one JS module — that takes about 70 seconds to traverse and feels like poling a small boat across a still river at dawn.** There is no CTA, no pricing block, no stat grid, no testimonial row, no feature cards, no email signup, no contact form, no nav menu. There is only the crossing. **Storytelling structure — seven stations, vertical scroll, fade-reveal transitions (fade-reveal is 19% in the corpus — used here as the *only* transition, not stacked with parallax/spring/magnetic):** 1. **Bank.** Open on a near-empty field of `#E8EDF1`. The waterline sits at 38%. The wordmark "naru.day" small at lower-left. The Korean 나루 watermark looms huge and faint behind. Reed strokes at the bottom-left, swaying. One line of Newsreader: *"a day is a crossing. you are at the near bank."* The boat is not yet visible — it waits, drawn but `opacity: 0`. 2. **Push-off.** As you scroll in, the boat fades in at the left edge just above the waterline, the pole stroke animates last (path-draw). First ripple ring blooms. Passage: *"push off. the bank lets go without comment."* 3. **Midstream.** The boat has drifted to center-right. Two ripple rings now. The lantern circle in the left column is a third of the way down. Passage about being equidistant from both banks — *"nothing behind you is close. nothing ahead of you is close. this is the longest part."* Lots of empty water — let this viewport be 90% blank. 4. **Stillness.** A full-bleed low band of `#1B2733` enters from the bottom (the deepest channel), the waterline still visible across it. The boat sits motionless. Ripples stop. Passage: *"if you stop poling, you do not sink. you simply stay."* Hold here — make the scroll feel slightly heavier, a touch of scroll resistance via a longer station (160vh). 5. **Drift.** The `#1B2733` band recedes. The boat resumes, ripples resume but lazier. A single shallow sine ripple crosses the waterline. Passage: *"the current was always going the way you wanted. you only had to permit it."* 6. **The Far Bank in Sight.** The lantern column circle is near the bottom. Reed strokes begin to appear faintly at the bottom-*right* now (the opposite bank). Passage: *"there. that line of reeds. that was the far bank the whole time."* The light begins to lift — background nudges from `#E8EDF1` toward `#ECF1F4`, almost imperceptibly. 7. **Arrival.** The waterline hairline thins and dissolves. The boat reaches the right edge and stops; the figure stroke stands. The lantern warms to `#E7B7AE` and its faint glow appears. A single horizontal thread of dawn rose `#E7B7AE` (2px, 30% opacity) runs where the waterline was. Reed strokes at the bottom sway and still. One last line, Newsreader italic, centered low: *"you have arrived. tomorrow there is another crossing. it will also be fine."* Then a tall, generous field of pale paper. End. **Implementation notes:** - Use `IntersectionObserver` for fade-reveal of each passage (`opacity 0→1`, `translateY 12px→0`, 1.4s `cubic-bezier(.2,.6,.2,1)`). Do NOT add parallax, do NOT add cursor-follow, do NOT add magnetic hover, do NOT add tilt-3d — those four are 80%+ of the corpus and are explicitly absent here. The boat's scroll-position mapping is the *only* scroll-coupled motion. - The boat: a single inline ``, positioned with `position: sticky` near the top, its horizontal `translateX` and slight `rotate` driven by a throttled scroll handler with a lerp toward target (current = current + (target - current) * 0.06) so it always glides, never snaps. - Ripple rings: pure CSS `@keyframes` on stroked SVG `` elements — `stroke-dashoffset` + `r` growth + `opacity` fade, 7s, `ease-out`, staggered `animation-delay`. - Respect `prefers-reduced-motion`: freeze the boat mid-river, kill ripples and reed sway, keep fade-reveals as instant. - Type: load Newsreader (opsz, ital), Zilla Slab (300), Noto Serif KR (200) from Google Fonts. Body copy `max-width: 34ch` — passages must be narrow, like lines in a poem. - Everything matte. No `box-shadow` except the single 8%-opacity radial glow on the *Arrival* lantern. No border-radius on the wordmark's period square. No `backdrop-filter` anywhere. ## Uniqueness Notes Differentiators, each a deliberate move against the frequency analysis: 1. **The waterline as a sticky structural spine.** A single 1px sticky horizontal rule at 38% that *is* the water — content lives "in sky" above it and "in reflection" below it, with mirrored low-opacity echo text. No other corpus site (per the analysis's dominant card-grid / hero-dominant / centered patterns at 83–90%) organizes a page around one persistent hairline as a literal surface. 2. **Cool "ocean-deep" pre-dawn palette in a sea of warm.** 98% of the corpus is warm; 95% uses gradients. naru.day is essentially flat and cold — `#E8EDF1` paper over `#28384A` deep-current — with exactly *one* warm pixel-thread (`#E7B7AE`) that appears only at the final station. The warmth is *earned* by scrolling, not given. 3. **Zen / ma-negative-space pushed to ~70% empty viewports, with serif-revival type and zero monospace.** Zen is 9%, ma-negative-space 15%, serif-revival 13%, while mono typography is 94%. This site combines the three underused notes and refuses the dominant one entirely. 4. **Sumi-e ink-line river instead of photography.** Photography is in 98% of the corpus; here every visual is a single-weight brush-stroke SVG — boat, ripples, reeds, lantern. Wave-forms motif (2%) is the entire imagery system. 5. **The crossing as the only "navigation."** No menu, no hamburger, no footer link farm, no CTA, no pricing, no stats, no testimonials — just a lantern sliding down a dotted column and a boat poling across. A narrative-experience layout (immersive-scroll is 11%) taken to its quiet extreme. Chosen seed / style: **aesthetic: zen, layout: ma-negative-space, typography: serif-revival, palette: ocean-deep, patterns: fade-reveal, imagery: line-illustration, motifs: wave-forms, tone: zen-contemplative** (fallback selection — no seed supplied in assignment; this combination is absent from the other designs reviewed). Avoided patterns from frequency analysis: hand-drawn (96%), glassmorphism (79%), photography (98%), warm palette (98%), gradient (95%), mono typography (94%), parallax (92%), cursor-follow (89%), spring (85%), magnetic (81%), card-grid (90%), full-bleed-as-default (88%), hero-dominant (12% but the default mode) — none are used here except a single intentional `#1B2733` full-bleed band in one station.