# Design Language for tsundere.life ## Aesthetics and Tone Light-academia warmed by translucent frost — a wood-panelled university reading room with the windows open to a snowfall of pale generative-art constellations. The page reads as a hush-warm winter library: light cream walls, brass reading lamps, leather-bound study tables, and faint generative geometric snowfall drifting outside the windows. Hero-dominant composition: one large central reading desk dominates the canvas, while everything else gently orbits. Inspiration: the Bodleian Library's Duke Humfrey's wing, Sofia Coppola's "The Beguiled" warm-cream interiors, the generative art of Casey Reas at small scales, and the snowy-warmth of Studio Ghibli's "The Wind Rises" reading-room scenes. The tone is warm-inviting — light-academia normally goes austere; this version reads with the kindness of a librarian who has set aside your favorite armchair. Tsundere: appears scholarly-cool, fills your teacup unprompted. ## Layout Motifs and Structure Hero-dominant composition: one massive central hero (full viewport, 90vh tall) holds the page's main statement — a reading desk with generative-art snowfall behind it. The hero anchors the page; subsequent sections are smaller (50–60vh), positioned in a quiet vertical column 880px wide centered beneath. Skeleton-loading patterns activate as content "warms up" — when a section enters view, its illustration first appears as a soft warm-cream skeleton bar that pulses for 1.6s, then dissolves into the warmer generative artwork. The result is the visual of a slow-developing reading-room photograph. Futuristic motifs appear restrained: small generative geometric constellations in pale frost-lavender drift in the background of every section, as if "outside the window". The hero's reading desk is a leather-warm centerpiece; subsequent sections are smaller cards stacked vertically with translucent-frost backings. ## Typography and Palette - **Display:** "Work Sans" (Google Fonts) — grotesque-neo, weight 300 at 96–140px for the hero statement - **Body:** "Source Serif Pro" (Google Fonts) — for warm reading body at 18px line-height 1.75 - **Subhead:** "Cormorant Garamond" (Google Fonts) — italic for section sub-titles - **Caption / mono:** "Space Grotesk" (Google Fonts) — at 12px for shelf-codes and section coordinates - **Numeric mark:** "Inter" (Google Fonts) — for hero numerals and library call-numbers Palette — Translucent-frost light-academia: - `#FAF6EB` Cream Vellum — main background, the reading-room wall - `#E8DCBC` Aged Foolscap — secondary surface, hero desk leather - `#B89A6E` Brass Library — primary accent, reading-lamp glow - `#3F2E1A` Walnut Pen — body text and shelf-codes - `#C7BBF5` Pale Iris Frost — translucent-frost generative-art tint - `#D9E6F0` Snow Glass — secondary frost-tint for section cards ## Imagery and Motifs - **Generative-art**: faint pale-iris-frost constellations drift outside every section "window" — small generative geometric compositions (Voronoi snow-flakes, low-density Perlin-noise particle fields, gentle Lissajous figure pen-traces). Each generative composition is unique per section, rendered as inline SVG with a stable seed - **Futuristic motifs**: thin SVG vector traces (orbit paths, geometric spirals, dotted snowflakes) drift slowly behind the reading-room desks — futuristic in geometry, library-warm in color - Light-academia ornaments: small brass reading-lamp glyphs (warm circle + dangling chain), book-spine silhouettes along section edges, ink-blot ornaments at section transitions - A recurring "open book" hero glyph: a 64px SVG open-book silhouette in walnut + brass, set on the leather desk in the hero - Section call-numbers: each section labeled with library-shelf code (e.g., "PR/4040.T8") in Space Grotesk small-caps top-left ## Prompts for Implementation - Hero-dominant: first section is 90vh tall, full-bleed Cream Vellum with a center-set "reading desk" composition; remaining sections are 50–60vh tall, 880px max-width centered column - Skeleton-loading pattern: when each section enters view, its illustration first appears as a soft Aged Foolscap rectangle pulsing opacity 0.6 → 1 over 1.6s, then dissolves into the actual generative-art SVG - Generative-art: each section embeds an inline SVG composed of 30–60 small Pale Iris Frost points or short segments arranged generatively (Voronoi, low-density Perlin, Lissajous), seed-stable per section - Futuristic motifs: secondary thin Pale-Iris vector traces drift slowly in the background of each section via long `animateTransform` rotate (60s+ cycles) or slow `stroke-dashoffset` - AVOID: pricing tiers, CTA bars, comparison tables, testimonial blocks. Each section is a reading-passage paired with its generative-snow window - Reading-lamp glow: small radial-gradient Brass Library glow at the upper-left of each section, suggesting a warm desk lamp - Hero typography: Work Sans 300 at 120px, italic kicker in Cormorant Garamond 28px, surrounded by generous Cream Vellum air - Translucent-frost cards: each subsection card has `backdrop-filter: blur(6px)` + Snow Glass background at 0.55 alpha + 1px Brass Library top border ## Uniqueness Notes - Differentiator 1: light-academia + translucent-frost is a layered atmospheric pairing — warm room within a frost-window - Differentiator 2: hero-dominant layout used as a reading-desk centerpiece, not as a SaaS hero CTA - Differentiator 3: skeleton-loading reframed as a reading-room photograph developing — narrative use, not perf affordance - Differentiator 4: generative-art imagery rendered restrained, seed-stable, library-snowfall — not chaotic - Differentiator 5: futuristic motifs warmed by walnut+brass register — futuristic geometry, library atmosphere - Chosen seed: aesthetic: light-academia, layout: hero-dominant, typography: grotesque-neo, palette: translucent-frost, patterns: skeleton-loading, imagery: generative-art, motifs: futuristic, tone: warm-inviting - Avoids overused patterns: parallax (94%) — skeleton-loading instead; card-grid (90%) — hero-dominant + single column; centered (94%) — hero is intentional, body column is narrative; photography (90%) — generative-art instead; mysterious-moody (70%); mono typography (81%)