# Design Language for renai.plus ## Aesthetics and Tone Editorial long-form journalism reborn as a piece of slow software - imagine The New Yorker's "Snow Fall" project crossed with the aurora-photography work of Mikko Lagerstedt and the spatial typography of Massimo Vignelli's later Unimark phase. The tone is zen-contemplative: paragraphs breathe like haiku, headings appear with the patience of dawn breaking over the arctic horizon. This is not a website you scroll through - it is a place you visit, sit inside, and leave changed. The aesthetic rejects every "media site" cliche: no related-articles sidebar, no infinite-scroll feed, no popup newsletters, no engagement-bait. Instead, content unfolds at the reader's chosen pace through progressive disclosure - sections wait quietly until the reader leans into them. The mood is "auroras photographed from a glass observatory at 3am, with classical music playing through copper speakers." ## Layout Motifs and Structure Immersive-scroll storytelling with full-viewport editorial chapters separated by 100vh transitions of aurora gradient. Each chapter follows a strict editorial canon derived from broadsheet newspaper traditions: a left margin of 8vw for marginalia, a 60ch text column centered in the upper-mid viewport, and floating asymmetric pull-quotes that escape the column into the margins. Drop caps three lines tall begin each chapter. Imagery occupies its own dedicated full-viewport "plate" between text sections - never inline, never inset. Section numbers appear in roman numerals (I, II, III) at 24vw in the upper-left of each chapter break, set in a hairline weight. The page has the spatial proportions of a folio newspaper folded out flat: tall, generous, asymmetric, and built for slow reading. ## Typography and Palette Display and headline typeface: Playfair Display (Google Fonts) at weights 400-900, with optical sizes adjusted by display size - large displays use the high-contrast SC variant, body headings use the regular cut. Set at clamp(56px, 9vw, 140px) for chapter openers with -1% tracking and 0.85 line-height. Body text: Source Serif 4 (Google Fonts) at 19px/1.75 with +0.5% tracking for editorial breath. Marginalia and small caps in Inter (Google Fonts) at 13px tracked to +8% with all-caps treatment. Pull quotes set in Playfair italic at 36-52px. Palette (aurora-gradient): - #0B0E2A deep-polar-night (background, primary surface) - #1A2851 northern-blue (secondary background for chapters) - #4FE0B0 aurora-mint (primary gradient stop, accent) - #A88FFF amethyst-glow (secondary gradient stop) - #FF6BCB rose-aurora (tertiary gradient stop, rare emphasis) - #FDF7E8 page-warm-white (text on dark, primary readable surface) - #8B92B5 mist-blue (secondary text, captions, metadata) ## Imagery and Motifs Isometric-icon illustrations rendered with a 30-degree isometric projection but reinterpreted as architectural diagrams of abstract concepts - each "chapter icon" is a tiny isometric world (a glass observatory, a paper-folding station, a desk with a single candle). These icons are NOT decorative - each one summarizes the chapter's thesis visually. Built in three-color flat shading (highlight, mid, shadow) using palette colors. Abstract-tech motifs are woven throughout: stylized circuit-trace patterns drawn as topographic contour lines, hex-grid backgrounds rendered as faint constellations, vector-field arrows indicating thematic flow between chapters. Aurora gradients (radial, anchored to chapter centers) drift slowly behind the text with 30-second cycle times. ## Prompts for Implementation Build the entire site as a single long-form essay broken into 5-7 immersive chapters. Hero: full viewport. Centered chapter title fades in from below at 0.4 opacity, then resolves to 1.0 over 1800ms with a soft blur transition. The aurora gradient breathes behind the title - use CSS conic-gradient with @keyframes rotation at 60s. Use IntersectionObserver to trigger progressive-disclosure on every paragraph: each paragraph starts at opacity 0 and translateY(20px), and reveals only when its top edge enters 40% from the bottom of viewport. NO card grids, NO related-articles list, NO stat counters, NO pricing modules. Each chapter must occupy MINIMUM 200vh - meaning the user scrolls slowly through each idea. Inline footnotes appear as floating Inter superscripts that expand to full marginalia notes on hover (the marginalia slides in from the left margin). Pull quotes are 100vw centered moments - the regular reading column dissolves and the quote takes the full stage for 100vh. Background aurora gradient slowly shifts hue across the entire document scroll - the top is deep-polar-night, the middle is rose-aurora tinted, the bottom returns to amethyst-glow. Cursor leaves no trail; reading is sacred. ## Uniqueness Notes - Aurora-gradient palette (3% corpus usage) deployed at full editorial commitment - the gradient is not an accent but the structural element separating chapters. - Progressive-disclosure pattern (3% corpus) applied per-paragraph rather than per-section, creating a meditative reading cadence absent from the corpus. - Pairing of editorial aesthetic (16% common) with isometric-icon imagery (2% rare) - this combination does not appear elsewhere; isometric icons normally pair with corporate/tech designs. - Chosen seed: aesthetic: editorial, layout: immersive-scroll, typography: playfair-elegant, palette: aurora-gradient, patterns: progressive-disclosure, imagery: isometric-icons, motifs: abstract-tech, tone: zen-contemplative - Avoided patterns from frequency analysis: parallax (94%), card-grid (90%), photography imagery (90%), warm palette (93%), mono typography (81%), mysterious-moody tone (70%), centered layout (94%) - none used; immersive-scroll layout (5%) and zen-contemplative tone (4%) chosen instead.