# Design Language for yami.tube ## Aesthetics and Tone yami.tube is a **surreal candy-coated public-access channel** — a fever-dream television studio dressed in birthday-party colours, broadcasting from a basement no one quite remembers renting. "Yami" (闇 — darkness) is reframed here not as gloom, but as the half-lit hush right before a kids' show goes off the rails: bright magenta drapes, lemon-sherbet lighting rigs, a host who smiles too long at the wrong camera. The mood sits at the unstable seam where **Pee-wee's Playhouse meets a leaked rehearsal tape** — colours so saturated they buzz on a CRT, set pieces tilted three degrees off, and a faint mechanical hum that sounds suspiciously like a typewriter being struck very far away. Tone is **raw-authentic**: nothing is buttoned up, nothing is corporate. Edits are visible. Lavalier mics droop into frame. The "About" page is typed live, character by character, at a deliberately uneven cadence — backspaces and typos are not corrected, they are *kept*, because the channel does not pretend to be a product. It pretends to be a person who has been awake for thirty hours and finally has access to a transmitter. Surrealism comes not from CGI dragons but from the **wrong-thing-in-the-right-place**: a rotary phone where a search bar should be, a thumbnail grid that briefly becomes a swimming pool, a "Subscribe" word that periodically forgets one of its letters and waits patiently to remember. The voice writes in lowercase, in fragments, in second person: "you are now watching. you have always been watching. the host is gluing macaroni to a monitor." There is no irony shield — the warmth is sincere, the strangeness is sincere, the candy-bright palette is *not* a joke about kitsch, it is the actual love of bubblegum pink. Inspirations: the title cards of late-90s MTV bumpers; risograph zines printed in flat fluorescent inks; the colour-bar test pattern as comfort object; mid-century cereal-box mascots staring slightly past the camera; the way a VHS tape, paused, breathes a soft grain across the room. ## Layout Motifs and Structure **Strict single-column scroll** — the entire site is one vertical ribbon, viewport-width-locked, no sidebars, no asides, no "related videos" rail. Maximum content width is 640px on desktop, centred, breathing in 24px gutters of pure flat colour. The single column is a deliberate refusal of the platform-grid: this is a TV channel, not a marketplace. You watch what is on. You scroll to what is next. There is no algorithm parallax pulling at your peripheral vision. The column is segmented into **broadcast slots** — each slot is one full viewport-tall section announcing itself with an oversized geometric-sans slate ("SLOT 04 // 21:00 — DOG IN A SUIT EATS CAKE"), followed by the video plate, followed by typed-on-the-fly host commentary. Slots are separated by a 12px **retro test-pattern bar** running the full width: candy-bright vertical stripes (magenta / sherbet / mint / cream / sky / tangerine / hot-pink) like an SMPTE colour-bar reimagined as a children's gum wrapper. The bars are the only horizontal element; they punctuate, they do not decorate. Within each slot, composition follows a **typewriter-on-foolscap** rule: text begins flush-left at a fixed left margin (88px on desktop, 24px on mobile), advances character-by-character at a measured cadence (88ms per glyph for body, 140ms for headings), and the **caret stays visible** even after the line settles — a single 2px solid magenta block that blinks at exactly 530ms intervals, the same speed as an IBM Selectric. The caret is the cursor *and* the read-position-indicator: scroll resets it to the top of the next slot. There is no horizontal grid system because there is no horizontal — only the column, the margin, and the patient blink. Navigation, such as it is, lives in a **persistent bottom strip** 56px tall, sherbet-yellow, that runs full-width and contains four lowercase typewritten links (`channels`, `archive`, `host`, `tape`) separated by middle-dots. The strip does not float; it sits at the document's foot like a station ID card. To navigate is to scroll to the bottom and then click — the site refuses ambient-chrome conventions. A single **wandering motif** drifts down the right gutter: a small SVG of a 1972-era cartoon hand (four fingers, white glove, magenta cuff) that points at the current viewport-centred slot. It moves on scroll with a 220ms ease-out lag, never aligned, always slightly catching up. It is the only animated decorative element; everything else is the typing and the blink. ## Typography and Palette **Typography (Google Fonts only — verified):** - **Display / slate cards:** **Space Grotesk** (700, 500) — a geometric-sans with just enough warmth in the lowercase to feel like a hand-cut Letraset sheet. Set at `clamp(48px, 9vw, 132px)`, tracking `-0.015em`, all-lowercase, line-height 0.92. Used for slot titles ("slot 04 // dog in a suit eats cake") and the wordmark. - **Body / typed prose:** **DM Mono** (400, 500) — a friendlier monospace than Space Mono, with a softer "i" and a true-circle dot. Set at 16px/1.62 desktop, 15px/1.6 mobile, max-measure 56ch. The typewriter-effect is applied to this face exclusively; every paragraph types in. Letter-spacing `0.01em`. - **Slate accent / numerals:** **Space Grotesk** (700) at the slate level for slot numbers and broadcast times — set in tabular-nums with a leading zero ("04", "21:00") to enforce a station-clock feel. No third typeface. No serif. No script. The discipline is the point: a geometric sans for the architecture and a friendly mono for the voice — anything else would dilute the public-access conceit. **Palette — Candy-Bright (8 hex values):** - `#FF3FA4` — **Bubblegum Magenta** — primary accent; caret blink, hand-cuff motif, slot-number underline, link hover. - `#FFD23F` — **Sherbet Yellow** — bottom navigation strip background, secondary slate fill, "ON AIR" indicator dot. - `#5BE0B3` — **Mint-Soda Green** — third bar in the test-pattern, occasional slate panel, focus outlines. - `#7CC8FF` — **Sky-Slush Blue** — fourth bar, "next slot" preview chip, blockquote left-rule. - `#FF7A45` — **Tangerine Pop** — alert / new-broadcast badge, scroll-progress fill, hover state on the navigation strip. - `#FFF4E0` — **Cream-Paper** — page background; the candy floats on this off-white, never on pure `#FFFFFF`. - `#1A0E1F` — **Inkwell Plum** — body text, typewriter glyphs, slate type. Not black — a near-black with a magenta whisper that softens the contrast against cream. - `#3A1C2C` — **Velvet-Dust Mulberry** — secondary text, captions, slate sub-labels, the cartoon-hand glove shadow. The palette is **deliberately maxed-saturation on cream** — never on white, never on grey. Cream warms the candy so the page reads as printed risograph rather than HD screen. Pure black is forbidden; pure white is forbidden. ## Imagery and Motifs - **Retro test-pattern bars** (primary): 12px-tall candy-stripe bars between every slot — seven flat-colour vertical bands repeating across the full viewport width, in fixed sequence: magenta / sherbet / mint / cream / sky / tangerine / mulberry. Pure SVG, zero gradients. They are the heartbeat of the page; remove them and the rhythm collapses. - **Cartoon glove-hand pointer**: a single 64px SVG illustration — four-fingered, white-gloved, magenta-cuffed, index finger extended — that drifts down the right gutter following scroll with a 220ms lag. The hand's joints have visible black hairline outlines (1.5px stroke), echoing a 1972 Saturday-morning cereal-box mascot. It is the *only* figurative illustration on the site. - **Retro-patterns library**: a small SVG kit of mid-century geometric loops — checkerboards (8px), starbursts (12-point, mulberry on cream), atomic boomerangs, harlequin diamonds, half-circles in opposed colours. Used **only** as inset panels behind slot numbers, never as full backgrounds. Each retro-pattern is keyed to a slot type (e.g. checkerboard = archive, starburst = live, boomerang = host monologue). - **Typewriter cursor as motif**: the 2px solid magenta caret is treated as an *icon* — it appears in the favicon, in the wordmark, at the end of every link as a tiny inline blink. It is the channel's logo by repetition. - **Grain-overlay**: a hand-drawn 600x600px noise SVG (low-frequency, two-tone — mulberry speckle on transparent) tiled across the entire viewport at 14% opacity, fixed-position, `mix-blend-mode: multiply`. The grain does not move on scroll; the page slides under it. Effect: every flat candy colour is gently dirtied, as if the site were printed on coarse newsprint and held up to a desk lamp. The grain is the photograph of the page; without it the candy reads digital, with it the candy reads risograph. - **Slot slates**: each slot opens with a two-line slate — slot number in `Space Grotesk 700` 132px, slot title in `Space Grotesk 500` 36px, both lowercase, both flush-left, set against a flat candy panel (rotating through the palette). The slate is the "cue card" the host holds up before each segment. - **No photographs as decoration.** Video thumbnails are present (they are the *content* of the channel) but rendered with a 6px cream border and a 4px mulberry drop-stroke offset bottom-right (no blur, no shadow — a printed-comic-panel offset). They sit inside the column, never overflow it. - **No icons from icon libraries.** Every glyph is hand-drawn SVG, single-colour, 1.5px stroke, with the deliberate geometry of a 1960s public-television station logo. ## Interaction Patterns - **Typewriter-effect everywhere readable**: every block of body text types in, character by character, at 88ms per glyph, when its parent slot enters the viewport (`IntersectionObserver`, threshold 0.4). The caret is visible during type-in and remains parked at line-end after settling, blinking at 530ms. Re-entering a slot does **not** retype — the type-in is a one-shot greeting, and the prose stays settled on subsequent passes. Reduced-motion users get the prose pre-typed with the caret skipped. - **Backspace-and-correct events**: scattered across the site (about 1 per slot) are deliberate "typo + backspace + retype" sequences in the typed prose — e.g. the word `broadcsat` is typed, paused 240ms, three glyphs are backspaced, and `cast` is typed. These are scripted, deterministic, and convey the raw-authentic voice. Not random — choreographed. - **Caret-anchored scroll**: when the user scrolls, the magenta caret moves to the next slot's first character with a 280ms ease-in-out, drawing a 2px magenta vertical line as it travels. The line fades after arrival. This makes the caret the navigation, not just the cursor. - **Link hover**: lowercase typewritten links underline themselves character-by-character, left to right, at 22ms per glyph. The underline is 2px solid magenta. Un-hover unwinds the underline right-to-left at the same cadence. - **Test-pattern bar transitions**: between slots, the bar plays a 320ms "channel-flip" — bands shift one position to the right with a 1-frame mulberry flash between, mimicking an analog channel change. Triggered on slot-enter, not on scroll-direction. - **Cartoon-hand pointer**: drifts continuously with the scroll-locked 220ms ease-out lag described above. On hover over a slot, the index finger gives a single 90ms pulse-extend (4px forward, 4px back), as if jabbing at the slot for emphasis. No other hover state on the hand. - **Bottom navigation strip**: each link, on hover, swaps its sherbet-yellow background for tangerine for 180ms, then settles. On click, the strip plays a 220ms "tape-load" — a 1px magenta line sweeps left-to-right across the strip while the next page typewriter-types in. - **No modals. No tooltips. No carousels.** Anything that cannot be expressed as a typed line in the column is not on the site. ## Prompts for Implementation - Treat the page as a **broadcast schedule, not a feed**. Slots are sequential, time-stamped, single-file. The visitor is a viewer, not a user. - The typewriter-effect is the spine of the experience — implement it with `IntersectionObserver` + a single shared cadence variable (`--type-step: 88ms`). Do not let the typed prose feel like a gimmick: it must feel like the *channel writing to you in real time*. - The grain-overlay must be present from first paint, full-viewport, fixed, `mix-blend-mode: multiply`, 14% opacity, never animated, never disabled. It is the texture that makes the candy palette legible. - The seven test-pattern bands must be in the exact stated order — do not let them shuffle. The order is the channel's signature. - All typography is lowercase. Capital letters appear only in the slot-number numerals (which use tabular-nums in `Space Grotesk 700`) and in the SMPTE-style indicator dots (`ON AIR` is rendered as a sherbet dot, not as text). - All imagery is flat SVG, no gradients, no shadows except the 4px mulberry drop-stroke offset. No photographic textures except the grain noise. - Refuse anything that smells of "platform UI": no thumbs-up, no infinite scroll, no comment threads, no sidebars, no "related videos", no algorithmic recommendations. The channel decides what plays next. - AVOID: dark-mode toggles, glassmorphism, parallax sections, hero CTAs, pricing tiers, stat-grids, testimonial blocks, social-proof bars, customer-logo strips, "Trusted by" sections, kanban grids, masonry grids, hexagonal tiling, video backgrounds. - Bias toward narrative slowness: each slot rewards stopping. The typewriter is slow on purpose. The hand-pointer lags on purpose. The bottom nav requires scroll-to-reach on purpose. ## Uniqueness Notes 1. **Typewriter-effect as the universal text-render path** — every block of prose on the site types in at a deterministic cadence with scripted typos and backspaces, treating `

