# Design Language for renai.day ## Aesthetics and Tone renai.day is a **generative** love-letter machine — a daily-refreshed immersive-scroll site where every visit produces a new arrangement of generative-art canvas pieces, sumi-noise textures, and a single Garamond Italic poem composed from a fixed corpus. The aesthetic embraces controlled randomness in the manner of Casey Reas and Manfred Mohr, but anchored to a warm retro-futuristic palette so the page feels like opening a postcard rather than viewing a code experiment. The tone is **approachable-casual** — the page introduces itself, talks to the visitor, occasionally apologizes for the algorithm choosing a strange word. Inspiration draws from Tyler Hobbs' *Fidenza* generative pieces, the daily-print poetry of *bpNichol's Concrete* anthology, the soft mountain washes of Hasegawa Tohaku, and the warm-cream palette of Studio Wm. Visiting feels like walking into a postcard kiosk in 1976 that has somehow learned to read what you came in thinking about. ## Layout Motifs and Structure The architecture is **immersive-scroll** — a single long vertical experience composed of five generative "panels", each one 140–200vh tall, separated by sumi-noise transitions. Each panel is laid out asymmetrically: a generative `` composition (built per-load) occupies 60% of the viewport, with a single floating phrase of the day's poem set in Garamond Italic at 56pt in the remaining negative space. The five panels are named *opening line*, *the mountains today*, *what the algorithm thinks*, *a folded note*, *closing line*. As the user scrolls, the generative canvas in each panel slowly redraws additional strokes — the algorithm is "still composing" while you read. **Hover-lift** patterns apply only to the small "drawer cards" along the right margin where the visitor can choose to keep, discard, or save the day's poem. ## Typography and Palette **Typography** is led by EB Garamond (the **garamond-classic** brief): EB Garamond Italic 56pt for the day's poem phrases set on two-line ragged-right blocks, EB Garamond Regular 19px / 1.65 for body, and EB Garamond Italic 13px for date stamps and footer marginalia. A secondary face, Inter Variable at 12px tracked +180 uppercase, handles drawer-card labels and algorithm seed-numbers. Numbers are oldstyle figures throughout — the page should read as printed, not typed. **Palette** is **retro-futuristic** — warm 1970s cream with electric-pastel highlights: - `#F5EBD9` — postcard cream (page ground) - `#E8D9B5` — secondary cream (drawer cards, secondary surface) - `#7B4A2A` — sepia umber (body type, generative strokes baseline) - `#3D2317` — deep umber (headings, Garamond Italic poem) - `#4DD0E1` — pastel cyan (single retro-future accent for generative highlights) - `#FF9AB8` — pale magenta (secondary generative accent) - `#FFD466` — warm yellow (third accent, used for "saved" state) - `#0F1418` — ink-black (highest contrast for key text) The three retro-future accents (cyan, magenta, yellow) appear only in the generative canvases; the body remains umber-on-cream. ## Imagery and Motifs Imagery is built around **noise-texture** — every page surface has a sumi-ink noise overlay at 9% opacity, evoking aged postcard paper. The signature visual element is the per-load generative canvas piece in each panel: built with `` + p5.js (or vanilla Canvas API), each piece composes 200–600 generative ink strokes using a single algorithm seeded by the day's date so the result is stable for a 24-hour cycle. The five algorithms are: *ink-rain* (vertical streaks with varying density), *contour-loops* (offset nested loops in retro-future cyan), *mountain-silhouette* (a procedural mountain landscape with Perlin noise), *folded-paper-grid* (irregular paper-fold simulation lines), and *spiral-arc* (one continuous spiral redrawing over time). **Mountain-landscape** motifs appear specifically as the third algorithm and as a small fixed silhouette running across the page footer in pale umber. Decorative furniture includes a small "seed: 2026.05.12" badge in mono microcopy in the upper-right corner, and drawer-card icons hand-drawn in a single ink line. No photographs. ## Prompts for Implementation Build a generative immersive-scroll postcard. Each of the five panels contains a `` 60vw × 100vh that initializes a generative algorithm seeded by `new Date().toISOString().slice(0,10)` so the result is stable for the day. Use a small Canvas API loop drawing 200–600 strokes per panel; strokes accumulate at 30 strokes per second during the first 12 seconds of panel visibility, giving the impression the algorithm is still composing. Garamond Italic 56pt poem phrases enter on viewport intersection with a 700ms `letter-spacing` reveal from +220 to +0. The signature interaction is **hover-lift**: the right-margin drawer cards (small 240×60 cards labeled *keep*, *discard*, *save*) lift 6px on hover with a 220ms `cubic-bezier(0.25, 1, 0.5, 1)` transition and a subtle warm yellow inset glow `box-shadow: inset 0 0 0 1px rgba(255, 212, 102, 0.4);`. Noise-texture is a single SVG `` overlay at 9% opacity, applied via `position: fixed; inset: 0; mix-blend-mode: multiply;`. Avoid CTA stacks, pricing menus, signup ladders, stat grids — this is a generative postcard, not a product. The footer is a Garamond Italic line above a small mountain-silhouette: "renai.day — composed today, 2026.05.12, seed accepted." ## Uniqueness Notes - **Differentiator 1:** Per-visit generative canvas piece seeded by date so the result is stable for a 24-hour cycle — narrative use of generative-art that almost no other design in the registry commits to. - **Differentiator 2:** Garamond Italic 56pt poem phrases as floating editorial overlays on generative canvas — text-as-poem, not text-as-label. - **Differentiator 3:** Retro-futuristic palette of cream + pastel cyan/magenta/yellow accents — a 1970s "future" register rarely seen in the registry. - **Differentiator 4:** Five distinct generative algorithms per page (one per panel) — variety, not a single algorithm parameterized. - **Differentiator 5:** Hover-lift used semantically on a three-state drawer (keep/discard/save) rather than on generic cards — interactive narrative use. - Planned seed: aesthetic=generative, layout=immersive-scroll, typography=garamond-classic, palette=retro-futuristic, patterns=hover-lift, imagery=noise-texture, motifs=mountain-landscape, tone=approachable-casual. - Avoids overused patterns flagged by frequency.sh: `playful` aesthetic (28%), `photography` imagery (89%), `corporate` aesthetic (24%) — none used here.