# Design Language for yome.tube ## Aesthetics and Tone yome.tube ("yome" 嫁 = a beloved partner; also 読め "read it" — and .tube as broadcast/streaming) is reframed as a **warm broadcast lounge for handpicked stories** — a friendly, hand-curated channel of urban tales, neighborhood field-recordings, and small luxuries from city life. The aesthetic is **blobitecture** rendered in **gold-black-luxury**: imagine a Zaha-Hadid-style fluid pavilion at midnight, where the architecture itself melts and pools like spilled honey on obsidian, and the cityscape outside (signage, skylines, marquees) reflects in its glossy curves. The tone is **friendly** — the voice of a generous host introducing favorite clips at a private screening — never aloof, never corporate, but lit like a velvet jewel-box. Mood is unhurried-glamorous: think the warmth of a 1970s late-night talk-show set re-imagined by a contemporary architect who only works in fluid blob-volumes and brushed-brass trim. The page should feel like opening a cabinet of carefully chosen broadcasts presented inside a soft-edged, luminous environment — luxury without coldness. ## Layout Motifs and Structure The page is governed by a **hexagonal-honeycomb** lattice — but the cells are not flat geometric tiles. Each hex is rendered as a soft, blob-rounded "lozenge" with `clip-path: polygon(...)` smoothed by `border-radius` overlays, giving it the look of liquid-bronze pours that have settled into a regular pattern. The honeycomb is a **staggered axial grid**: odd rows offset by half a column-width, six cells per row on desktop, three on tablet, two on mobile. **The Marquee (Hero):** First viewport is a single oversized hex-blob occupying ~70% of viewport height, centered, with five smaller satellite hexes orbiting its edges in a halo arrangement. Inside the central hex sits the wordmark "yome.tube" in mono caps, the hosts' invitation line beneath, and a subtle pulse-glow that follows the cursor (see Cursor-Follow under Patterns). The hero hex has a soft golden inner-shadow ring and a gloss highlight at the upper-left curve, suggesting molten metal under spotlight. **The Grid (Channels):** Below the marquee sits a 6-column honeycomb of ~24 hex cells, each one a "broadcast plate" — a single curated story, clip, or city-recording. Cells are NOT uniform: every third cell is enlarged to "feature" size (1.5x), creating a varied honeycomb of mixed weights. Hover lifts the cell on the z-axis with a 14px translation and softens the surrounding cells (siblings dim to 60% saturation), focusing attention. **The Receiver (Footer Section):** A single full-width blob — wider than tall, an elongated lozenge — sits at the page bottom carrying contact and sign-off content. Inside it sits a "now broadcasting" ticker that scrolls slowly (CSS `animation: marquee 80s linear infinite`) with gold text on black. **No CTA bars, no pricing tiers, no stat-grids.** The structure is editorial and broadcast-flavored — the user wanders the comb, picks a cell, and is told a story. ## Typography and Palette **Typography (all from Google Fonts):** - **Display/Headings:** "JetBrains Mono" (Google Fonts) — used for the wordmark, hex-cell titles, and section labels. Wordmark in weight 800, all-caps with `letter-spacing: 0.18em`. Hex-cell titles in weight 600, `text-transform: uppercase`, `font-size: 0.95rem`, `letter-spacing: 0.12em`. The mono treatment is intentional — it reads as a broadcast-control-room readout, slightly technical, which contrasts beautifully with the soft blob-architecture. - **Editorial body:** "DM Mono" (Google Fonts) — for cell descriptions and short broadcast-blurbs. Weight 400, `font-size: 0.92rem`, `line-height: 1.65`. Slightly humanist mono with a friendlier disposition than JetBrains. - **Numerals/Timecodes:** "Space Mono" (Google Fonts) — used only for episode numbers, timecodes (e.g., `0:42 / 3:18`), and broadcast IDs (e.g., `Y.T-024`). Weight 700, with `font-feature-settings: "tnum"` for tabular alignment. - **Hero scale:** wordmark `clamp(3.5rem, 8.5vw, 7.5rem)`, line-height 1.0. Subtitles `clamp(1rem, 1.4vw, 1.2rem)`. **Palette (gold-black-luxury):** - `#0A0807` — primary obsidian (page ground; nearly-black with warm undertone) - `#161311` — secondary plinth (hex cell base fill) - `#C8A04A` — primary gold (wordmark, hex outlines, focal accents) - `#E8C870` — light gold highlight (gloss curves, hover glow) - `#7A5A1E` — deep brass (hex-cell deep shadow, recessed edges) - `#F4E9C8` — cream-gold (body text on dark, ticker text) - `#3B2F1A` — espresso-bronze (subtle dividers, secondary borders) Gradients: hex-cell backgrounds use a `radial-gradient(ellipse at 30% 25%, #1F1812 0%, #0A0807 70%)` to suggest a soft spotlight pooling on the upper-left curve; the hero hex gets an additional `linear-gradient(135deg, rgba(232,200,112,0.08), transparent 40%)` overlay for the gloss highlight. ## Imagery and Motifs **Abstract Shapes — Blob Receivers and Antennae:** A vocabulary of organic, hand-drawn SVG blob-shapes scattered across the page: tear-drop receiver-domes, kidney-bean antenna pods, cloud-shaped speaker-grilles, melted-bar broadcast-towers. Rendered as inline SVG with `` Gaussian-blur + color-matrix to merge overlapping blobs into single fused organisms. All in `#C8A04A` outline (1.5px stroke, no fill) on the obsidian ground, with a faint `#7A5A1E` drop-shadow. Sizes range from 24px decorative dots to 280px feature blobs anchored to corners. **City-Urban Motifs (small, integrated):** Tiny SVG silhouettes of skyscraper-tops, fire-escape ladders, neon-tube signs, antenna-bristled rooftops are tucked inside hex-cell corners as decorative stamps. They are NOT photographic — flat, geometric, single-color (cream-gold on black), like late-1970s transit-map iconography. Each broadcast-cell carries one urban stamp identifying its "neighborhood" (e.g., a ferris-wheel = pier district, a steam-vent = central district). **Honeycomb Backdrop Tessellation:** Behind the main grid, a dimmer, smaller honeycomb pattern is etched into `body::before` at 8% opacity — a structural echo of the foreground that suggests an infinite city-grid extending behind the visible plates. **Cursor-Follow Spotlight:** Site-wide, a soft `radial-gradient` "spotlight" (320px radius, `#E8C870` at 0.12 alpha, fading to transparent) tracks the cursor via `document.addEventListener('mousemove')` updating CSS custom properties `--mx, --my`. On hex cells, the spotlight intensifies the gold edge-glow as the cursor nears. Inside the hero hex, the spotlight reveals a subtle lined-paper texture only where the cursor is — the surface "wakes up" under attention. **Glossy Highlights:** Each hex carries a 1px `inset 1px 1px 0 rgba(232,200,112,0.18)` highlight at the upper-left, suggesting reflected studio light on a polished surface. On hover, this highlight strengthens to 0.35 alpha. **Vintage Test-Card Microform:** Far-bottom-right of the viewport sits a small (60px) SVG broadcast test-pattern (color-bars stylized in gold/cream/bronze) — a friendly nod to broadcast heritage. Animates a 1px static-shimmer every 4 seconds. ## Prompts for Implementation Build the site as a **late-night broadcast lounge rendered in liquid-bronze architecture** — a hex-honeycomb of curated story-cells inside a warm gold-on-black environment that responds gently to the cursor. **Hex-Cell Geometry:** Use `clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%)` for the hex outline, but soften corners with a layered `::before` pseudo-element using `border-radius: 28px` and `transform: scale(1.02)`. Combine the two for the blob-rounded hex effect — the clip-path defines hex form, the border-radius softens the points so they look like poured rather than cut. Cells: `background: var(--cell-bg)`, `border: 1px solid #C8A04A`, `padding: 2.5rem 2rem`, `aspect-ratio: 1 / 0.866` (true hexagon proportion). **Honeycomb Grid System:** Use CSS Grid with `grid-template-columns: repeat(6, 1fr)`, then offset odd rows via `nth-child` selectors: every 7th cell shifts left by 50% of column width using `transform: translateX(-50%)`. Gap is `0.5rem 1rem`. On viewports < 1024px, switch to 4-column; < 640px, 2-column; < 480px, single column flowing as soft pills (clip-path removed, border-radius 36px). Featured cells (`:nth-child(3n+2)`) get `grid-column: span 1; transform: scale(1.4)` and an additional inner gold-ring. **Cursor-Follow Spotlight (vanilla JS, ~25 lines):** Listen to `mousemove` on `document`, throttle to 16ms with `requestAnimationFrame`, write `--mx`, `--my` to `:root`. CSS uses these on `body::after` for the global spotlight: `background: radial-gradient(320px circle at calc(var(--mx) * 1px) calc(var(--my) * 1px), rgba(232,200,112,0.12), transparent 60%); pointer-events: none; position: fixed; inset: 0; z-index: 1`. Hex cells use the same vars in their `::before` highlight layer to brighten the edge nearest the cursor. **Blob-Goo SVG Filter:** Define once in document head: ``. Apply `filter: url(#goo)` to containers holding clusters of small abstract-shape SVGs to merge them into fused blob-organisms. **Hero Halo Animation:** Five satellite hexes orbit the central hero hex via CSS `@keyframes orbit` rotating a parent container `transform: rotate(360deg)` over 90 seconds, while individual satellites counter-rotate to keep their content upright (`transform: rotate(-360deg)` over 90s). **Hover Choreography:** Hovering a cell triggers (1) cell scales to 1.06 on z-axis with `transform: translateZ(14px) scale(1.06)`, (2) sibling cells `filter: saturate(0.6) opacity(0.7)` via `.honeycomb:has(.cell:hover) .cell:not(:hover)`, (3) gold edge-glow brightens via increased `box-shadow: 0 0 24px rgba(200,160,74,0.35)`, (4) the cell's urban-motif stamp slowly rotates 360deg over 3s. **Marquee Ticker:** Footer "now broadcasting" ticker uses pure CSS `@keyframes marquee` translating text content `-100%` to `100%` over 80s. Text is gold cream on obsidian, `letter-spacing: 0.3em`, JetBrains Mono 600. **Friendly Voice in Copy:** All text should be written as warm host-introductions: "tonight on yome.tube", "we picked these for you", "drop in anywhere", "stay as long as you like". Avoid feature-lists, pricing, and CTA-stacks. Even the contact section reads like an invitation: "knock on the receiver — we'll wave back". **Performance:** No external image assets; all visuals are CSS gradients, inline SVG, and `clip-path`. Total payload should fit in a single HTML file under 60KB. ## Uniqueness Notes **Seed:** aesthetic: blobitecture · layout: hexagonal-honeycomb · typography: mono · palette: gold-black-luxury · patterns: cursor-follow · imagery: abstract-shapes · motifs: city-urban · tone: friendly 1. **Hexagonal honeycomb where every cell is a softened blob, not a sharp hex** — the tension between the rigid axial-honeycomb lattice and the molten-bronze rounded forms inside each cell is the central visual idea. Most hexagonal grids on the web ship perfect angular tiles; this one looks like the hexes have been heated until their corners ran. 2. **Mono typography reframed as broadcast-control-room readout, not tech/code** — JetBrains/Space/DM Mono are nearly always used for "developer/tech" sites; here they're recontextualized as analog broadcast-equipment labeling (timecodes, channel IDs, marquee text), pairing with luxurious blob-architecture for an unexpected old-broadcast-meets-fluid-architecture register. 3. **Cursor-follow as a "studio spotlight" rather than a magic-trail or game pointer** — the cursor is a single, soft, slow gold spotlight that "wakes" the architecture. There is no trailing particles, no rainbow streak, no parallax — just a gentle pool of warm light tracking attention. 4. **Friendly tone delivered through luxury palette** — gold-black is almost always paired with austere/exclusive copy ("members only", "by appointment"). Here the same palette wraps casual, generous, host-voice copy ("drop in anywhere", "we picked these for you"), creating a friendly-luxury register that is genuinely uncommon. 5. **City-urban motifs reduced to tiny corner-stamps inside hex cells** — instead of full skyline hero photography, urban content is compressed into small geometric icons (40-50px) sitting in hex-cell corners as "neighborhood badges", giving each broadcast-cell a subtle sense of place without committing to photography or imagery libraries. 6. **Blobitecture executed without any photography or 3D rendering** — pure SVG goo-filters, clip-paths, and radial-gradients build the entire fluid-architecture vocabulary. No Three.js, no images, no WebGL — the blob aesthetic is achieved through CSS layering and SVG filter primitives alone.