` as a live broadcast rather than a static element. This is rare on the site corpus (typewriter-effect sits low-single-digit in frequency). 2. **Single-column broadcast-slot architecture** — no grid, no cards, no rails; one viewport-locked column of time-stamped slots punctuated by 12px candy-stripe SMPTE bars. A deliberate refusal of the platform-feed convention that nearly every "tube" site adopts. 3. **Candy-bright palette on cream, never white, never black** — `#FF3FA4`, `#FFD23F`, `#5BE0B3`, `#7CC8FF`, `#FF7A45` floating on `#FFF4E0` with `#1A0E1F` plum-ink type, dirtied uniformly by a 14%-opacity grain-overlay tiled at the viewport. Candy-bright is in the underused palette band; this design commits to it without compromise. 4. **Grain-overlay as constant, fixed, blending texture** — a 600x600 hand-drawn noise SVG tiled and multiplied across the entire page at all times, making every flat colour read as risograph print rather than HD screen. Grain-overlay sits at 0% in current frequency analysis; this design centres it. 5. **Cartoon glove-hand pointer as the only figurative illustration** — a 64px four-finger white-gloved magenta-cuffed hand drifting down the right gutter on scroll-lag, jab-pulsing on slot hover. A single mascot, no icon library, no stock illustration. 6. **Retro-patterns as slot-type semantics** — checkerboards / starbursts / boomerangs / harlequin diamonds keyed to slot categories (archive / live / monologue / interlude), turning decorative pattern into structural metadata. **Chosen seed:** aesthetic: `surreal`, layout: `single-column`, typography: `geometric-sans`, palette: `candy-bright`, patterns: `typewriter-effect`, imagery: `grain-overlay`, motifs: `retro-patterns`, tone: `raw-authentic`. **Avoided patterns from frequency analysis:** playful-overdraw (70%), warm-palette default (84%), gradient backgrounds (60%), mono-only typography (79%), mysterious-moody tone (26%), corporate aesthetic (21%), glassmorphism (18%), card-grid layouts, hexagonal-honeycomb structures, parallax-sections, z-pattern layouts, hero-CTA blocks, pricing tiers, dark-mode (30%), bento-box grids.