# Design Language for nanohana.stream ## Aesthetics and Tone nanohana.stream is a **slow-broadcast field station** — a single, never-ending live feed pointed at a hillside of *nanohana* (rapeseed blossom, the chartreuse-gold flower that floods Japanese riverbanks every March). The site is not a video platform with thumbnails and queues; it is one *channel*, always on, and the page is the frame around it. The governing aesthetic is **japanese-minimal as a broadcast instrument**: the restraint and *ma* (間, charged emptiness) of a Muji catalogue or a NHK test-card, but treated like the chrome of a calm television studio — thin registration marks, a quiet timecode, a signal-strength tick, a single tally light. The mood is **zen-contemplative, almost clinical in its calm** — the opposite of the warm-gradient pastoral-romantic register that dominates flower-themed sites in this corpus. There is no honeyed sunset, no soft-focus bokeh meadow, no script font reading *bloom*. Instead: bleached paper-white, ink-grey instrumentation, and exactly one colour that does any real work — the live, unmixed nanohana yellow, used the way a broadcast engineer uses a tally lamp: sparingly, and to mean *this is happening right now*. The tone of voice is the tone of a field recordist's notebook: lowercase, exact, unhurried — "feed 04 · north slope · wind 6km/h · 14:22 JST." ## Layout Motifs and Structure The page is built as a **single full-bleed broadcast frame** — not card-grid, not bento, not the hero-then-sections scroll. Think of the screen as a viewfinder: - **The Frame.** A 1px ink hairline insets the entire viewport by `clamp(16px, 4vw, 64px)`, with four L-shaped registration corners (the crop-marks of a TV safe-area). Everything lives *inside* this frame. The frame is fixed; content scrolls behind it like film through a gate. - **The Plate (centre).** The dominant region is a tall portrait-ish rectangle — the "live plate" — holding the current view of the nanohana field (a slowly drifting CSS/SVG composition, never a stock photo). It occupies roughly the central 58% of the frame width, set against `ma` on either side: the negative space is *load-bearing*, not filler. - **The Rail (left margin).** A vertical column of small ticks — one per "feed" (north slope, river bend, terrace, dusk field, rain field, night field) — written as `01` … `06` in mono, rotated 90°. The active feed's tick is the only one lit nanohana-yellow. Selecting a feed doesn't navigate; it *cuts* — the plate cross-fades and the timecode reseeds. - **The Strip (bottom).** A single-line status strip: timecode (`HH:MM:SS:FF` style, frames counting), location string, wind/temperature glyphs, and a 12-segment signal meter. It updates continuously. This is the only "data" on the page and it is treated as instrument readout, not a stat-grid. - **The Margin Notes (right).** Sparse, optional: 2–3 short field annotations fading in as you scroll, set flush-right, hanging off the inner frame line — like a cinematographer's marginalia. Composition rule: **asymmetric within strict orthogonality.** Nothing tilts, nothing curves; the asymmetry comes purely from where the single yellow element sits in an otherwise grey, gridded field. Vertical scroll moves through ~5 "scenes" (dawn → midday → wind → dusk → night-rain) but the frame, rail, and strip never move — only the plate's content and palette temperature shift. ## Typography and Palette **Type system — Google Fonts only:** - **Instrument / UI / timecode face:** `IBM Plex Mono` (weights 300, 400, 500). Every label, tick number, timecode, location string, signal readout, and margin note is set in Plex Mono — lowercase, tracked `+0.04em` at micro sizes, `+0.12em` for the few uppercase tags (`LIVE`, `JST`). This is the *machine voice* of the field station. - **Editorial / title face:** `Zen Kaku Gothic New` (weights 300, 400, 500) — a clean, low-contrast Japanese-supporting humanist sans whose Latin is quiet and squared. Used only for the station name `nanohana.stream`, the feed names, and any prose sentence longer than a label. Set large, light-weight, generous line-height (1.7), never bold. Its name literally carries 禅 (*zen*) — fitting and unforced. - **Numeral accent:** the feed indices and timecode frames lean on Plex Mono's tabular figures so digits never reflow as they tick. No third decorative face. The contrast in the page is *mono vs. humanist*, not *serif vs. script*. **Palette — near-monochrome, one true colour:** - `#F4F3EE` — *washi paper white*, the base (warm-neutral, not pure white; the page should feel like unbleached paper under studio light). - `#1C1B19` — *sumi ink*, near-black, all text and hairlines. - `#8E8C84` — *ash grey*, secondary text, inactive ticks, the unlit signal segments. - `#D7D5CC` — *fog grey*, the frame hairline and registration marks at rest, faint grid. - `#E9E63B` — **nanohana yellow**, the *only* saturated colour — the live tally tick, the active feed index, the lit edge of the plate, the blinking `LIVE` dot. Used on under ~3% of pixels, ever. - `#C9C840` — *aged nanohana*, a muted variant used solely for the dusk scene's tally and the visited/secondary highlight, so the yellow can "age" with the time-of-day without introducing a new hue. - `#3A4A2E` — *deep stem green*, used at extreme low opacity (4–8%) only inside the plate's drifting field composition for the suggestion of stalks; never in the chrome. Deliberately **no gradient in the UI** (the corpus is 95% gradient — this site refuses it). The only gradient permitted is *inside* the live plate, as a slow vertical light-falloff from sky to field, and it shifts temperature across scenes (cool dawn → neutral midday → warm-grey dusk → blue-black night). ## Imagery and Motifs - **The drifting field (the plate's content).** Not a photograph. A generative SVG/Canvas composition: a few hundred thin vertical strokes (rapeseed stalks) in `#3A4A2E` at low opacity, each topped with a tiny 3–5px cluster of nanohana-yellow dots; the whole field sways with a slow, low-amplitude wind noise (Perlin-ish, ~0.05Hz). Above it, a flat colour wash for "sky" that holds the scene temperature. That's the entire image — wind made visible. - **Registration & crop marks.** Four L-corners, plus tiny `+` cross-hairs at the plate's edges — the language of a film gate / TV safe-area. They sit in `#D7D5CC`, sharpening to `#1C1B19` only on the active edge. - **The tally light.** A single 6px filled circle in nanohana-yellow beside the word `live`, breathing on a slow opacity pulse (4s) — the page's heartbeat. The *only* element allowed to "pulse." - **Signal meter.** 12 small rectangles; N lit in `#1C1B19`, the rest in `#8E8C84`; the topmost lit one ghosts toward `#E9E63B` when "signal" is strongest. Purely atmospheric instrumentation. - **Petal-fall accent (rare).** On scene transitions only, 3–6 individual `#E9E63B` dots drift down through the plate and settle on the inner frame line, then fade — a restrained nod to falling blossom, never confetti. - **Hairline grid.** A faint `#D7D5CC` 8-column modular grid visible at ~6% opacity behind the *ma*, like graph paper under tracing film. Strengthens the "field station log" feeling. No icons from a set, no illustrations of people, no marble/leather/3D textures, no leaf-clipart. The motif vocabulary is entirely: *line, tick, mark, wash, drift.* ## Prompts for Implementation Build nanohana.stream as **one HTML page, one CSS file, one ES module** — no framework, no build step, no service worker. The whole experience is a ~70-second sit-and-watch broadcast; treat it like ambient slow-TV with a chrome around it. **Structure & storytelling (5 scenes, vertical scroll, but the frame is permanent):** 1. **Cold open — `dawn`.** Page loads to a cool blue-grey wash in the plate, stalks barely visible, near-still. Timecode begins ticking from `05:14:00:00`. Station name `nanohana.stream` fades up once, top-left inside the frame, in `Zen Kaku Gothic New` light, then settles to a small persistent mark. `live` + yellow tally appears bottom-left. No buttons. 2. **Scroll → `midday`.** Plate wash warms to neutral washi-grey; wind noise amplitude rises; the yellow flower-dots become legible across the field. A single right-margin note fades in: *"north slope · full open · 14:22 jst."* 3. **Scroll → `wind`.** Amplitude peaks; stalks lean and recover; the signal meter's top segment ghosts to yellow; 3–5 yellow petal-dots break loose and drift to rest on the inner frame line. Margin note: *"gust 6km/h · feed holds."* 4. **Scroll → `dusk`.** Wash cools toward warm-grey-violet; the tally and active feed index swap from `#E9E63B` to aged `#C9C840`; field darkens; flower-dots dim but don't vanish. Margin note: *"light failing · switching to terrace feed in 00:40."* 5. **Scroll → `night-rain`.** Wash goes blue-black; faint diagonal hairlines simulate rain over the plate; stalks reduced to silhouettes; a few yellow dots still glow. Timecode passes `19:50:xx`. Final margin note, flush-right, small: *"feed continues."* — then the strip keeps ticking; the page simply *is*, indefinitely. **The feed rail (left, 90°-rotated mono):** `01` north slope · `02` river bend · `03` terrace · `04` dusk field · `05` rain field · `06` night field. Clicking a tick does NOT scroll/navigate — it cross-fades the plate composition + reseeds the timecode + relights that tick in yellow (others go ash). It is a *channel cut*, instant and quiet. **Motion language (lean against the corpus, which is 92% parallax / 89% cursor-follow / 85% spring / 81% magnetic):** - **No cursor-follow, no magnetic buttons, no 3D tilt, no spring bounce.** This site is *still furniture with a live window in it.* - Allowed motion, all slow and linear/eased-sine: the wind sway of the field (continuous), the 4s tally pulse, scene wash cross-fades (1.6s), petal-drift on transition, the per-frame timecode tick, the occasional signal-segment flicker, and a quiet `fade-reveal` (no slide, no scale) for the right-margin notes as they enter the viewport. - One restrained `path-draw-svg` moment is permitted: on first load, the four registration L-corners draw themselves in over ~0.8s. After that, never redraw. - Scroll-linked changes are *scene-state* only (which wash, which amplitude, which tally hue) — implemented as a small state machine reading scroll position, not as a parallax stack. **Hard exclusions:** no CTA, no "watch now" button, no pricing, no plans, no stat-grid / counter-up numbers, no testimonials, no logo wall, no email capture, no FAQ, no chatbot, no cookie banner, no card grid of "other streams," no thumbnails, no share buttons. The only interactive thing on the page is the six-tick feed rail. The page should be usable, and complete, with JavaScript producing only: the ticking timecode, the wind animation, the scene-state machine, and the feed cuts. **Texture & finish:** the whole page carries a *very* faint film-grain overlay (1–2% opacity, animated subtly) so the washi-white never reads as flat #FFF. Hairlines must be true 1px (use `0.5px` on hi-dpi where supported). Keep the type small and tracked; let the *ma* be enormous; let the single yellow do all the talking. ## Uniqueness Notes Differentiators from other designs in this codebase: 1. **A flower site that refuses the flower-site palette.** The corpus is 98% warm, 95% gradient, 35% pastoral-romantic for anything botanical. nanohana.stream is near-monochrome washi-grey with *one* unmixed yellow used like a tally lamp, and **zero gradient in the UI**. The flower is present as data (lit ticks, drifting dots), not as decoration. 2. **The chrome is a TV studio, not a website.** Registration corners, a per-frame timecode, a 12-segment signal meter, a tally light, a channel rail — the layout vocabulary is broadcast-engineering, not card-grid/bento/hero (which dominate at 88–90%). The "page" is literally the safe-area frame around one live window. 3. **Anti-interaction by design.** Against a corpus that is 89% cursor-follow, 85% spring, 81% magnetic, 92% parallax — this site has *none of those*. Its only control is a six-tick channel cut, and that doesn't even scroll the page. Motion is limited to wind, a 4s pulse, and slow scene cross-fades. It is deliberately the calmest, least "reactive" page in the set. 4. **`.stream` taken literally and ambiently.** Not a video platform UI (no thumbnails, queue, playlists, "up next"). It's a single perpetual channel — slow-TV — so the experience has no end state; it just keeps ticking. The generative field *is* the stream. 5. **Imagery is wind, not photography.** The corpus is 98% photography. This site has no photos at all — the central image is a procedural SVG/Canvas field of stalks and yellow dots animated by wind noise. "Imagery" here means line, tick, mark, wash, drift. Avoided patterns from frequency analysis: hand-drawn (96%), glassmorphism (79%), photography (98%), card-grid (90%), full-bleed-as-hero-stack, gradient palette (95%), warm palette (98%), parallax (92%), cursor-follow (89%), spring (85%), magnetic (81%), tilt-3d, pastoral-romantic tone (35%). Chosen seed/style: **japanese zen portfolio** — interpreted as a broadcast field-station rather than a personal portfolio (aesthetic: japanese-minimal / evolved-minimal; layout: full-bleed + ma-negative-space + minimal-navigation; typography: mono + humanist; palette: cool-grays + monochrome with a single nanohana-yellow accent, no gradient; patterns: fade-reveal + one path-draw-svg, nothing reactive; imagery: generative-art (procedural field), grain-overlay; motifs: nature (rapeseed) rendered as grid-lines / floating-elements / wave-forms; tone: zen-contemplative).