# Design Language for yome.tube ## Aesthetics and Tone yome.tube is presented as **a dream broadcast that only airs at 3:47 a.m.** — a fictional analog television channel that transmits the soft, looping daydreams of a person waiting for someone to come home. "Yome" (嫁 — *bride / the one who comes into the household*) is treated not as a person but as a recurring **signal**: a warm shape that keeps almost-arriving on screen. The aesthetic is **surreal dreamscape rendered as decayed cathode-ray television** — phosphor bloom, horizontal hold drift, vertical roll, color-bleed fringing, the gentle hum of a tube warming up — but the *content* inside the tube is impossible: a kettle that pours light, a doorway standing alone in a wheat field, a staircase that loops back into a kitchen, hands setting a table for one that becomes a table for two between blinks. Tone is **dreamy-ethereal crossed with a quiet domestic ache** — tender, slightly uncanny, never spooky; the warmth of late-night static, the patience of a left-on porch lamp. Nothing here sells anything. The site simply *broadcasts*, and the visitor is the only one awake to watch. Mood references: late-period analog PAL test cards melting at signoff, the inside of a closed eyelid lit by a TV, ukiyo-e domestic interiors reflected on a curved glass screen, the held breath of `ma` (間) between two frames. ## Layout Motifs and Structure The entire site is **one curved screen** — a single full-viewport CRT bezel (rounded corners pulled in ~3% on each axis, faint convex distortion at the edges via radial transform) that never scrolls in the conventional sense. Instead, **content arrives as "channels": six dream-segments that the viewer tunes through**, each segment occupying the full screen and transitioning via a vertical-roll wipe (the picture rolls up off the top while the next rolls in from the bottom, with one frame of pure rainbow-noise between). Navigation is a **single vertical "tuning column" pinned to the right inner edge of the bezel** — not dots, not a menu, but a slim luminous slider that the viewer drags (or scroll-nudges) like an old channel dial; the channel number (a glowing seven-segment numeral, `01`–`06`) sits at the dial's thumb. There is **no top nav, no logo lockup, no hamburger, no footer, no breadcrumb**. Composition inside each channel is deliberately **off-center and `ma`-heavy** — the surreal object sits in the lower-left third, a thin caption-line in the bottom margin like a closed-caption track, and the upper two-thirds left as breathing phosphor-glow. A persistent **station-ident watermark** ("YOME · ch.灯" — *light/lamp*) ghosts faintly in the top-right safe-area, the way real broadcasters logo-bug their output. Between channels, an **interstitial "signoff" panel** can appear: a slow-collapsing white horizontal line shrinking to a single dot, then re-blooming — a deliberate breath, not a loading screen. ## Typography and Palette **Type system (Google Fonts only):** - **Display / channel titles — `Yeseva One`** (high-contrast didone-ish serif, weight 400): used at large sizes for the segment titles ("THE KETTLE THAT POURS LIGHT", "A DOOR IN THE WHEAT"). Its thin hairlines bloom beautifully under the simulated phosphor glow — letters look *lit from behind glass*. Tracked tight (`-0.01em`), occasionally given a 1px chromatic-aberration shadow (cyan left / red right). - **Body / captions — `Zilla Slab`** (slab serif, weights 300 & 400): the warm, slightly mechanical voice for the closed-caption lines and the few prose passages. Slab serifs read like teletext subtitles; set at generous `line-height: 1.85`, `letter-spacing: 0.02em`, soft-white on dark. - **Numerals / station ident — `DSEG7 Classic`** is NOT on Google Fonts, so instead use **`Doto`** (a true Google Fonts dot-matrix display face) for the channel numbers, the 3:47 clock, and the "YOME · ch.灯" bug — it gives the genuine seven-segment / LED-grid texture without faking it. - Japanese accent glyphs (灯, 嫁, 待) rendered in **`Shippori Mincho`** (Google Fonts) at small sizes, with the same hairline-bloom treatment. **Palette — "dream broadcast at 3:47 a.m." (warm-but-nocturnal, NOT the default sunny warm):** - `#0B0A12` — *tube black* (the screen at rest, deep aubergine-black, never pure #000) - `#1A1426` — *bezel plum* (the casing and outer vignette) - `#F4E8D0` — *phosphor cream* (primary "lit" text / warm picture areas — the glow color) - `#E8A86B` — *porch-lamp amber* (the recurring "yome signal" shape; the dial's active glow) - `#7FD4D0` — *cathode mint* (cool fringe, the cyan side of chromatic bleed, interstitial line) - `#C7567E` — *signoff rose* (the magenta side of color-bleed; rare emphasis on a single word) - `#3B3450` — *static grey-violet* (mid-tones, caption-track bar, inactive UI) - Plus a procedural **rainbow-noise** band (full-spectrum 1px scanline jitter) used ONLY in the single transition frame. ## Imagery and Motifs **Six dream-segments, each a single SVG/CSS surreal vignette (no photography):** 1. **ch.01 — The Kettle That Pours Light.** A line-drawn kettle (cathode-mint stroke, 1.5px) tipped mid-pour; instead of water, a soft amber gradient *fans downward into a pool that ripples in concentric phosphor rings*. Steam rises as three thin SVG paths that path-draw on entry. 2. **ch.02 — A Door in the Wheat.** A single doorframe (no walls) standing in a low horizon of hand-coded wheat strokes (hundreds of 1px lines, each given a slow `rotate` sway via CSS). The door is ajar; warm light leaks from the gap as an animated wedge. 3. **ch.03 — The Staircase Kitchen.** An Escher-soft staircase rendered in flat 2.5-tone shading that climbs up and folds back into a small kitchen counter at the top — drawn as one continuous SVG path, traced on scroll-tune. 4. **ch.04 — Table for One → Two.** A table set with one bowl; on a slow loop the bowl's reflection *splits into a second place setting* and merges back — the only literal nod to "yome". Rendered as layered SVG with a CSS keyframe morph between two path states. 5. **ch.05 — The Porch Lamp.** A lone amber lamp on a post, its glow pulsing at the rhythm of slow breathing; moths (tiny SVG triangles) orbit on elliptical paths. This is the "this site is the lamp left on for you" beat. 6. **ch.06 — Signoff.** The kettle, door, staircase, table and lamp all *shrink toward the screen center* and collapse into the single white horizontal line of analog signoff, which then narrows to a dot and holds, humming. The 3:47 clock ticks to 3:48 and the channel quietly says *また* (mata — "again / see you"). **Constant CRT motifs across all channels:** a fixed 1px scanline overlay (very low opacity, slight vertical drift), phosphor bloom (radial blur-glow behind all light-colored shapes), occasional 2-frame horizontal-hold *jitter* on hover near interactive elements, a soft convex screen-edge vignette, faint flicker on the station bug, and a barely-audible (optional, muted by default) 60Hz hum + tape-hiss bed. ## Prompts for Implementation Build yome.tube as **one HTML page, one CSS file, one ES module** — no framework, no build step, no service worker. The whole document lives *inside a CRT*: wrap everything in a `.tube` element with rounded corners, an inset box-shadow vignette, a subtle `transform: perspective()` convex bow, and a pseudo-element `.scanlines` layer (`repeating-linear-gradient` at 2px, ~6% opacity, animated `background-position-y` over ~8s). Add a second pseudo-element for **phosphor bloom**: a large soft radial gradient that follows the brightest current shape (compute its bounding box in JS, no per-pixel work). **Storytelling structure — six channels, tuned not scrolled:** - State is `currentChannel` (0–5). The right-edge **tuning dial** is the primary control: a draggable thumb (pointer events) plus `wheel` events that nudge between channels with a little **elastic** overshoot, plus `↑/↓` and `1`–`6` keys. The dial thumb carries a `Doto` seven-segment channel number that **counter-animates** (rolls like an odometer) on change. - Channel transitions = **vertical-roll wipe**: outgoing channel `translateY(-100%)` while incoming comes from `translateY(100%)`, and for exactly one ~120ms frame in the middle, show the **rainbow-noise band** + a horizontal-hold horizontal-shift glitch on both layers. Respect `prefers-reduced-motion` by replacing the roll with a 250ms cross-dissolve and dropping the noise frame. - Each channel's surreal vignette **path-draws** its key SVG strokes on entry (stroke-dasharray reveal, eased, staggered per element), then settles into a slow ambient loop (the kettle pool ripples, the wheat sways, the lamp breathes, the table splits/merges, the staircase shimmers). Use CSS keyframes + a single rAF loop only for the bloom-follow and the wheat sway randomization. - The **closed-caption line** at the bottom margin types in with a soft per-character fade (not a hard typewriter) and stays; clicking it could reveal one extra line of dreamlike prose via a gentle `blur-focus` reveal. - **ch.05** (porch lamp) holds longer and dims the bezel slightly — the site's emotional center: "we left a light on." **ch.06** is the signoff: everything collapses to the white line → dot → hum, the clock ticks 3:47 → 3:48, *また* fades up, and the dial gently returns to ch.01 if the viewer waits — the broadcast loops, eternally almost-arriving. - Micro-details: the station bug flickers ~every 11s; hovering interactive elements triggers a 2-frame horizontal-hold jitter; the cursor near the dial gets a faint mint phosphor trail (CSS only, short). **AVOID:** no CTA buttons, no pricing tiers, no stat counters, no testimonials, no email capture, no contact form, no FAQ accordion, no logo wall, no newsletter, no cookie banner, no card grid, no hero-with-buttons. The visitor's only "action" is to keep tuning, or to stop and watch the lamp. ## Uniqueness Notes - **Differentiator 1 — "tuning" replaces "scrolling":** navigation is a draggable CRT channel dial with an elastic odometer numeral, and content arrives via authentic vertical-roll TV wipes with a one-frame rainbow-noise interstitial — not a card grid, not parallax sections, not the near-universal cursor-follow/parallax/spring stack. - **Differentiator 2 — the whole page is rendered as a decayed cathode-ray tube** (convex bow, scanline drift, phosphor bloom that tracks the brightest shape, horizontal-hold jitter, color-bleed chromatic aberration, 60Hz hum bed) — a sustained analog-video simulation rather than the prevalent glassmorphism/hand-drawn looks. - **Differentiator 3 — emotionally specific surreal narrative:** "yome" is reinterpreted as a recurring *signal* (a lamp left on, a table that sets a second place between blinks) across six impossible dream-segments ending in an analog signoff that loops — a quiet domestic-ache story, not a product or portfolio. - **Differentiator 4 — palette & type defy the corpus defaults:** a nocturnal *aubergine-black + phosphor-cream + porch-lamp amber + cathode-mint + signoff-rose* scheme (deliberately NOT the 98%-common "warm sunny" palette), with `Yeseva One` hairline didone + `Zilla Slab` captions + `Doto` dot-matrix numerals — no `mono` body face, no `Inter`, no glassmorphic card stack. - **Chosen seed/style:** `surreal dreamscape promo` — aesthetic: surreal (9%, underused) + cinematic/retro CRT treatment; layout: minimal-navigation + ma-negative-space + immersive-scroll reinterpreted as channel-tuning; typography: elegant-serif + slab-serif + retro-display dot-matrix; palette: midnight-blue-adjacent nocturnal + duotone color-bleed; patterns: elastic + path-draw-svg + counter-animate + blur-focus; imagery: line-illustration + generative-art (noise band) + custom vector vignettes; motifs: candle-atmospheric (the lamp) + retro-patterns (scanlines) + flowing-curves; tone: dreamy-ethereal + mysterious-moody. - **Avoided overused patterns (per frequency analysis):** no glassmorphism (86%), no hand-drawn aesthetic (94%), no card-grid (93%), no full-bleed-as-section-stack (84%), no cursor-follow-heavy (89%), no parallax (87%), no spring-physics-everywhere (83%), no magnetic buttons (76%), no photography (97%), no mono typography (93%), no warm-sunny palette (98%).