# Design Language for yami.tube ## Aesthetics and Tone yami.tube (v2) is a **Generative Aurora Lecture Hall** -- a split-screen scholarly broadcast in which a left-hand chalkboard of generative geometric abstractions reasons through a right-hand annotated transcript, all bathed in slow-moving aurora-light. The aesthetic is **generative**: every visual on the left half is procedurally drawn -- voronoi cell tessellations, Lissajous figures, recursive triangle-meshes, code-art line studies -- redrawn at slow intervals so the page never looks the same twice. The .tube suffix is read as the old "cathode tube" or "broadcasting tube" -- a public scholarly lecture transmitted from a quiet observatory. The tone is **scholarly-intellectual**: this is a generative-art research broadcast, not a club visual. The right-hand transcript reads like a transcribed lecture, with timestamps, footnotes, and quoted sources, set in sans-grotesk for clarity. The left-hand generative canvas is composed in restrained duotone (deep indigo and aurora-green), with occasional aurora-magenta flickers like distant polar lights. Slide-reveal patterns govern the page's progression -- every section enters as a fresh "slide" pushed in from the right, transcript first. The narrative spine: a single broadcast in seven slides. Each slide is one generative diagram on the left and one passage of lecture transcript on the right. The aurora-lights motif breathes across the whole canvas as the visitor scrolls -- a soft animated polar curtain spanning the document's top edge. The geometric-abstract imagery on the left is mathematically generated (or visibly looks so), with thin lines, dense lattices, and procedural fields that hold the same chromatic restraint as the typography. ## Layout Motifs and Structure The composition is a **split-screen** layout -- 50/50 left/right on desktop, with the left half holding the generative canvas (full-bleed, top to bottom) and the right half holding the transcript (centered column, max-width 540px, generous padding). On tablet the split becomes 60/40 in favor of transcript; on mobile, the split collapses to stacked sections (canvas above, transcript below) per slide. **Macro structure:** - **Threshold (Section 0, 100vh):** A full-width aurora-light curtain sweeping across the top 30vh of the screen, with the wordmark "yami.tube" set in sans-grotesk at center-top (small, 28px, letter-spacing 0.4em uppercase). Below it, a single line in italic: "*a generative broadcast in seven slides*." The split appears here as the lower 70vh: left holds a generative voronoi-tessellation drawing itself line by line; right holds the transcript: "Slide 1 will begin in 4 seconds." - **Seven Slides (Sections 1-7, 110vh each):** Each slide is a strict split: - **Left canvas (generative drawing):** A single algorithmic composition -- voronoi tessellation, Lissajous curve study, recursive triangle mesh, code-art line study, procedural lattice, particle vector field, polar coordinate plot. Each canvas takes 4-6 seconds to draw itself in via SVG stroke-dashoffset, then holds still. - **Right transcript (scholarly text):** A lecture passage in sans-grotesk, with a timestamp ("[00:04:18]"), 3-5 paragraphs of body, occasional bracketed footnote markers, and one bold pull-quote that visually echoes the canvas opposite. - **Aurora Bridge (Section 8, 60vh):** A 60-vh interlude with no transcript -- only the full-width aurora-light curtain, now intensified, sweeping slowly across the screen. A single italic line in the bottom-center reads "*intermission: let the lights move.*" - **Closing Slide (Section 9, 100vh):** A final generative diagram on the left (a procedural drawing of the seven previous diagrams nested into one composite), and on the right a closing passage with the broadcast's bibliography. **Spatial grammar:** The split-screen rule is absolute -- no element crosses the center divide, except the aurora-light curtain which spans both halves at the top. The transcript column on the right is centered within its half, with 96px top padding and 48px side padding. The canvas on the left has zero padding -- the generative drawing bleeds edge-to-edge. The center divide is a 1px aurora-green line at 30% opacity, always visible. ## Typography and Palette **Fonts (all Google Fonts):** - **Display wordmark and slide headers:** "Inter" weight 700 at clamp(32px, 4vw, 56px), letter-spacing -0.01em. A clean sans-grotesk used for slide titles ("Slide I: On the Possibility of Tessellation") and the threshold wordmark. - **Transcript body:** "Inter" weight 400 at clamp(15px, 1.1vw, 17px), line-height 1.7. Used for all paragraph text. - **Timestamps and footnote markers:** "JetBrains Mono" weight 400 at 12px, tracking 0.08em. Used for the bracketed timestamps and the footnote numerals. - **Pull-quotes:** "Inter" italic weight 500 at 22-26px, line-height 1.4. Used for the one pull-quote per slide. - **Bibliography (closing slide):** "Inter" weight 400 at 13px, line-height 1.5. **Palette (duotone, indigo-into-aurora-green, plus one aurora-magenta accent for the lights):** - **Indigo ground:** #0B1226 (deep indigo, the page background) and #16213C (slate-indigo, slightly lighter mid-tone). - **Aurora-green primary:** #6FF2C7 (the generative canvas line color, the center divide, the slide headers when active). - **Aurora-magenta accent:** #FF6FB4 (used only for the aurora-light curtain's pink flicker, for active footnote markers, and for the closing slide's nested composite outline). - **Bone-white text:** #E8EEF5 (the transcript body and pull-quotes). - **Mono accent:** #94A4B8 (timestamps and footnote markers, muted slate-blue). - **Aurora curtain gradient stops:** #6FF2C7, #4FD8FF, #B58CF6, #FF6FB4 -- the four polar lights that sweep across the curtain. **Type-color rules:** Body in bone-white. Slide headers in aurora-green when the slide is active (in viewport), bone-white when passed. Pull-quotes in aurora-green italic. Timestamps in mono-accent slate-blue. Aurora-magenta is reserved for the curtain and active footnote markers -- nowhere else. ## Imagery and Motifs **Core visual motifs:** - **Geometric-abstract imagery (imagery mandate):** Seven generative canvases, each a different algorithmic study, drawn live in SVG (or pre-rendered to look so). The seven studies: (1) voronoi cell tessellation across a soft hex-grid, (2) Lissajous curves at 5:7 frequency ratio, (3) recursive triangle mesh subdivided four levels deep, (4) procedural line-study of 600 short strokes following a vector field, (5) polar-coordinate rose curve with 12 petals, (6) particle simulation freezing mid-bloom, (7) the closing composite -- a small reproduction of each of the prior six canvases nested into one final figure. Every canvas uses only aurora-green #6FF2C7 strokes on the indigo ground; line weights are 0.6-1.4px, always thin. Lines feel mathematical, not decorative. - **Aurora-lights motif (motif mandate):** A full-width animated aurora curtain spans the top 18% of the screen at all times. The curtain is composed of four overlapping diagonal gradient strips, each ~340px wide, drifting horizontally at 30-60s loop intervals. The four strip colors are aurora-green, aurora-cyan, aurora-violet, aurora-magenta. Their blend creates a soft polar-light effect that breathes slowly. During the Aurora Bridge (Section 8), the curtain expands to 60vh and intensifies its color saturation by 30%. - **Slide-reveal patterns:** Every slide enters with a slide-reveal: the transcript slides in from the right edge over 700ms (cubic-bezier(.4, 0, .2, 1)), while the generative canvas begins drawing itself line by line over 4-6s. The transcript settles first; the canvas keeps drawing for several seconds after the visitor has begun reading. - **Center-divide rule:** A single 1px aurora-green line at 30% opacity runs the full height of the split. The divide does not animate -- it is the architectural spine. - **Footnote markers:** Each transcript carries 2-3 bracketed footnote numerals in mono accent. When the visitor hovers near a footnote, it briefly turns aurora-magenta, and a small footnote balloon appears below the paragraph with the citation (in mono, 12px). ## Prompts for Implementation **Opening narrative:** Page loads on deep indigo #0B1226. The aurora-lights curtain ignites over 2.4s as the four colored gradient strips drift in from the left edge. The wordmark "yami.tube" fades in over 800ms below the curtain. The italic "a generative broadcast in seven slides" types in via slow typewriter (32cps). The first generative canvas (voronoi tessellation) begins drawing itself line by line over 5 seconds. The transcript on the right slides in from the right edge ("Slide 1 will begin in 4 seconds.") over 700ms. **Scroll narrative:** As the visitor scrolls into each subsequent slide, the previous slide's transcript slides out to the left edge over 600ms while the new transcript slides in from the right edge. The previous canvas fades to 30% opacity and stays visible behind the new canvas, which then draws itself from scratch over 4-6s. The slide header animates from bone-white to aurora-green when the new slide is fully in viewport. **Aurora bridge intermission:** When the visitor enters the Aurora Bridge section, the central divide softly dissolves and the aurora curtain expands from 18vh to 60vh. The polar lights intensify (saturation +30%, drift speed slows to 90s loop). The italic line "intermission: let the lights move." fades in at center-bottom over 1.4s. The bridge holds the visitor in stillness for ~10 seconds of scroll, after which the divide returns and the curtain shrinks back to 18vh. **Footnote interactions:** When the visitor hovers near a bracketed footnote marker, the marker brightens to aurora-magenta, and a small footnote balloon fades in below the paragraph (250ms). The balloon contains the citation in JetBrains Mono. Move cursor away, and the balloon fades out. **Avoid:** No buttons, no nav, no CTAs, no testimonials, no pricing, no stat grids, no comments section. No video. No icons. No round buttons or pills. No drop shadows. No raster imagery -- everything generative is rendered in SVG strokes. **Tone in motion:** Slow, mathematical, breathing. Curves are cubic-bezier(.4, 0, .2, 1). Generative canvases draw at a contemplative pace (4-6s per canvas), the aurora curtain drifts slowly (30-90s loops), the transcripts slide cleanly. Nothing bounces, nothing pulses urgently -- the broadcast is patient. ## Uniqueness Notes **Differentiators from other designs:** 1. **Generative-canvas-as-imagery:** Generative aesthetic (5%) is here taken to its literal end -- every left-half visual is procedurally drawn in SVG, redrawn at slow intervals. No photography (90% AVOIDED), no decorative imagery; pure algorithm. 2. **Split-screen as scholarly lecture broadcast:** Split-screen (5% layout) is rarely paired with scholarly-intellectual tone (5% category). The pairing reframes split-screen from "comparison hero" to "broadcast studio." 3. **Aurora-light curtain as ambient design system:** A persistent animated polar-curtain spans the top of the document at all times, composed of four overlapping color strips drifting at independent loops. Aurora-lights (3% motifs) used as ambient atmosphere rather than as a decorative accent. 4. **Duotone discipline with one accent flicker:** The page is strictly indigo+aurora-green duotone (8% palette), with aurora-magenta reserved for one ambient curtain strip and one interaction (footnote hover). Strict chromatic vocabulary. 5. **Slide-reveal as the only entry mechanic:** Patterns 5% (slide-reveal) does the entire entry duty: every slide transcript slides in from the right, every canvas draws itself, never any other animation type. No parallax (94% AVOIDED), no scroll-triggered fade-ins (33% AVOIDED), no card-grid (90% AVOIDED). 6. **Sans-grotesk as the scholarly voice:** Sans-grotesk (3% typography) is used here as the bookish broadcast voice, not as the corporate sans default. Mono typography (82% overused) is reserved for timestamps and footnotes only. **Chosen seed:** aesthetic: generative, layout: split-screen, typography: sans-grotesk, palette: duotone, patterns: slide-reveal, imagery: geometric-abstract, motifs: aurora-lights, tone: scholarly-intellectual. **Avoided patterns from frequency analysis:** parallax (94%), scroll-triggered (33%), card-grid (90%), centered (94%), photography (90%), mysterious-moody (71%), warm palette (92%) -- the design is cool indigo+aurora-green. Mono typography (82%) reserved for timestamps only.