# Design Language for yami.tube ## Aesthetics and Tone yami.tube — *yami* (闇), "the dark" — is staged as a **surreal nocturnal broadcast: a video portal that exists only after midnight, transmitting from somewhere underneath sleep.** The conceit is a "dark channel" that you do not browse so much as *descend into* — a slow free-fall through warm black water where past broadcasts drift up toward you as soft luminous bodies, like deep-sea creatures lit from within, or memories surfacing in a half-dream. Nothing here is rectangular-screen-and-grid; the "tube" is reimagined as a **column of dark liquid light** running floor-to-ceiling, and clips bloom along it the way bioluminescence blooms in disturbed water. The mood is **mysterious-moody braided with dreamy-ethereal** — hushed, intimate, slightly unreal, never sinister. Think: the René Magritte *Empire of Light* paradox (a deep-night sky over a bright lamp) collapsed into a media player; Bill Viola's slow underwater video pieces; the warm static-hum of an old CRT left on in a dark room; the specific tenderness of watching something alone at 3 a.m. The dark is *generous*, a velvet that holds the light rather than swallowing it. Every glow is warm-leaning (amber, ember, faint rose), so the black never reads cold or corporate — it reads like a candle-lit room with the curtains drawn. Restraint is the rule: long pauses, slow reveals, very little chrome. The page breathes in the dark and exhales light only where your attention falls. ## Layout Motifs and Structure **Primary layout: immersive-scroll (~16% of siblings) fused with layered-depth (~14%)** — explicitly *not* card-grid (93%), *not* centered hero-dominant. The site is one continuous vertical descent, ~6 "depths," with parallax z-layers so foreground glimmers, the light-column, and the far-dark drift at different speeds — you feel volume, like sinking. - **The Light Column ("導管 / the conduit"):** a single vertical band, `min(46vw, 560px)` wide, running the full scroll height, slightly off the geometric center (golden-ratio left, ~38vw) so the composition is asymmetric and unstill. It is a soft-edged gradient of near-black to dim ember, with faint internal caustics (slowly drifting light-ripples). Clips do not sit *in* cards — they **bloom along the column's edge**, alternating left and right, each one a rounded organic blob of footage (border-radius like `42% 58% 60% 40% / 50% 45% 55% 50%`, very slowly morphing) haloed in warm light, tethered to the column by a thin luminous filament. - **Depths, not sections:** Depth 0 = the surface (title, the dark just beginning); Depths 1–4 = broadcast strata (each a loose, asymmetric scatter of 2–4 clip-blooms at varying scales and blur — nearer ones sharp and bright, farther ones small, dim, defocused); Depth 5 = the floor (a quiet, near-still resting place — the closing text, the conduit fading to a single point of light). - **Negative space is the subject.** 70–80% of every viewport is intentional dark. Content is sparse, off-grid, never aligned to a tidy column except the conduit itself. - **Minimal navigation:** no top bar. A faint depth-gauge — a thin vertical tick scale fixed to the right margin, glowing only the current tick — marks how deep you've sunk. That's the entire nav. - Mobile: the conduit narrows and re-centers; blooms stack in a single drifting line; parallax reduces to two layers; the descent metaphor holds. ## Typography and Palette **Typefaces — Google Fonts only, verified available:** - **Fraunces** — primary display / "broadcast title" face. Used at the soft "opsz" high-optical-size end, light-to-regular weight, with its gentle wonky serifs and slightly melted curves it reads *dreamlike and warm*, not sterile editorial. The domain mark `yami.tube` set `clamp(2.8rem, 8vw, 6.4rem)`, weight 300, letter-spacing `0.04em`, color a dim warm white with a slow-breathing text-shadow bloom in ember. Depth titles ("第一層 / first stratum", "broadcasts that surfaced") in Fraunces italic, weight 400, smaller, low-opacity. - **Spectral** — body / caption face. A serif designed for screens with calm, even color and good low-contrast legibility on dark backgrounds; used for clip captions, the short narration lines between depths, the closing text. Weight 300–400, generous `line-height: 1.85`, `letter-spacing: 0.01em`, color `#C9BFB4` at ~78% opacity so it glows softly rather than shouts. - **JetBrains Mono** — used *sparingly* (timestamps, the depth-gauge numerals, the tiny "REC ●" / runtime ticks) for a faint analog-broadcast residue. Tiny size (`0.7rem`), `letter-spacing: 0.18em`, uppercase, ~40% opacity, warm grey. **Palette — "warm black water," a dark warm-leaning scheme (counter to the 98%-warm/92%-gradient norm by being *near-monochrome dark*, which is only ~16% + ~10%):** - `#0A0705` — *abyssal* — the base black, faintly brown-warm, never pure #000. - `#16100B` — *silt* — secondary dark, for the far parallax layer and panel fills. - `#241A12` — *ember-shadow* — the conduit's mid-gradient and bloom-halo outer edge. - `#E8862D` — *ember* — the core warm accent: filaments, the breathing glow, active depth-tick. Used at low alpha as light, never as a flat fill. - `#F2C56A` — *lamplight* — the hottest highlight, the bright point at the conduit's base, specular glints on blooms. - `#C9BFB4` — *moth-grey* — warm off-white for body text and dim UI. - `#7A5C82` — *bruised-violet* — a single cool counter-tone used *only* in the deepest stratum (Depth 4) as a faint distance-haze, the one place the dark turns slightly strange and cold-blue-purple before warming back at the floor. Gradients are radial light-blooms (`radial-gradient` from `#F2C56A` → `#E8862D` → transparent) over flat darks — not the ubiquitous diagonal hero-gradient. ## Imagery and Motifs - **Bioluminescent blooms** as the core motif (a fresh combination — *organic-blobs* imagery at ~5% paired with warm dark): every clip is a soft, slowly morphing blob of footage glowing from inside, like a deep-sea jelly or a lantern seen through water. Outer halo, inner specular, gentle pulse. - **The conduit / column of dark light:** the literal "tube" — a vertical liquid channel with drifting caustic ripples, the visual spine of the whole page. - **Filaments:** thin, faintly glowing tethers connecting each bloom to the conduit — they sway slightly, draw themselves in on reveal, dim when a bloom is "watched." - **Floating particulate:** sparse, slow motes — like dust in a projector beam or plankton in dark water — drifting upward at parallax depth, denser near light sources. Never busy; a handful per viewport. - **CRT-residue grain:** an extremely subtle animated film/static grain overlay (very low opacity, warm-tinted) — the ghost of an old monitor left on in the dark. Plus a faint scanline shimmer *only* on the conduit. - **Magritte paradox accent:** in Depth 5, a single small bright "daylight" rectangle — a perfect clean light panel — floats in the deep dark, the one un-blobby, un-glowing-from-need shape, quietly surreal. - **Iconography:** hand-drawn-thin single-stroke glyphs (a crescent, a closed eye, a single ripple ring, "●" rec dot) — never filled, always faint-ember outline. ## Prompts for Implementation Build yami.tube as **one long single-page immersive descent** — no routes, no SPA framework needed; semantic `
` blocks, a fixed `.conduit` element, and scroll-progress-driven CSS variables (`--descent: 0→1`) plus IntersectionObserver for per-depth reveals. Lean, mostly CSS; JS only for scroll-mapping, parallax transforms, cursor proximity, and the depth-gauge. - **The dark is the canvas — protect it.** `background: #0A0705`. Light is additive only: `radial-gradient` blooms, `box-shadow` halos, `filter: blur()` for distance, `mix-blend-mode: screen` on glow layers so warm lights stack believably over the black. Never a flat bright panel except the Magritte rectangle. - **The conduit:** a `position: fixed`, full-height, ~46vw band; inner caustics = 2–3 stacked large soft radial-gradients drifting via slow `@keyframes` (translate + scale, 20–40s loops); a faint repeating-linear scanline at very low opacity. Its base anchors a single bright `#F2C56A` point that brightens as `--descent` → 1. - **Blooms:** each clip = a `
` with animated `border-radius` (slow morph keyframes), `box-shadow` warm halo, a `::before` specular highlight, a tiny pulsing scale (`±1.5%`, 4–6s, eased). On hover/proximity it brightens, the filament thins, the caption fades up. The footage itself can be a looping muted video or a Ken-Burns-drifting still under a warm `color` overlay. - **Parallax & descent:** map `scrollY` to z-layer translateY at 0.3 / 0.6 / 1.0 / 1.4 speeds (far→near). Particulate drifts opposite scroll. As you descend, ambient light slowly *increases* (the floor is the brightest place) — the journey is darkness-toward-warmth, a quiet emotional arc, not a sales funnel. - **Reveals:** depths fade-reveal + filaments path-draw-svg as they enter; staggered bloom appearance (each delayed ~120ms), spring-eased scale-in from 0.9. Slow everything down — durations 0.8–1.6s, generous easing. Pauses are content. - **Cursor:** a soft warm radial light follows the pointer at low opacity (`mix-blend-mode: screen`), as if you're holding a small lamp — blooms near it brighten subtly. Disable on touch. - **Motion sanity:** honor `prefers-reduced-motion` — freeze caustics, particulate, pulses; keep static glow and instant reveals. - **Copy tone:** sparse, second-person, nocturnal-intimate ("you've been awake too long", "this one surfaced once and sank again", "the floor is warmer than you'd think"). Lowercase, lots of air. Japanese stratum labels (第一層…第五層) as quiet texture beside English. - **AVOID:** CTA-heavy layouts, sign-up walls, pricing blocks, stat-grids, testimonial rows, feature card-grids, big diagonal hero gradients, any "modern SaaS" chrome. There is no funnel here — only a descent. ## Uniqueness Notes 1. **Anti-grid by construction:** the entire layout rejects the catalogue's 93% card-grid / 79% centered / 16% hero-dominant defaults — content blooms organically along an off-center liquid column with z-depth parallax. No rectangles for clips, no rows, no aligned hero. 2. **A near-monochrome *warm-dark* palette as the whole identity** — pushing against the 98%-warm + 92%-diagonal-gradient sea by being almost entirely `#0A0705` black with additive ember light. Glassmorphism (85% of siblings) is completely absent; the visual language is bioluminescence + CRT-residue, not frosted panels. 3. **The descent *is* a reverse-darkness arc:** scrolling deeper makes the page *brighter and warmer*, ending on a tiny Magritte-paradox daylight rectangle in the deep dark. The structure carries a feeling (3 a.m. loneliness → quiet warmth) instead of carrying conversions — no other sibling site uses scroll-depth as an emotional thermocline. 4. **"Tube" reinterpreted literally and weirdly** — not a video-grid, not a player chrome, but a column of dark liquid light with clips as luminous deep-sea bodies tethered by swaying filaments. Surreal-dreamscape aesthetic (~8%) + organic-blobs imagery (~5%) is a near-unused pairing in the catalogue. 5. **Chosen seed/style:** `surreal dreamscape promo` — expressed as `aesthetic: surreal, layout: immersive-scroll (+layered-depth), typography: serif-revival (Fraunces/Spectral) with a faint tech-mono residue, palette: monochrome warm-dark (abyssal black + ember/lamplight), patterns: parallax + fade-reveal + path-draw-svg + cursor-follow + spring, imagery: organic-blobs (bioluminescent) + grain-overlay, motifs: floating-elements + candle-atmospheric (warm glow in the dark), tone: mysterious-moody → dreamy-ethereal`. 6. **Avoided per frequency analysis:** card-grid, centered hero-dominant, glassmorphism, hand-drawn aesthetic, diagonal warm hero-gradients, dashboard/bento layouts, CTA/pricing/stat-grid blocks — every dominant pattern in the 684-file catalogue is deliberately sidestepped.