# Design Language for renai.stream ## Aesthetics and Tone renai.stream is **a 1937 transoceanic wireless love-letter station, rendered in art-deco gold leaf and lacquered black**. Picture a corner room in a Shanghai radio tower at 2 a.m.: a single brass microphone, a wall of illuminated valve dials, and an operator transcribing love letters that arrive in Morse from ships, embassies, and lonely hotels — then re-broadcasting them, one breath at a time, to anyone still awake. The site treats romance ("renai", 恋愛) not as a product but as **signal**: something that travels, decays, gets re-amplified, and occasionally arrives garbled in the most beautiful way. The aesthetic is **art-deco ornate luxury filtered through the warm static of a midnight broadcast** — sunburst fans, stepped ziggurat frames, and chevron inlays, all rendered in champagne gold and oxblood on a near-black lacquer ground, with a faint amplitude waveform always pulsing somewhere at the edge of the frame like a heartbeat held under glass. The tone is **opulent and grand, but intimate** — a velvet rope around a very small, very private feeling. Nothing shouts. The luxury is in the restraint: gilt hairlines instead of gilt slabs, one sunburst per viewport instead of a wall of them, type that arrives letter by letter as if keyed in by hand. The visitor should feel they have tuned, by accident, into a frequency that was meant for one person, and decided to keep listening. ## Layout Motifs and Structure The composition is **a vertical broadcast log** — a single tall column, max-width ~860px, centered in a vast black field, like a strip of telegram tape unspooling down a darkened studio wall. Underused in the batch (single-column at 16%, art-deco at 5%, immersive-scroll at 14%): this site claims the intersection — an immersive single-column scroll dressed in deco metalwork. - **The Console Frame.** The entire viewport is wrapped in a fixed art-deco border: a stepped-ziggurat corner motif (three nested right-angle steps in gold hairline) at each of the four corners, joined by thin double rules running the full edge. This frame never scrolls — content streams *behind* it, as if seen through the faceplate of a radio set. - **The Dial Rail (left).** A fixed vertical rail, ~64px wide, carrying a series of small illuminated "frequency" tick marks and a glowing amber bead that travels down as you scroll — a tuning indicator. Beside it, rotated 90°, a thin label: `RENAI · 恋愛 · 1937 kHz`. - **Transmission Blocks.** The column is divided into 6–8 "transmissions," each one a love letter or fragment. Each block opens with a **deco header plate**: a horizontal sunburst fan (a half-circle of gold rays) above a centered serif title and a monospace timestamp/callsign line (`TX 04 — RECEIVED 02:14 — ORIGIN: UNKNOWN`). Below: the letter body, set generously, with a single oxblood drop-cap inside a stepped frame. - **The Interference Gutters.** Between transmissions, narrow bands (~120px tall) of animated horizontal static — extremely subtle, gold-grey noise drifting sideways — that the next sunburst "burns through" as it enters. These are the seams; never a plain margin. - **The Sign-Off.** The final block is a closing card: the brass microphone rendered in flat deco linework, a sunburst behind it, and a single line — `END OF TRANSMISSION · STAND BY` — with the amber bead resting at the bottom of the dial rail. No CTA. No form. The frequency simply goes quiet. Vertical rhythm is metronomic: every header plate sits on an 8px baseline grid, every sunburst is the same radius, every timestamp the same size. The deco order is the discipline; the letters inside it are the warmth. ## Typography and Palette **Fonts (Google Fonts only — three voices, each with a job):** - **Display & header plates — *Poiret One* (400).** A genuine art-deco geometric display face: hairline strokes, perfect circles, the elongated elegance of 1920s cinema lobby cards. Used for transmission titles and the `renai.stream` wordmark, letter-spaced wide (0.12em–0.25em), often in champagne gold. At large sizes it reads as inlaid metalwork. - **Letter body & long-form — *Cormorant Garamond* (400 / 500 / italic).** The voice of the love letters themselves. A high-contrast, slightly fragile serif that feels handwritten-by-a-careful-person; set at 1.25rem, 1.7 line-height, with frequent italic passages for the most exposed lines. The drop-caps are Cormorant at ~5.5rem inside a gold stepped frame. - **Callsigns, timestamps, dial labels — *Space Mono* (400).** The machinery. All-caps, tracked +0.08em, small (0.72rem), in muted gold-grey. This is the only "tech" voice and it never enters the letter body — it lives on plates, the dial rail, and the interference bands. **Palette (deco gold-black luxury, warmed by broadcast amber):** - `#0B0A09` — **Lacquer Black.** The studio. The page ground, near-black with a whisper of brown so it never reads as cold OLED black. - `#1A1714` — **Walnut Shadow.** Recessed panels, the interference gutters' base tone, subtle layering behind transmission blocks. - `#D8B662` — **Champagne Gold.** Primary metal: hairline frames, sunbursts, the wordmark, Poiret One headers. Used as line and edge, rarely as fill. - `#8A6E2E` — **Tarnished Gold.** Secondary metal for the Space Mono machinery — present but dimmed, like brass that hasn't been polished since the war. - `#7C2A1E` — **Oxblood.** The single accent of feeling: drop-caps, the underline that draws beneath a hovered title, the heart of the amplitude waveform. Deep, wine-dark, never bright red. - `#E8B86D` — **Broadcast Amber.** The glowing tuning bead and dial ticks — the one light source that actually emits, faintly haloed. - `#EDE6D6` — **Telegram Ivory.** The letter body text — warm off-white, the colour of good stationery under a desk lamp. Contrast is built on metal-against-lacquer; the only "loud" move permitted is one oxblood mark per viewport. ## Imagery and Motifs **No photography. Every visual is hand-built SVG deco linework, gold-on-black, with one animated waveform layer.** - **The Sunburst Fan.** The signature motif: a half-circle of ~17 gold rays radiating from a point on the top edge of each header plate. Rays are hairline (1px), graduated in length (deco "rising sun"). It appears once per transmission, always the same size, and *animates in* by drawing ray-by-ray (path-draw-svg, staggered, 28ms apart) as the block enters. - **Stepped Ziggurat Frames.** Three-step nested right angles in gold hairline — used for the four viewport corners, the drop-cap enclosures, and the microphone base. The fundamental "container" shape; never a plain rectangle. - **Chevron & Zigzag Inlays.** Thin gold zigzag rules separating a title from its timestamp line — the deco "speed lines" of a 1930s travel poster, here standing in for transmitted signal. - **The Amplitude Waveform.** A single horizontal SVG path, oxblood with a faint amber glow, that runs along the bottom of the fixed console frame and *pulses* — its amplitude rising gently when the user scrolls or moves the cursor, settling to a slow breathing wave when idle. This is the only thing on the page that is alive at all times: the heartbeat of the signal. - **The Brass Microphone.** Drawn flat in deco linework — concentric circles, a stepped stand, two support arms — appearing only on the sign-off card, backed by a full sunburst. - **Interference Texture.** Gold-grey 1px noise dots drifting horizontally in the gutter bands at ~6px/s, opacity ~5%. The static between channels. Each sunburst "burns" a clean arc through it on entry. - **The Dial Ticks.** A column of short gold marks on the left rail, longer every fifth, with the amber bead sliding past them — a literal radio tuning scale. ## Prompts for Implementation Build this as **one immersive, full-screen, single-route broadcast** — a vertical scroll through 6–8 love-letter transmissions, framed inside a fixed art-deco radio faceplate. The visitor lands mid-broadcast; there is no homepage hero with a button, no nav menu, no pricing, no stat-grid, no "Get Started." The first viewport is the console frame, the dial rail with its amber bead at the top, a faint pulsing waveform along the bottom edge, and the first sunburst already half-drawn — and a single Space Mono line: `NOW RECEIVING · TX 01`. Scrolling is the only affordance and it *tunes the station*: the amber bead travels the dial rail, transmissions arrive. Engineering biases: - **Storytelling over UI.** Each transmission is a real, written fragment of a love letter (period voice, restrained, longing — never saccharine). The design is the envelope; the words are the point. Write 8 distinct short letters; vary origin callsigns and timestamps so the "log" feels like genuine intercepted traffic. - **Type that arrives.** Transmission bodies should reveal with a slow, even **typewriter-effect** (typewriter-effect at 14% — used here as literal telegraph keying), ~18ms/char, triggered when the block scrolls into view, with a thin oxblood cursor block that blinks then vanishes. Honour `prefers-reduced-motion`: snap to full text, no keying. - **SVG draw-in over canvas.** Sunbursts and chevrons animate via stroke-dashoffset path-draw, ray-by-ray, staggered. The waveform is a single animated path driven by `requestAnimationFrame` — amplitude eased toward a target set by scroll velocity + cursor movement, decaying to a 0.2Hz idle breath. - **The dial bead is the scroll progress.** Bind the amber bead's vertical position to scroll progress; give it a soft amber box-shadow halo that intensifies slightly while scrolling. Dial ticks it passes briefly brighten (border-animate / pulse-attention, ~200ms). - **Hover is gilt, not loud.** Hovering a transmission title draws an oxblood underline left-to-right (underline-draw); hovering the microphone on the sign-off makes its concentric circles ripple outward once. No tilt, no magnetic cursor, no parallax depth stacks — the only motion is signal motion (drawing, keying, pulsing, drifting static). - **Fixed frame, streaming content.** The four-corner ziggurat frame and the console double-rules are `position: fixed`; everything else scrolls behind them. On small screens the frame thins to single rules and the dial rail collapses to a slim 8px amber progress bar. - **AVOID:** CTA buttons, signup forms, pricing tables, stat counters, testimonial grids, card-grid layouts, glassmorphism panels, hand-drawn doodles, photography, gradient meshes. This is a single quiet column of gold linework and longing. ## Uniqueness Notes Differentiators from other sites in the batch: 1. **The radio-station-as-layout conceit.** No other site frames itself as a 1937 wireless love-letter broadcast: a fixed deco faceplate, a tuning dial bead bound to scroll, transmissions arriving by literal telegraph keying. The interaction *is* the metaphor — scrolling tunes a frequency. 2. **Art-deco rendered as line, not slab.** Where the rare deco sites lean on heavy gold blocks and fan-grids, this one is built almost entirely from 1px champagne hairlines on lacquer black — sunbursts, ziggurat corners, chevron inlays — with exactly one oxblood mark per viewport. Restraint as luxury. 3. **The always-alive waveform heartbeat.** A single oxblood-and-amber amplitude path that breathes when idle and swells with scroll/cursor energy — the only continuously animated element, doubling as the emotional pulse of the "signal." 4. **Period epistolary content.** Eight hand-written 1930s-voice love-letter fragments with intercepted-traffic callsigns and timestamps — content as worldbuilding, not filler. 5. **Chosen seed: "art-deco ornate luxury"** — pulled toward an underused corner of the frequency map (art-deco aesthetic 5%, single-column layout 16%, opulent-grand tone 4%, gold-black-luxury palette 2%, art-deco-display typography 4%). 6. **Avoided patterns from frequency analysis:** no card-grid (91%), no glassmorphism (82%), no hand-drawn imagery (95%), no photography (98%), no cursor-follow magnetic effects (89%), no parallax depth stacks (90%), no tilt-3d (30%), no warm-pastoral-romantic clichés — the romance here is moody, gilt, and broadcast through static.