# Design Language for nanohana.stream ## Aesthetics and Tone nanohana.stream is an **ethereal** late-night listening room — a private vintage broadcast station that plays only ambient streams from imaginary October evenings between 1962 and 1979, presented as a bento-box dashboard of memory rather than a media player. The aesthetic is misty, slow, and tactile: deep burgundy leather surfaces, soft amber tube-glow, and a single phantom track playing in the upper left. The tone is **luxurious** — not ostentatious, but considered: every surface is rendered with multi-layer shadow, every typographic flourish kerned by hand, every interaction slowed to the pace of a sommelier opening wine. Inspiration draws from the Brionvega TS502 radio (Marco Zanuso, 1964), the leather-and-brass interiors of the Carlyle Hotel bar, the Grotesque typographic experiments of *MIT Press* book covers, and the ripple-water visualizations of Akira Mizuta Lippit's experimental cinema essays. Visiting feels like sitting in a velvet armchair while a hidden orchestra tunes in another room. ## Layout Motifs and Structure The architecture is a **bento-box** layout — a 4×4 grid of unequal-sized tiles where each tile holds a distinct "station": one large tile (3×2) for the now-playing visualization, a medium tile (2×2) for the program guide, a series of small tiles (1×1 to 2×1) for *track lore*, *vinyl serial*, *station log*, *next program*, *engineer's notes*, *time signal*, *bookmark*, *tonearm position*, *correspondence*. Each tile is framed with a deep burgundy leather texture (a layered noise + chromatic-gradient suggesting tooled leather) and joined by 1px bronze hairlines. The top-left tile hosts the wordmark "nanohana.stream" in Grotesque-neo lowercase with an ink-tracked period. The page does not scroll vertically; the bento takes the full viewport. A small floating bottom-center "broadcast band" shows a single horizontal line of frequency markers (88.0 — 108.0 MHz) with a draggable handle that the user can swipe to "tune" between five station modes. ## Typography and Palette **Typography** is led by Schibsted Grotesk Variable (the **grotesque-neo** brief): Schibsted Grotesk 800 at 84px for the wordmark, Schibsted Grotesk 500 at 16px / 1.55 for body, and Schibsted Grotesk 700 at 11px tracked +180 uppercase for tile labels. A display secondary, EB Garamond Italic at 22px, appears in track lore prose for narrative warmth. A monospace face, JetBrains Mono 11px, handles frequency readouts and timestamps. Numbers everywhere are tabular oldstyle. **Palette** is **deep-burgundy** with tube-glow amber: - `#1A0B0E` — true broadcast midnight (page ground) - `#2E141A` — secondary tile fill - `#5A1F2D` — burgundy leather (primary tile background) - `#7A2B3E` — wine velvet (hover state) - `#D4A574` — tube-glow amber (now-playing accent, single bright key) - `#E8D4B0` — paper cream (high-emphasis text) - `#8B6845` — bronze hairline (tile borders, dividers) - `#3D1A1F` — deep oxblood (shadow zones, leather creases) The amber tube-glow appears only on the now-playing tile and the broadcast-band handle — a single warm light in a dark room. ## Imagery and Motifs Imagery is built around **leather-texture** — every tile background is a multi-layer composite: (1) a base burgundy fill, (2) a noise-texture SVG at 8% opacity to simulate leather grain, (3) a radial-gradient highlight at 12% opacity to simulate tooled-leather sheen, (4) a 1px bronze inset frame. The combined effect gives every surface the depth and feel of vintage Italian-leather speaker furniture. **Vintage** motifs are scattered as tile contents: a hand-drawn tonearm graphic, a tube-glow indicator illustration, a vintage broadcast-tower wireframe, a hand-lettered station logo "NHN-1962", and rotary-knob iconography rendered in 1.5px bronze SVG lines. The now-playing tile hosts a **ripple** waveform visualization — concentric ripple-rings emanating from a center point at the rhythm of the imagined music, drawn in CSS `animation: ripple 2.4s ease-out infinite`. No real photographs; everything is leather, brass, vacuum-tube imagery, and warm shadow. ## Prompts for Implementation Build a bento-box late-night listening dashboard. Use CSS Grid `grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 1px; background: #8B6845;` with tiles spanning various sizes (1×1, 2×1, 2×2, 3×2). The grid gap reveals bronze hairlines via the background. Each tile has the four-layer leather composite (base fill + noise + radial highlight + inset bronze border) — specifically: `background: linear-gradient(135deg, #5A1F2D 0%, #3D1A1F 100%), url(#noise) 0.08; box-shadow: inset 0 0 0 1px #8B6845, inset 0 2px 8px rgba(255, 220, 180, 0.04);`. The signature interaction is **ripple**: when the user clicks any tile, a ripple expands from the click point — a `::before` pseudo-element with `border-radius: 50%; transform: scale(0) → scale(40); opacity: 0.4 → 0;` over 1.4s `cubic-bezier(0, 0.55, 0.45, 1)`, in amber `#D4A574`. The now-playing tile hosts a permanent ambient ripple animation at 2.4s loop. The frequency band handle is draggable; dragging it changes which "station" is active by triggering a 600ms cross-fade of all tile contents. Avoid CTA stacks, pricing menus, signup walls, stat grids — this is a private broadcast room, not a product. The footer is the broadcast band itself, with one line of Garamond Italic beneath: "nanohana.stream — broadcasting from October, never on schedule." ## Uniqueness Notes - **Differentiator 1:** Bento-box layout dedicated to "stations" of one fictional radio — most bento designs in the registry serve product features; this serves narrative theater. - **Differentiator 2:** Multi-layer leather-texture surfaces (base + noise + radial + inset bronze) replicate vintage tooled-leather speaker furniture — a sensory-rich tactile surface almost no other design attempts. - **Differentiator 3:** Ripple pattern used both as click feedback AND as ambient now-playing visualization — dual-purpose narrative use of the pattern. - **Differentiator 4:** Single amber tube-glow accent against deep burgundy — restrained luxurious-light, not maximalist neon. - **Differentiator 5:** Frequency-band drag handle reframes "tuning" as page navigation — interactive radio metaphor in place of menu nav. - Planned seed: aesthetic=ethereal, layout=bento-box, typography=grotesque-neo, palette=deep-burgundy, patterns=ripple, imagery=leather-texture, motifs=vintage, tone=luxurious. - Avoids overused patterns flagged by frequency.sh: `playful` aesthetic (28%), `photography` imagery (89%), `corporate` aesthetic (24%) — none used here.