# Design Language for renai.party ## Aesthetics and Tone renai.party — *renai* (恋愛, "romantic love") plus *.party* — is **the inside of a 2003 chrome heart-shaped locket that someone has turned into a nightclub**. Picture a glittering Y2K-bling jewel-box where every surface is liquid mirror-chrome, hot-pink rhinestones rain in slow motion, and the floor is a wet vinyl dancefloor reflecting a disco ball shaped like a heart. This is *McBling* maximalism — Paris-Hilton-era flip-phone charms, butterfly clips, lip-gloss reflections, holographic stickers — fused with **early-internet love-test culture**: the "are you compatible?" quizzes, the spinning GIF hearts, the marquee text that scrolled "❤ u + me 4ever ❤" across a Geocities page. The mood is unapologetically giddy, glossy, and over-decorated — a love-themed party that is *all icing*. It should feel like a chrome bauble you found in a forgotten MSN Messenger folder: tacky, dazzling, deeply sincere about romance, and grinning the whole time. Nothing here is subtle. Everything sparkles, jingles, and reflects. The tone is **whimsical-creative crossed with optimistic-bright** — it celebrates the silliness of being in love, the rituals of crushes and confessions, the joy of dressing up your feelings in chrome and glitter. It is romance with no irony but plenty of bling. ## Layout Motifs and Structure The structural skeleton is **bento-box** (~16% in layout frequency) reinterpreted as a **jewelry tray** — compartments of unequal size, each one a glossy chrome-bezel "charm slot" holding one piece of content. Crossed with **broken-grid** (~12%) and **layered-depth** (~12%): the bento cells are not flush; they overlap at the corners, tilt 1–3°, and cast soft drop-shadows so the whole tray reads as a pile of dangling phone-charms rather than a clean grid. Avoids card-grid (~91%), full-bleed centered hero (~87%/82%), and dashboard (~34%). Top to bottom: 1. **The Locket Clasp (header)** — a full-width chrome bar with a beveled heart-shaped "clasp" in the center; the wordmark `renai.party` is engraved into the chrome (inset text-shadow). When the page loads the clasp animation "snaps open" and the rest of the page tumbles out. 2. **The Charm Spill (hero)** — instead of a hero banner, ~7 chrome-bezeled bento charms of different sizes spill across a glittery gradient backdrop: one holds the big tagline, one a slowly-spinning heart-disco-ball CSS object, one a marquee of romance words in 12 languages, one a tiny "love-meter" gauge that wobbles, others are decorative rhinestone clusters. 3. **The Compatibility Wheel** — a circular arrangement (the one place we break the bento) of 8 charm-slots around a central spinning heart; each slot is a facet of *renai* — the confession, the first date, the long-distance call, the anniversary — revealed on hover with a glossy flip. 4. **The Glitter Scroll (story strip)** — a vertical ribbon of overlapping bento cells you scroll through; rhinestones parallax past at three depths, and a chrome heart-shaped progress charm fills with pink liquid as you descend. 5. **The Sticker Sheet (footer)** — a "peel-off holographic sticker sheet" of small links styled as die-cut stickers (hearts, butterflies, lip-prints, stars), each lifting a corner on hover. No CTA stacks, no pricing tables, no stat grids — content lives inside charms, marquees, and stickers. ## Typography and Palette **Fonts — Google Fonts only, three families:** - **Bungee** — the bling display face (~0% in typography frequency — essentially unused). Used for the wordmark, all section titles (uppercase, packed tight, with a chrome bevel via layered text-shadows), and the giant tagline. Bungee's signpost-bold geometry takes a metallic gradient beautifully and reads as "rhinestone-stud lettering." - **Sora** — the body/UI sans (~rare). Used for paragraph copy, charm captions, hover-revealed text, footer sticker labels. Slightly geometric and friendly, it keeps the glossy chrome from becoming illegible. - **Cherry Bomb One** — the accent/handwritten-bubbly face (~rare). Used for the romance words in the multilingual marquee, the "love-meter" labels, exclamations ("❤ forever ❤", "match!"), and the spinning compatibility-wheel facet names. Its puffy bubble-letter shape is pure flip-phone-charm energy. **Palette — Y2K chrome-and-candy, seven values:** - `#FF4FA3` — **bubblegum hot-pink** — the dominant romance color; gradient hearts, marquee text, liquid in the progress charm. - `#C9D6E3` — **mirror chrome (light)** — top stop of every metallic bezel and the header bar. - `#5C6B7A` — **mirror chrome (shadow)** — bottom stop of the chrome gradients; gives the bevels their wet-metal depth. - `#7B2FF7` — **electric violet** — secondary glow; rhinestone sparkle cores, hover halos, sticker-sheet holographic shifts. - `#FFE600` — **lemon-glitter yellow** — tiny accent only; sparkle highlights, the "match!" burst, butterfly-clip stickers. - `#0B0712` — **near-black plum** — the deep dancefloor backdrop behind the glitter so the chrome and pink pop. - `#FFF6FB` — **lip-gloss white** — text on dark areas, sticker die-cut borders, the shine streak that travels across chrome on hover. The glitter gradient backdrop is a layered radial blend of `#0B0712 → #7B2FF7 (10%) → #FF4FA3 (4%)` with a fine CSS-generated noise/sparkle layer on top. ## Imagery and Motifs **Primary imagery: vector-art** (~4% in imagery frequency) — *everything* is CSS shapes and inline SVG: no photographs, no raster images. The visual world is built from: chrome-bezeled rectangles and circles, heart shapes (CSS `clip-path`), a faceted disco-heart, rhinestone clusters (radial-gradient dots with a star-glint pseudo-element), butterfly-clip silhouettes, lip-print marks, die-cut star/heart stickers, a marquee ribbon, and a wobbling gauge needle. **Recurring motifs:** - **The chrome bezel** — every container, button, and charm has the same liquid-metal frame: a `linear-gradient(135deg, #C9D6E3, #FFF6FB, #5C6B7A)` border, inset highlight, and a 1px specular line. This is the unifying signature. - **Slow rhinestone rain** — small star-glint sprites drifting downward at three parallax depths behind the bento charms, catching `#FFE600` and `#7B2FF7` glints. - **The disco-heart** — a heart-shaped, faceted CSS object in the hero that rotates slowly; each facet is a tiny chrome panel that flashes pink/violet as it turns. - **Holographic shimmer** — on the sticker-sheet footer, a `conic-gradient` rainbow sheen sweeps across stickers on hover, mimicking holo-foil. - **Love-meter gauge** — a small chrome dial labeled in Cherry Bomb One ("crush → smitten → 4EVER") whose needle wobbles on a gentle spring. - **Engraved chrome text** — headings look stamped *into* metal via dual inset/outset text-shadows. ## Prompts for Implementation Build renai.party as **a single static page** — `index.html`, `style.css`, one small JS module (`bling.js`, ~6KB) — the Google Fonts link the only external dependency. No images, no icon fonts, no frameworks. Lean into storytelling: the page is a *guided tumble through a chrome love-locket-turned-club*, not a brochure. - **The chrome bezel is the architecture.** Define CSS custom properties `--chrome-hi`, `--chrome-lo`, `--bezel: linear-gradient(...)`. Every charm/button/header shares one `.bezel` mixin so the whole page reads as matching jewelry. Bevels = layered `box-shadow` (inset highlight top-left, inset shadow bottom-right, soft outer drop). On `:hover`, a thin white specular streak (`::after`, skewed, `translateX` keyframe) sweeps across the metal — the bling glint. - **Opening: the clasp snap.** On load, a centered chrome heart-clasp "opens" (`clip-path` wipe + slight rotate), and the bento charms tumble in with a `spring` stagger (~70% pattern frequency for stagger — used here as falling charms, each with a tiny bounce-settle and 1–3° random tilt). Respect `prefers-reduced-motion`: skip the tumble, just fade. - **Hero — the charm spill.** ~7 bento cells, unequal sizes, overlapping corners, soft shadows, slight tilts. One cell = the Bungee tagline with a chrome gradient fill (`background-clip: text`). One = the rotating disco-heart (pure CSS 3D, `transform-style: preserve-3d`, facets as child divs). One = a marquee ribbon scrolling "愛 · love · amor · 사랑 · amore · amour · 愛してる · liefde · kärlek …" in Cherry Bomb One on a chrome rail. One = the love-meter gauge with a spring-wobble needle. Decorative cells = rhinestone clusters. - **Compatibility wheel.** 8 charm-slots positioned with `transform: rotate(Nturn) translateY(-radius) rotate(-Nturn)` around a central spinning heart. Each slot shows an icon + Cherry Bomb One facet name; on hover it does a glossy `card-flip` (~11% — fine to use) to reveal a one-line line of romantic copy. The central heart's rotation speed nudges up briefly when any slot is hovered (magnetic-ish attention). - **Glitter scroll.** A vertical ribbon of overlapping bento cells; three layers of rhinestone sprites parallax at different rates (`scroll-triggered`). A heart-shaped chrome charm fixed in the corner fills with `#FF4FA3` liquid (`clip-path` inset animated by scroll progress) — the page's progress indicator, themed as a "love tank." - **Footer — sticker sheet.** Links rendered as die-cut stickers (`#FFF6FB` border, drop-shadow, slight rotation). On hover: a corner peels (`transform: rotate` on a `::before` flap), and a `conic-gradient` holo sheen sweeps across (`mask` + keyframed `background-position`). - **Micro-bling everywhere.** Cursor leaves a faint trail of tiny `#FFE600` sparkle dots that fade in ~600ms (cursor-follow, ~89% — themed as glitter). Clicking any charm emits a small "match!" burst of star particles. Keep total motion gentle and loopable; everything must degrade gracefully with reduced-motion. - **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, plain card grids, full-bleed centered hero banners, hand-drawn/sketch textures, frosted-glass cards. This is hard chrome and candy, not soft glass. ## Uniqueness Notes Differentiators, each a deliberate move against the frequency analysis: 1. **A McBling / Y2K-chrome jewel-box aesthetic** — `mcbling` sits at ~0% and `y2k-futurism` at ~1% in the aesthetic frequency. Against a field that is 95% hand-drawn and 82% glassmorphism, renai.party is liquid mirror-chrome, rhinestones, holo-stickers, and flip-phone charms — a look almost no other site here uses. 2. **A jewelry-tray bento built from overlapping, tilted charm-slots** — not the flush card-grid (~91%) or centered hero (~82%). The grid itself is decorative: cells overlap, tilt, and dangle like phone charms, with the chrome bezel as the unifying signature. 3. **Zero images — an entire chrome/glitter world in CSS + SVG** — vector-art imagery (~4%); photography (98%) is wholly absent. The disco-heart, rhinestone rain, butterfly clips, lip-prints, and die-cut stickers are all CSS shapes and inline SVG. 4. **Type as rhinestone studs and engraved metal** — Bungee (~0%), Cherry Bomb One (~rare), Sora (~rare); chrome `background-clip: text` and inset/outset text-shadows make headings look stamped into or studded onto metal — a treatment absent from the mono-dominated (94%) typography field. 5. **A "love tank" liquid-fill progress charm and a wobbling love-meter gauge** — narrative chrome instruments instead of the usual counters/stat-grids, themed entirely around the rituals of romance. Chosen seed/style: **y2k chrome metallic fashion** (Y2K-futurism / McBling). Avoided per frequency analysis: hand-drawn (95%), glassmorphism (82%), card-grid (91%), full-bleed (87%), centered (82%), photography (98%), mono typography (94%).