# Design Language for yome.tube ## Aesthetics and Tone yome.tube (v2) is a **Botanical Retro-Futurist Transmission** -- a hero-dominant broadcast portal where a single floating "tube" of botanical specimens transmits a hand-drawn herbarium message via humanist typography, painted in retro-futurist chrome teals and atomic oranges, dusted with grain-overlay, and framed by marble-classical pilasters. The aesthetic is **botanical** at its core -- every visual is a hand-drawn plant, fruit, or leaf rendered with herbarium-style ink lines -- but the chromatic vocabulary is **retro-futuristic**: teal Atomic-Age greens, atomic-orange accents, chrome highlights, and a Jetsons-era optimism. The .tube suffix is read literally as a glass transmission tube -- a 1956 atomic-bulb illuminated by botanical specimens inside, broadcasting across the page. The tone is **warm-inviting**: this is a friendly retro broadcast, like a TV weatherman delivering a forecast from a botanical observatory in 1958. The marble-classical motifs (two slender pilasters flanking the central tube, a marble pedestal beneath it) anchor the design in dignified ceremony, but the grain-overlay and retro palette keep it warm and approachable. Path-draw-svg patterns govern every appearance -- every line of every botanical illustration draws itself in real time, like a slow-motion etching plate. The narrative spine: the page is a single broadcast in seven "transmissions." The central tube -- a tall glass vessel containing a hand-drawn plant -- changes its specimen as the visitor scrolls. Each transmission is one botanical specimen and one short message. The hero-dominant layout commits 70% of every viewport to the central tube, with only humanist captions in the lower margins. Marble-classical pilasters flank the tube on either side, and a thin grain-overlay sits across everything. ## Layout Motifs and Structure The composition is a **hero-dominant** layout -- 70% of every viewport is dedicated to the central glass tube and its botanical specimen, with the remaining 30% as marginal humanist captions and marble pilaster framing. The hero-dominant pattern (4% layout) is here used not as a single splash-page hero but as a persistent hero that occupies every section. **Macro structure:** - **Threshold (Section 0, 100vh):** A retro-teal field with the wordmark "yome.tube" at the bottom-center in humanist type, 24px tracked, beneath which a small "TRANSMISSION 0/7" indicator appears in mono. At center, a tall empty glass tube illustration (drawn in chrome-line work) waits for its first specimen. Two thin marble-classical pilasters flank the tube on either side, drawn in pale-marble texture with subtle gold veining. The grain-overlay sits at 14% opacity across the entire frame. - **Seven Transmissions (Sections 1-7, 110vh each):** Each transmission is one botanical specimen inside the tube, paired with a humanist message: - **Transmission 1: SEED** -- a single hand-drawn seed in the tube's base, with caption "*we begin with the seed*." - **Transmission 2: SHOOT** -- a thin shoot growing from the seed, "*the first green is the first promise*." - **Transmission 3: LEAF** -- a single hand-drawn leaf unfurled, "*a leaf is a long thought*." - **Transmission 4: STEM** -- a strong stem with leaves, "*the stem holds what the root remembers*." - **Transmission 5: BUD** -- a closed flower bud, "*every bud is a coiled invitation*." - **Transmission 6: BLOOM** -- an open flower, "*the bloom is the broadcast's clearest signal*." - **Transmission 7: FRUIT** -- a single ripe fruit, "*and the fruit, finally, is the message*." Each transmission's central glass tube animates a path-draw-svg reveal of the new specimen as the visitor scrolls into the section -- the previous specimen fades; the new one draws itself line by line. The retro-teal background subtly shifts hue across the seven sections (cool teal at Transmission 1, atomic-orange at Transmission 7). - **Sign-Off (Section 8, 70vh):** The tube fades to empty again, the marble pilasters dim. A final humanist caption: "*end of transmission. begin again, when ready.*" A small mono colophon below. **Spatial grammar:** The central tube and its botanical specimen occupy the vertical center of every section, with marble pilasters at the left and right edges (each pilaster is 80-120px wide, full-height of the section). Captions appear in the lower 20% of each section, in humanist italic. The horizontal centerline of every section is reserved for the tube; nothing crosses it but the specimen itself. Grain-overlay is fixed across all sections. ## Typography and Palette **Fonts (all Google Fonts):** - **Humanist headers (captions and threshold wordmark):** "Lora" weight 500 italic at clamp(24px, 3vw, 44px), letter-spacing 0em, line-height 1.4. A humanist serif used for all 7 transmission captions, the threshold wordmark, and the sign-off. Lora carries the warm-inviting cadence of a friendly broadcast announcer. - **Display labels (TRANSMISSION numerals):** "Lora" weight 600 at 16-18px, small caps tracked 0.22em. Used for the small "TRANSMISSION 1/7" indicators above each section. - **Mono accents (colophon and small markers):** "JetBrains Mono" weight 400 at 11-12px, tracked 0.04em. Used for the colophon and a tiny "transmitting..." indicator near the tube. **Palette (retro-futuristic, teal-and-atomic-orange wheel, plus marble and grain):** - **Retro teals (cool end):** #5BB8B0 (atomic teal), #3F8F89 (mid-teal), #1E5C58 (deep teal). - **Retro creams (mid):** #F0E5C8 (warm cream), #E4D5A8 (oat-paper) -- used as the section's ground after Transmission 4 begins warming. - **Atomic oranges (warm end):** #E89545 (atomic orange), #C76B22 (deep atomic), #8B4012 (burnt atomic). - **Chrome accents:** #D8E4E8 (chrome-pale) for the glass tube's outline and reflective highlight. - **Marble pilasters:** #EDE5D2 (marble-cream) with #C9B98A (gold-veining) -- used only for the two flanking pilasters. - **Botanical ink (illustration linework):** #1C2A28 (deep teal-ink) for the herbarium-style illustrations. - **Grain-overlay:** #2A3032 (cool-noise) at 14% opacity across the entire document. **Type-color rules:** All humanist italic captions in deep teal-ink #1C2A28 on cool-teal grounds (Transmissions 1-4), in burnt atomic #8B4012 on warm-cream grounds (Transmissions 5-7). The "TRANSMISSION" small caps always in chrome-pale #D8E4E8 over teal, in atomic orange over cream. Mono colophon in chrome-pale on either ground. ## Imagery and Motifs **Core visual motifs:** - **Grain-overlay imagery (imagery mandate):** A fine grain-overlay sits at 14% opacity across the entire document, simulating the texture of a 1958 broadcast signal -- a soft analog grain, not digital noise. The grain is monochrome (cool teal-grey dots), and it gives every surface -- tube, pilasters, captions -- a slightly aged broadcast quality. The grain is uniform, not random per section. - **Marble-classical motifs (motif mandate):** Two slender marble pilasters flank the central tube on every section, drawn in marble-cream with subtle gold veining. The pilasters are full-height, 80-120px wide, and never animate (they are the section's architectural anchors). At the threshold and the sign-off, the pilasters carry small classical capitals -- a thin Ionic scroll at the top of each. The marble texture has visible veining patterns that are unique per section (the marble "rotates" subtly as transmissions change). - **Path-draw-svg patterns:** Every botanical specimen inside the tube is drawn via SVG path stroke -- each ink line animates from its start to its end over 2.4-4.0 seconds, depending on specimen complexity. The drawing is the design's primary animation; visitors watch each specimen emerge ink-line by ink-line. After the specimen is fully drawn, it holds still until the next scroll moves to the next transmission. - **Glass tube illustration:** The central tube is a tall (480-560px tall, 160-200px wide) glass vessel rendered as a chrome-line illustration with subtle vertical reflections (3-4 chrome-pale highlights running vertically) and a marble-cream pedestal at its base. The tube does not animate; only the specimen inside does. The tube's chrome reflections shift subtly with cursor position (a faint parallax-like effect, but very small -- 2-4px max shift). - **Atomic-orange transmission glow:** When a transmission is mid-draw, a faint atomic-orange glow blooms around the tube (a soft 40px radial bloom in atomic-orange at 20% opacity), suggesting electrical activity. After the specimen finishes drawing, the glow fades over 1.4s. ## Prompts for Implementation **Opening narrative:** Page loads on retro-teal #3F8F89. The grain-overlay fades in to 14% opacity over 600ms. The marble-classical pilasters draw themselves on the left and right edges via path-draw-svg over 2.2 seconds (top-to-bottom strokes). The central glass tube draws itself via chrome-line path-draw-svg over 2.8 seconds. The wordmark "yome.tube" fades in below the tube. A small "TRANSMISSION 0/7 -- ready" indicator appears beneath the wordmark. The threshold holds for 2 seconds before the first scroll triggers the seed specimen. **Scroll narrative:** As the visitor scrolls into each transmission, the previous specimen fades out from inside the tube over 700ms. The new specimen begins drawing itself via path-draw-svg ink-line by ink-line over 2.4-4.0 seconds. As the drawing begins, the atomic-orange glow blooms around the tube. The humanist italic caption types in below the tube via a slow word-cascade (160ms intervals). The "TRANSMISSION X/7" indicator updates with a brief flicker. After the specimen completes its draw, the atomic-orange glow fades, and the section holds still until the next scroll. **Background warming:** The retro-teal background slowly warms across the seven transmissions -- by Transmission 4 it has shifted toward warm-cream, and by Transmission 7 it is atomic-orange. The shift is tied to scroll position, not time, with smooth chromatic interpolation between sections. **Hover and cursor parallax:** As the visitor moves the cursor, the tube's chrome reflections shift subtly (2-4px max), suggesting a glass surface catching light. The marble pilasters do not respond to cursor. The captions do not respond. The tube is the only interactive surface. **Sign-off:** When the visitor reaches the sign-off, the current specimen (the fruit) fades out from inside the tube over 1.6s. The atomic-orange background slowly cools back to a soft retro-teal mid-tone. The marble pilasters dim by 30%. The final humanist caption fades in word by word. The mono colophon settles below. **Avoid:** No buttons, no nav, no CTAs, no pricing, no testimonials, no stat blocks, no video embeds (despite the .tube suffix), no comments. No flat icons except the hand-drawn botanical specimens. No round buttons or pills. No drop shadows beyond the atomic-orange transmission glow. No photography. No gradient mesh except the page's chromatic warming. **Tone in motion:** Slow, broadcast-paced, ceremonial-but-warm. Curves are cubic-bezier(.4, 0, .2, 1). Path-draw-svg strokes draw at 2.4-4.0 seconds; chromatic warming is scroll-linked; the cursor parallax is minimal. Nothing pops or bounces. The transmission breathes at the speed of a 1958 broadcast. ## Uniqueness Notes **Differentiators from other designs:** 1. **Botanical inside a retro-futurist tube:** Botanical aesthetic (12%) paired with retro-futuristic palette (6%) is unusual -- the corpus rarely combines botanical and retro-futurist. Here the botanical specimens live inside a chrome-line glass transmission tube, broadcasting from a 1958 atomic observatory. 2. **Hero-dominant as persistent broadcast tube:** Hero-dominant (4% layout) used not as a single splash hero but as a persistent central tube occupying every section. The tube is the hero of the entire page. 3. **Marble-classical pilasters as architectural anchor (3% motifs):** Two flanking marble pilasters appear on every section, never animating, providing ceremonial framing. Marble-classical used as actual architectural framing, not as a decorative texture. 4. **Path-draw-svg as the entire animation language:** Path-draw-svg (6% patterns) does the design's complete entry duty: every specimen, every pilaster, every chrome-line element draws itself in real-time. The visitor's experience is watching things being drawn. No parallax (94% AVOIDED), no scroll-triggered fades (33% AVOIDED), no card-grids (90% AVOIDED). 5. **Grain-overlay as broadcast-signal atmosphere (2% imagery):** The grain-overlay is uniform and constant, simulating a 1958 broadcast signal's analog grain. Used not as a decorative noise but as the broadcast medium's texture. 6. **Warm-inviting (3% tone) with retro-futurist (6%) palette:** Mysterious-moody (71% overused) is AVOIDED. The retro-futurist palette is here warmed by the chromatic descent into atomic-orange, and the humanist typography keeps everything friendly. **Chosen seed:** aesthetic: botanical, layout: hero-dominant, typography: humanist, palette: retro-futuristic, patterns: path-draw-svg, imagery: grain-overlay, motifs: marble-classical, tone: warm-inviting. **Avoided patterns from frequency analysis:** parallax (94%), scroll-triggered (33%), card-grid (90%), centered (94%) -- the tube is centered but the layout is hero-dominant, not centered hero-card. Photography (90%) entirely AVOIDED. Mysterious-moody (71%) replaced by warm-inviting. Mono typography (82%) used only for colophon and transmission indicators.