# Design Language for renai.review ## Aesthetics and Tone Dark-academia softened into a friendly, approachable warmth - imagine a beloved philosophy professor who wears tweed but tells jokes, whose office is full of plants and pastel sticky notes alongside leather-bound volumes. The visual paradox is intentional: dark-academia's serious scholarly mood translated through pastel colors, bold display type, and a friendly conversational tone. The mood is "a cozy book review podcast recorded in a sunlit attic library, with chamomile tea and good company." A HUD-overlay structure transforms reading into an interactive experience: floating information panels, animated underlines, lottie-driven micro-moments. This is a site that respects books but doesn't lecture - it invites the reader in. Inspirations: the warmth of Studio Ghibli's library scenes, the friendliness of MUJI's poster work, the bold display typography of Saul Bass title cards. ## Layout Motifs and Structure HUD-overlay composition: a primary content layer occupies the page's center 60-70% (book reviews, essay excerpts), while a peripheral "interface" layer floats above as a pastel HUD - circular info nodes, floating tag chips, animated meta-readouts at viewport corners. The HUD never obscures content; it frames, annotates, and reacts to reading position. Each book review chamber is a horizontal pair: review text on the left in a soft pastel card, book illustration on the right floating in negative space. Sharp-angle motifs cut diagonal divisions between sections - 5-degree slanted edges replace standard horizontal section breaks. The HUD includes: top-left reading-progress hexagon, top-right current-chapter pill, bottom-left ambient time-of-day mood ring, bottom-right footnote drawer trigger. Each is a 60px circle with a 2px line-illustration glyph. ## Typography and Palette Display headlines: Bebas Neue (Google Fonts) at weights 400-700 - the bebas-bold spec, used at clamp(72px, 11vw, 180px) with 0 tracking, set in pastel-tinted near-black for chapter and review titles. The condensed sans-serif provides the bold-display energy that contrasts the gentle palette. Body text: Inter (Google Fonts) at 17px/1.7 in a warm dark-charcoal. HUD readouts and metadata in JetBrains Mono at 12px with +6% tracking. Pull quotes set in Bebas Neue italic at 48px in oxblood-pastel. Palette (pastel - dark-academia recoloured): - #F5E6D3 chamomile-cream (primary background) - #E8D4F2 lavender-mist (secondary surface, card fills) - #D4F0E2 sage-pastel (accent for highlights, success states) - #FFB3B3 dusty-rose (emphasis, pull-quotes, drop caps) - #4A3F5C aubergine-soft (primary text, near-black with violet warmth) - #8B7BA8 mauve-mid (secondary text, captions) - #FFE4B5 candle-glow (rare warm accent, HUD highlights) ## Imagery and Motifs Line-illustration imagery: every visual is a single-weight (1.5px) vector line drawing rendered in aubergine-soft on pastel backgrounds. Subjects include open books, fountain pens, reading lamps, plants on shelves, stacked tomes, eyeglasses, ink bottles. Each illustration has Lottie-animated micro-moments: pages turn, smoke rises from a candle, ink drips from a nib, a plant leaf gently waves. Sharp-angle motifs: 5-degree diagonal lines slash across section transitions, decorative chevron clusters frame chapter numbers, sharp triangle bullets replace dot lists. Hex-shape HUD nodes carry tiny line-icons. NO photography, NO 3D renders, NO realism - only flat line-illustrations. ## Prompts for Implementation Build the site as an interactive reading experience with a persistent HUD layer that reacts to scroll position. Hero: full viewport. The HUD elements (4 corner nodes) animate in via Lottie sequences over 2400ms - each hexagon hatches open, its inner line-illustration draws on, then settles. The main title (in Bebas Neue) drops in from above with a soft bounce-settle, while the subtitle types in beneath. As the user scrolls, the top-left HUD progress hexagon fills with sage-pastel - this is the only stat visible on the page, intentionally singular. Each book review is a 100vh chamber with a 5-degree diagonal slash separating it from the next. On hover, any line-illustration animates its corresponding Lottie sequence (page turn, candle flicker, etc.) - the page becomes a living, gentle environment. Use lottie-web for all illustration animation; declare Lottie JSON inline. NO pricing, NO sign-up forms, NO product CTAs. Footnotes live in a slide-out drawer triggered by the bottom-right HUD node - clicking opens a 40vw panel from the right with floating footnote text in mauve-mid. Cursor leaves a soft 4px circle outline in dusty-rose with 400ms decay. ## Uniqueness Notes - Dark-academia aesthetic paired with pastel palette and friendly tone - the corpus has zero designs that recolor dark-academia into pastel; this is a deliberate genre subversion. - Lottie-animation pattern (1% corpus usage) used as the primary interaction mode, with multiple inline Lottie JSON sequences for ambient micro-life - extremely rare in the dataset. - HUD-overlay layout (3% corpus) combined with bebas-bold typography (3% corpus) and line-illustration imagery (3% corpus) - the triple combination is unique. - Chosen seed: aesthetic: dark-academia, layout: hud-overlay, typography: bebas-bold, palette: pastel, patterns: lottie-animation, imagery: line-illustration, motifs: sharp-angles, tone: friendly - Avoided patterns from frequency analysis: parallax (94%), card-grid (90%), photography (90%), warm palette in conventional sense (93%) - though pastel uses warm tones, it inverts dark-academia expectation; mono typography (81%), mysterious-moody tone (70%) - none used.