# Design Language for renai.club ## Aesthetics and Tone renai.club is an **evolved-minimal** members-only night club — a singular dark room rendered for the screen, in which a serif title and one 3D-rendered piece slowly orbit while everything else stays still. The aesthetic refines minimalism past whitespace into rhythmic restraint: only one element is moving at any given moment, everything else holds its breath. The tone is **minimal** — the page never explains itself, never asks for anything, simply *is*. Inspiration draws from the late period of Berghain's print collateral, the dark-mode UI of Linear, the spatial 3D renderings of Six N. Five, the type-only Jenny Holzer projections at the Solomon Guggenheim, and a single deep purple synth chord held for sixty seconds. Visiting feels like being granted entry to a room where someone is about to speak but hasn't yet. ## Layout Motifs and Structure The architecture is **immersive-scroll** — a single continuous vertical experience divided into five long acts, each one 180–260vh in height: *Threshold*, *Center*, *Sound*, *List*, *Door*. There is no nav, no header, no footer. Each act holds one 3D-rendered hero piece centered in the viewport (a chrome arch, a velvet bench, a brass speaker, a glass list-podium, a closing door) with one serif-revival sentence floating beneath. The page scrolls in long quiet movements: the 3D piece on each act rotates slowly on its Y-axis as the user scrolls past, completing a 90° rotation across the act's full height. Acts are separated by a single thin dark-neon horizontal line that subtly glitches into being as the act crests the fold. **Glitch** patterns appear only on these thin act-dividers and on the title's first appearance — restrained, ceremonial flickers. ## Typography and Palette **Typography** is led by Cormorant Garamond (the **serif-revival** brief): Cormorant Garamond Italic Light 144pt for the singular act-statement on each panel (e.g., "those who cross the threshold do not look back"), Cormorant Garamond Regular 18px / 1.7 for any rare body text, and Cormorant Garamond Italic 14px for date stamps and small label runs. A monospace secondary, Geist Mono 11px, handles list-podium member-IDs (e.g., "ID-04-7B" appearing only on the *List* act). Numbers are tabular oldstyle. Only the title and the singular act-statement appear at display sizes; the rest of the page holds its voice down. **Palette** is **dark-neon** — deep midnight with two sparing electric accents: - `#06060A` — true midnight (page ground) - `#0C0C14` — secondary surface (subtly lifted zone) - `#16131C` — purple-black (3D piece shadow ground) - `#E8E1D4` — bone cream (serif type, the only "light") - `#9D7DFF` — electric violet (single neon accent — glitch dividers, single highlight on rotating 3D piece) - `#FF3DA8` — neon rose (used ONLY in the *Sound* act as a single accent ring) - `#3D3340` — dim gray (microcopy, secondary type) - `#000000` — pure black (deepest void zones, full-bleed transitions) Neon accents appear in a strict budget: one violet per act, one rose only in *Sound*. ## Imagery and Motifs Imagery is built around **3d-render** — each act hosts one large hyper-detailed 3D-rendered object (modeled in Blender, exported as a PNG sequence for the scroll-rotation, or as glTF if implementing WebGL). Renders share a consistent lighting: a single hard violet rim-light from upper-right at -45° elevation, deep black ambient fill, with a faint bone-cream key from below. **Retro-patterns** motifs appear only as a thin recurring detail: each act's 3D piece sits on a circular podium etched with a fine geometric pattern (concentric octagons in *Threshold*, parallel slats in *Center*, a 7-segment audio waveform in *Sound*, a wheel-spoke radial in *List*, a single vertical column in *Door*). The patterns nod to dark-mode Berghain print collateral without explicit retro signaling. No photographs; everything is rendered. Decorative micro-furniture: a subtle 1px violet hairline runs at the top of each act, glitching into existence for the first 1.6 seconds. ## Prompts for Implementation Build an immersive-scroll dark members' room with one 3D-rendered piece per act. Each act is `min-height: 220vh; display: grid; place-items: center;` and contains a `` (or `` PNG-sequence) rendering the 3D hero piece. The signature animation: the 3D piece rotates 90° on its Y-axis as a function of scroll position within the act — implemented either as a glTF model with `THREE.js` quaternion rotation tied to scroll progress, or as a PNG sequence of 90 frames swapped on scroll. Cormorant Garamond Italic Light 144pt act-statements use a slow 1.6s `letter-spacing` reveal from +360 to +20 on viewport entry. The **glitch** pattern appears only on the thin act-divider lines: an SVG path with `filter: url(#chromatic-aberration)` that briefly amplifies a cyan/magenta split for 240ms on the first appearance, then settles to a single solid violet line. Act-dividers are 1px, full-width, in `#9D7DFF` at 0.85 opacity. The page background remains `#06060A` constant; no gradients, no motion in the ground. Avoid CTA stacks, pricing menus, signup walls, stat grids, member testimonials — this is a room, not a marketplace. The footer is a single Cormorant Italic line in violet: "renai.club — list closed at midnight." ## Uniqueness Notes - **Differentiator 1:** Evolved-minimal aesthetic that allows one moving 3D-rendered piece per act and nothing else — strict motion-economy that the registry rarely commits to. - **Differentiator 2:** Dark-neon palette with a per-act color budget (one violet accent per act, one rose only in *Sound*) — a quantified accent rule. - **Differentiator 3:** Glitch pattern restricted to act-dividers and title first-appearance only — ceremonial, not decorative. - **Differentiator 4:** Retro-patterns motif rendered as podium-etching beneath each 3D piece — almost no registry design pairs `retro-patterns` motif with `3d-render` imagery this way. - **Differentiator 5:** Cormorant Garamond Italic Light 144pt act-statements with 1.6s letter-spacing reveal — extremely slow type kinesis, matching the ceremonial pace. - Planned seed: aesthetic=evolved-minimal, layout=immersive-scroll, typography=serif-revival, palette=dark-neon, patterns=glitch, imagery=3d-render, motifs=retro-patterns, tone=minimal. - Avoids overused patterns flagged by frequency.sh: `playful` aesthetic (28%), `photography` imagery (89%), `corporate` aesthetic (24%) — none used here.