# Design Language for renai.one ## Aesthetics and Tone A cyberpunk hanami garden rendered in pastel neon - the visual contradiction is the entire point. Where ninety percent of cyberpunk designs reach for high-contrast blacks and acid greens, renai.one rebels by dressing the genre in cherry-blossom pink, sakura cream, and electric lavender. The mood is "Akira's Neo-Tokyo at dawn, when the rain has just stopped and the neon signs reflect off wet petals." This is a tech-tutorial site, so the tone must educate without lecturing - imagine a senior engineer in a holographic hanten jacket, sketching circuit diagrams in chalk on a Kyoto teahouse wall. Each lesson unfolds with the calm of a tea ceremony but is interrupted by sudden bounce-enter neon glyphs, like a katana being drawn from a silk sheath. The site teaches systems thinking through cultural metaphor: data pipelines are explained as koi ponds, error handling as the ritual of kintsugi, async patterns as the choreography of a Bunraku puppet show. There is no irony, no winking - the cultural motifs are loadbearing, not decorative. ## Layout Motifs and Structure Asymmetric composition built on a torn-fan ogi grid: the page is divided into seven uneven radial sectors that mimic the ribs of a folding fan, anchored at a focal point that drifts by 12vw between sections (top-left in the hero, center-right in the lesson body, bottom-left in the closing). Content blocks never align to the same gutter twice - each lesson card is offset by a fibonacci-derived margin (8px, 13px, 21px, 34px, 55px). Negative space is treated as a character: vast expanses of pastel-tinted void surround small, dense clusters of tutorial text, mimicking the spatial rhythm of an Edo-period emakimono scroll. The navigation lives in a vertical strip on the right edge, written in vertical tategaki orientation. Side notes ("kanji-glosses") appear as floating asymmetric tags pinned to the body text by thin neon hairlines. No symmetric column grid ever appears. ## Typography and Palette Primary typeface: Commissioner (variable, weights 200-800) - chosen for its rare humanist warmth at low weights and its industrial sharpness at heavy weights, used as a single-family system spanning headlines and body. Display accents in Yuji Syuku (Google Fonts) for kanji and decorative Japanese vertical labels. Monospace inline code in JetBrains Mono. Headlines set at clamp(48px, 7vw, 112px) with -2% tracking; body at 17px/1.7 with +1% tracking for breath. Palette (pastel cyberpunk): - #FFD6E8 sakura-petal pink (primary background tint) - #C5B3FF lavender-neon (interactive elements, link glow) - #88E1F2 cyan-mist (secondary accents, code highlights) - #FFF5E1 paper-cream (content surface, washi texture base) - #2A1F3D twilight-violet (primary text, near-black with warmth) - #FF6BAA hot-petal (emphasis, danger states, kintsugi gold replacement) - #3DFFB5 mint-circuit (success states, terminal prompt color) ## Imagery and Motifs Neon-glow line art renders cherry blossoms, torii gates, and circuit traces as if drawn with a single luminous brush stroke. Each illustration carries a 1px outer glow in lavender-neon and a 4px outer bloom in sakura pink. Cultural motifs are specific and respectful: mon (family crest) glyphs frame each tutorial section, kintsugi gold-veins crack across hero illustrations to mark "this is the corrected version" of code, and Sashiko stitch patterns appear as section dividers (interpreted in pixel-grid form). Floating particles drift across the viewport like cherry petals falling through code rain - their fall speed is tied to scroll velocity. Mascot character "Ren-chan" appears as a cyberpunk maiko ghost in three poses (welcome, thinking, satisfied) at lesson boundaries. ## Prompts for Implementation Build the entire site as a vertically scrolling emakimono - one long horizontal narrative unfurled vertically. Hero section: full-viewport, no fold. A single torii gate illustration sits at viewport center; as the user begins scrolling, the gate's neon outline draws itself (bounce-enter pattern with overshoot of 12%, then settles), petals begin falling, and the lesson title types out kana-by-kana. Each tutorial step occupies its own full viewport - DO NOT compress lessons into card grids. Code blocks are wrapped in a faux-tatami border made of repeating sashiko-stitch SVG. When the user hovers any code line, it pulses with a faint mint-circuit glow and the corresponding cultural metaphor (koi pond, kintsugi, etc.) animates in the right margin via subtle scale-pulse. Avoid CTA-heavy layouts entirely - there is one quiet "next lesson" archway at the bottom of each viewport, shaped like a miniature torii. Use IntersectionObserver to trigger bounce-enter on every text block as it enters viewport - bounce should overshoot upward by 8px then settle. Cursor leaves a 600ms-decay trail of pastel petals. No pricing, no stats, no metrics grid. ## Uniqueness Notes - Subverts the cyberpunk genre by rejecting its signature high-contrast palette in favor of fully saturated pastels - no design in the corpus pairs cyberpunk aesthetic with pastel palette at this commitment level. - Vertical tategaki navigation strip on the right edge with floating kanji-gloss side notes - a typographic structure absent from the rest of the corpus. - Bounce-enter pattern (only 3% of corpus uses it) applied as the default reveal animation, replacing the dominant parallax/stagger combination that 94% of designs lean on. - Chosen seed: aesthetic: cyberpunk, layout: asymmetric, typography: commissioner-versatile, palette: pastel, patterns: bounce-enter, imagery: neon-glow, motifs: cultural, tone: tech-tutorial - Avoided patterns from frequency analysis: parallax (94%), card-grid layout (90%), photography imagery (90%), mono typography (81%), mysterious-moody tone (70%), warm palette (93%) - none of these appear in this design.