# Design Language for renai.tube ## Aesthetics and Tone Playful aesthetic stretched between two poles - on one side, the warm terracotta-toned mid-century children's book illustration of Bruno Munari and Leo Lionni; on the other side, the chaotic glitch-art video distortion of David O'Reilly and Ryoji Ikeda. The tone is friendly: this is a video sharing site that has personality, that talks to its visitors like a kind friend rather than a corporate gatekeeper. The mood is "a terracotta-tiled Italian cafe at noon in summer, where the analog TV in the corner is glitching beautifully between channels showing both vintage cooking shows and avant-garde video art - and everyone in the cafe is smiling." Playfulness comes from typography choices, soft rounded shapes, friendly mascot characters, and unexpected micro-animations. Friendliness comes from copy that addresses the visitor in second person, uses contractions, and assumes good faith. ## Layout Motifs and Structure Single-column layout: a generous 580px central column houses all content, stacked vertically as a focused viewing experience. The single column is intentional - rejecting the dominant card-grid pattern, this site is a curated playlist that you scroll through like a story. Each video entry is a single horizontal "tube card" - a 16:9 video thumbnail on the left at 380px wide, title and metadata on the right at 200px wide, with a 24px gap. Between video entries: 80vh of negative space with a single friendly mascot illustration centered (the same illustrated character in different cute poses - reading a book, sipping tea, waving). Sections are framed by a soft 32px rounded-corner terracotta border that "tubes" around each entry. Futuristic motifs appear as glitch-streaks across thumbnails - subtle digital scan-line distortions that animate on hover. ## Typography and Palette Display and headline face: Frutiger (Google Fonts substitute: Frutiger is not on Google Fonts, so use its closest free equivalent which IS on Google Fonts: Mulish at weights 300-800 with humanist proportions matches Frutiger's spirit) - the frutiger-clean spec, used at clamp(40px, 6vw, 88px) with 0 tracking, 1.0 line-height. Body text: Mulish (Google Fonts) at 16px/1.65 with +0.25% tracking - friendly humanist proportions. Caption and metadata in Mulish at 13px medium weight with +5% tracking. Display caps for section titles in Fraunces (Google Fonts) at 32px italic for warmth. Palette (terracotta-warm): - #F5E6D3 cream-tile (primary background, terracotta cafe wall warmth) - #E07856 terracotta-clay (primary accent, tube borders, drop caps) - #C44536 burnt-sienna (secondary accent, button fills, emphasis) - #2C1810 espresso-text (primary text, near-black with brown warmth) - #F0B7A4 peach-tile (highlight surface, hover states) - #6B8E4E olive-leaf (success/accent green, fresh tag color) - #F8F1E7 chalk-cream (card surfaces, lightest level) ## Imagery and Motifs Glitch-art imagery: video thumbnails are static frames treated with a 3-layer glitch overlay - horizontal RGB-shift bands (8px high, randomly positioned, 3px chromatic shift), occasional 2-frame pixel-sort distortion, and a faint scan-line texture (1px every 3px at 8% opacity). The glitches are subtle - they read as "this is a video" rather than "this is broken." Subjects are warm and friendly: people cooking, hands holding mugs of tea, sunlight through windows, vintage cooking shows, hand-puppet performances, papercraft animations. Futuristic motifs appear as decorative tags and badges: pixel-style "NEW" and "TRENDING" stickers in burnt-sienna, glitched corner-brackets framing each thumbnail, digital scan-line ornament dividers between entries. A friendly mascot illustration (a small terracotta cat character named "Tubi") appears between video entries doing various small activities. ## Prompts for Implementation Build the site as a cozy viewing playlist with a friendly mascot guiding the way. Hero: full viewport. The page opens with the mascot Tubi (a terracotta cat illustrated in a Bruno Munari style) waving "hello" in a 3-frame SVG animation loop, while the title "renai.tube" types in beside him in Mulish bold. The first video entry slides up from below over 1200ms. Use glitch pattern (8% corpus): on hover, video thumbnails glitch through 200ms of intense RGB-shift and scan-line distortion before settling - it should feel playful and digital, not broken. Section transitions use scroll-triggered glitches: 80ms of distortion across the entire viewport when crossing major section boundaries. NO pricing, NO stats grids, NO conventional CTAs - the only call-to-action is "play" buttons that are circular terracotta-clay buttons (60px) with a play-triangle that wiggles on hover. Between every 3-4 video entries, the mascot Tubi appears centered with a friendly side-note ("isn't this one lovely?" or "next up - a personal favorite of mine") set in Fraunces italic. Cursor is a small play-triangle in terracotta-clay (12px) that grows to 18px over interactive elements. ## Uniqueness Notes - Single-column layout (11% corpus) combined with playful aesthetic and a recurring mascot character that punctuates entries - the mascot-as-divider pattern is absent from the corpus. - Terracotta-warm palette (3% corpus) deployed at full saturation as a cafe-warmth atmosphere, not just an accent - terracotta IS the design system here. - Glitch-art imagery (2% corpus) combined with a friendly mascot and warm tone - inverts the typical "glitch art = serious/edgy" pairing seen elsewhere. - Chosen seed: aesthetic: playful, layout: single-column, typography: frutiger-clean, palette: terracotta-warm, patterns: glitch, imagery: glitch-art, motifs: futuristic, tone: friendly - Avoided patterns from frequency analysis: parallax (94%), card-grid (90%) - explicit rejection by going single-column, photography (90%) - thumbnails are glitched, mono typography (81%), mysterious-moody tone (70%) - explicit friendly tone instead, centered layout in stuffed-content sense (94%).